dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
91 lines (84 loc) • 4.02 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Settings</title>
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','TabBar','IconContainer']"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: false, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/_base/window",
"dojo/dom",
"dijit/registry",
"dojox/mobile/i18n",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/TabBar",
"dojox/mobile/IconContainer"
], function(win, dom, registry, i18n){
var lang = location.search.match(/lang=(\w*)/) ? RegExp.$1 : null;
var bundle = i18n.load("dojox.mobile.tests", "sample", lang);
changeLocale = function(){
win.doc.forms[0].submit();
}
dojo.ready(function(){
dom.byId("sel").value = lang;
registry.byId("item1").set("label", bundle["MINUTES"].replace("%1", "30"));
});
});
</script>
<style>
#item2 .mblListItemLabel, #item3 .mblListItemLabel {
margin-right: 100px;
}
</style>
</head>
<body style="visibility:hidden;">
<div id="settings" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props='label:"Today", back:"Sunday", moveTo:"#"'>
<span data-dojo-type="dojox.mobile.ToolBarButton" style="float:right;" data-dojo-props='label:"Monday"'></span>
</div>
<ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='barType:"segmentedControl"'>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"#", selected:true'>Sunday</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"#", label:"Monday"'></li>
</ul>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Today</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li id="item1" data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", rightText:"Second"'>
Sunday
</li>
<li id="item2" data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", label:"Monday"'>
<div data-dojo-type="dojox.mobile.Switch"></div>
</li>
</ul>
<h2 data-dojo-type="dojox.mobile.EdgeToEdgeCategory">Today</h2>
<ul data-dojo-type="dojox.mobile.EdgeToEdgeList">
<li id="item3" data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", label:"Sunday"'>
<div data-dojo-type="dojox.mobile.Switch" data-dojo-props='leftLabel:"ON"'></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", rightText:"Second", moveTo:"#", label:"Monday"'>
</li>
</ul>
<ul data-dojo-type="dojox.mobile.IconContainer" data-dojo-props='label:"Today", back:"Second", transition:"slide"'>
<li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"Sunday", icon:"images/icon-1.png", lazy:true'><div class="box"></div></li>
<li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"Monday", icon:"images/icon-1.png", lazy:true'><div class="box"></div></li>
</ul>
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", moveTo:"#", selected:true'>Sunday</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"#", label:"Monday"'></li>
</ul>
<form style="margin: 10px;">
Locale:
<select id="sel" name="lang" onchange="changeLocale()">
<option value=""></option>
<option value="en">en</option>
<option value="it">it</option>
<option value="ja">ja</option>
</select>
</form>
</div>
</body>
</html>