You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
608 lines
22 KiB
608 lines
22 KiB
<!DOCTYPE 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>Templated Widgets Tests</title> |
|
|
|
<!-- DOH test for the dojox/mobile widgets which support templatization: |
|
Button, CheckBox, Heading, ListItem, RadioButton, Slider, |
|
Switch, ToggleButton, and View. --> |
|
|
|
<script type="text/javascript" src="../../../deviceTheme.js"></script> |
|
<script type="text/javascript" src="../../../../../dojo/dojo.js" |
|
data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script> |
|
|
|
<script type="text/javascript"> |
|
// Templates |
|
|
|
// Without widgets (pure HTML); with attach point for label node. |
|
var templateListItem1 = // pure HTML |
|
"<div>A template." + |
|
" <div data-dojo-attach-point=\'labelNode\'></div>" + |
|
"</div>"; |
|
|
|
// With widgets; with attach point for labelNode. |
|
var templateListItem2 = |
|
"<div>" + |
|
" <div data-dojo-type='dojox/mobile/RoundRect'>" + |
|
" A template." + |
|
" <div data-dojo-attach-point='labelNode'></div>" + |
|
" </div>" + |
|
"</div>"; |
|
|
|
// With widgets; without attach point for labelNode. |
|
var templateListItem3 = |
|
"<div>" + |
|
" <div data-dojo-type='dojox/mobile/RoundRect'>" + |
|
" A template." + |
|
" </div>" + |
|
"</div>"; |
|
|
|
var templateHeading1 = |
|
"<div class='mblHeading mblHeadingCenterTitle'>" + |
|
" <span data-dojo-type='dojox/mobile/ToolBarButton'" + |
|
" data-dojo-attach-point='backButton'" + |
|
" data-dojo-props='arrow: \"left\", back: true, transitionDir: -1'>" + |
|
" </span>" + |
|
" <ul data-dojo-type='dojox/mobile/TabBar'" + |
|
" style='float:right;'" + |
|
" data-dojo-props='barType:\"segmentedControl\", selectOne:false'>" + |
|
" <li data-dojo-type='dojox/mobile/TabBarButton'" + |
|
" data-dojo-props='icon:\"mblDomButtonWhiteUpArrow\"'></li>" + |
|
" <li data-dojo-type='dojox/mobile/TabBarButton'" + |
|
" data-dojo-props='icon:\"mblDomButtonWhiteDownArrow\"'></li>" + |
|
" </ul>" + |
|
" <span class='mblHeadingSpanTitle'" + |
|
" data-dojo-attach-point='labelNode'>" + |
|
" </span>" + |
|
" <div class='mblHeadingDivTitle'" + |
|
" data-dojo-attach-point='labelDivNode'>" + |
|
" </div>" + |
|
"</div>"; |
|
|
|
var templateSlider1 = |
|
"<div class='mblSlider mblSliderH' tabindex='0'" + |
|
" aria-valuenow='${value}'" + |
|
" data-dojo-attach-point='focusNode'>" + |
|
" <input data-dojo-attach-point='valueNode'" + |
|
" type='hidden' value='${value}'>" + |
|
" <div data-dojo-attach-point='relativeParent'" + |
|
" style='position: relative; height: 100%; width: 100%;'>" + |
|
" <div data-dojo-attach-point='progressBar'" + |
|
" style='position: absolute; left: 0px; width: 100%;'" + |
|
" class='mblSliderProgressBar mblSliderTransition'>" + |
|
" </div>" + |
|
" <div data-dojo-attach-point='touchBox'" + |
|
" style='position: absolute;' class='mblSliderTouchBox'>" + |
|
" </div>" + |
|
" <div data-dojo-attach-point='handle'" + |
|
" style='position: absolute; left: 100%;'" + |
|
" class='mblSliderHandle mblSliderTransition'>" + |
|
" </div>" + |
|
" </div>" + |
|
"</div>"; |
|
|
|
var templateButton1 = |
|
"<button class='${baseClass}' data-dojo-attach-point='containerNode'></button>"; |
|
|
|
var templateToggleButton1 = |
|
"<span>" + |
|
" <button class='${baseClass}' tabindex='0'" + |
|
" style='-webkit-user-select: none;' aria-pressed='true'" + |
|
" data-dojo-attach-point='containerNode'>" + |
|
" </button>" + |
|
"</span>"; |
|
|
|
var templateCheckBox1 = |
|
"<input type='checkbox'" + |
|
" class='mblCheckBox mblCheckBoxChecked' value='${value}' tabindex='0'" + |
|
" style='-webkit-user-select: none;' aria-checked='true'>"; |
|
|
|
var templateRadioButton1 = |
|
"<input type='radio' value='Small' class='mblRadioButton mblRadioButtonChecked'" + |
|
" tabindex='0' style='-webkit-user-select: none;' aria-checked='true'>"; |
|
|
|
var templateSwitch1 = |
|
"<span class='mblSwitch mblSwDefaultShape mblSwitchOn' tabindex='0' >" + |
|
" <div class='mblSwitchInner' data-dojo-attach-point='inner'>" + |
|
" <div class='mblSwitchBg mblSwitchBgLeft'" + |
|
" data-dojo-attach-point='left'>" + |
|
" <div class='mblSwitchText mblSwitchTextLeft'>ON</div>" + |
|
" </div>" + |
|
" <div class='mblSwitchBg mblSwitchBgRight' style='display: none;'" + |
|
" data-dojo-attach-point='right'>" + |
|
" <div class='mblSwitchText mblSwitchTextRight'>OFF</div>" + |
|
" </div>" + |
|
" <div class='mblSwitchKnob' data-dojo-attach-point='knob'></div>" + |
|
" <input type='hidden' value='on' data-dojo-attach-point='input'>" + |
|
" </div>" + |
|
"</span>"; |
|
|
|
var templateView1 = |
|
"<div>" + |
|
" <div data-dojo-type='dojox/mobile/Heading'" + |
|
" data-dojo-props='label: \"Templated View\"'>" + |
|
" </div>" + |
|
" <div data-dojo-attach-point='myAttachPoint'>" + |
|
"${myProp}" + // no indentation here such that we can test by comparing the |
|
"</div>" + // innerHTML of the attach point with the value of myProp |
|
" <ul data-dojo-type='dojox/mobile/RoundRectList'>" + |
|
" <li data-dojo-type='dojox/mobile/ListItem'>" + |
|
" Apple" + |
|
" </li>" + |
|
" <li data-dojo-type='dojox/mobile/ListItem'>" + |
|
" Banana" + |
|
" </li>"; |
|
" </ul>" + |
|
"</div>"; |
|
|
|
// Templated widget classes |
|
var TemplatedListItem1, TemplatedWithWidgetsListItem1, |
|
TemplatedWithWidgetsHeading1, TemplatedSwitch, TemplatedView1; |
|
|
|
require([ |
|
"dojo/ready", |
|
"dojo/dom", |
|
"dojo/dom-class", |
|
"dojo/sniff", |
|
"dijit/registry", |
|
"dojox/mobile/parser", |
|
"dojox/mobile", |
|
"dojox/mobile/compat", |
|
"dojo/_base/declare", |
|
"dojo/dom-construct", |
|
"doh/runner", |
|
"dijit/_TemplatedMixin", |
|
"dijit/_WidgetsInTemplateMixin", |
|
"dojox/mobile/ListItem", |
|
"dojox/mobile/Heading", |
|
"dojox/mobile/Switch", |
|
"dojox/mobile/View", |
|
"dojox/mobile/Button", |
|
"dojox/mobile/TabBar", |
|
"dojox/mobile/TabBarButton", |
|
"dojox/mobile/CheckBox", |
|
"dojox/mobile/ToggleButton", |
|
"dojox/mobile/RadioButton", |
|
"dojox/mobile/Slider", |
|
"dojox/mobile/RoundRect", |
|
"dojox/mobile/RoundRectList", |
|
"dojox/mobile/ScrollableView" |
|
], function(ready, dom, domClass, has, registry, parser, mobile, compat, declare, domConstruct, |
|
runner, TemplatedMixin, WidgetsInTemplateMixin, |
|
ListItem, Heading, Switch, View){ |
|
|
|
// 2.1 Without widgets (pure HTML); with attach point for labelNode and label property specified |
|
TemplatedListItem1 = declare( |
|
[ListItem, TemplatedMixin], { |
|
label: "Some label", |
|
templateString: templateListItem1 |
|
} |
|
); |
|
|
|
// 2.2 With widgets; with attach point for labelNode but no label property specified |
|
TemplatedWithWidgetsListItem1 = declare( |
|
[ListItem, TemplatedMixin, WidgetsInTemplateMixin], { |
|
templateString: templateListItem2 |
|
} |
|
); |
|
|
|
// 2.3 With widgets; without attach point for labelNode and no label property specified |
|
TemplatedWithWidgetsListItem2 = declare( |
|
[ListItem, TemplatedMixin, WidgetsInTemplateMixin], { |
|
templateString: templateListItem3 |
|
} |
|
); |
|
|
|
// 2.4 With widgets; without attach point for labelNode but label property specified |
|
// (error case) |
|
TemplatedWithWidgetsListItem3 = declare( |
|
[ListItem, TemplatedMixin, WidgetsInTemplateMixin], { |
|
label: "Some label", |
|
templateString: templateListItem3 |
|
} |
|
); |
|
|
|
TemplatedWithWidgetsHeading1 = declare( |
|
[Heading, TemplatedMixin, WidgetsInTemplateMixin], { |
|
templateString: templateHeading1 |
|
} |
|
); |
|
|
|
TemplatedWithWidgetsHeading2 = declare( |
|
[Heading, TemplatedMixin, WidgetsInTemplateMixin], { |
|
back:"Back", |
|
label: "Templated by: <code>Heading2.html</code> (using declare)", |
|
templateString: templateHeading1 |
|
} |
|
); |
|
|
|
TemplatedSwitch = declare( |
|
[Switch, TemplatedMixin], { |
|
templateString: templateSwitch1 |
|
} |
|
); |
|
|
|
TemplatedView1 = declare( |
|
[View, TemplatedMixin, WidgetsInTemplateMixin], { |
|
myProp: "myValue", |
|
templateString: templateView1 |
|
} |
|
); |
|
|
|
ready(function(){ |
|
runner.register("dojox.mobile.test.doh.TemplatedWidgetsTests", [ |
|
function testTemplatedListItem(){ |
|
// 1. Using markup |
|
|
|
// 1.1 With attach point for labelNode and label property specified |
|
var listItem = registry.byId("listItem1"); |
|
runner.assertTrue(!!listItem.domNode); |
|
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem")); |
|
runner.assertEqual("Some label", listItem.label); |
|
runner.assertTrue(!!listItem.labelNode, "1.1 labelNode"); |
|
runner.assertEqual("Some label", listItem.labelNode.innerHTML, "1.1 labelNode.innerHTML"); |
|
|
|
// 1.2 With attach point for labelNode but no label property specified |
|
listItem = registry.byId("listItem2"); |
|
runner.assertTrue(!!listItem.domNode); |
|
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem")); |
|
runner.assertFalse(!!listItem.label, "1.2 label"); |
|
runner.assertTrue(!!listItem.labelNode, "1.2 labelNode"); |
|
|
|
// 1.3 Without attach point for labelNode and no label property specified |
|
listItem = registry.byId("listItem3"); |
|
runner.assertTrue(!!listItem.domNode); |
|
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem")); |
|
runner.assertFalse(!!listItem.label, "1.2 label"); |
|
runner.assertFalse(!!listItem.labelNode, "1.2 labelNode"); |
|
|
|
// 2. Using declare |
|
|
|
// 2.1 With attach point for labelNode and label property specified |
|
listItem = registry.byId("listItem4"); |
|
runner.assertTrue(!!listItem.domNode); |
|
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem")); |
|
runner.assertEqual("Some label", listItem.label); |
|
runner.assertTrue(!!listItem.labelNode); |
|
runner.assertEqual("Some label", listItem.labelNode.innerHTML, "2.1 labelNode.innerHTML"); |
|
|
|
// 2.2 With attach point for labelNode but no label property specified |
|
listItem = registry.byId("listItem5"); |
|
runner.assertTrue(!!listItem.domNode); |
|
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem")); |
|
runner.assertFalse(!!listItem.label, "2.2 label"); |
|
runner.assertTrue(!!listItem.labelNode, "2.2 labelNode"); |
|
|
|
// 2.3 Without attach point for labelNode and no label property specified |
|
listItem = registry.byId("listItem6"); |
|
runner.assertTrue(!!listItem.domNode); |
|
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem")); |
|
runner.assertFalse(!!listItem.label, "2.3 label"); |
|
runner.assertFalse(!!listItem.labelNode, "2.3 labelNode"); |
|
|
|
// 2.4 Without attach point for labelNode but label property specified |
|
// (error case) |
|
try{ |
|
new TemplatedWithWidgetsListItem3({ |
|
label: "Some label" |
|
}); |
|
runner.assertTrue(false, |
|
"Creating a templated ListItem without attach point for labelNode " + |
|
"should throw Error if label property is set"); |
|
}catch(err){ |
|
// error as expected |
|
} |
|
}, |
|
function testTemplatedHeading(){ |
|
// 3. Using markup |
|
|
|
// 3.1 With back specified and no attach point |
|
var heading = registry.byId("heading1"); |
|
runner.assertTrue(!!heading.domNode); |
|
runner.assertTrue(domClass.contains(heading.domNode, "mblHeading")); |
|
runner.assertFalse(!!heading.label); |
|
runner.assertFalse(!!heading.labelNode); |
|
runner.assertFalse(!!heading.labelDivNode); |
|
runner.assertTrue(!!heading.backButton, "3.1 backButton"); |
|
runner.assertEqual("Back", heading.backButton.label, "1.1 backButton.label"); |
|
|
|
// 3.2 With attach points; back and label specified |
|
heading = registry.byId("heading2"); |
|
runner.assertTrue(!!heading.domNode, "heading2.domNode"); |
|
runner.assertTrue(domClass.contains(heading.domNode, "mblHeading")); |
|
runner.assertEqual("Some label", heading.label); |
|
runner.assertTrue(!!heading.labelNode); |
|
runner.assertTrue(!!heading.labelDivNode); |
|
runner.assertEqual("Some label", heading.labelNode.innerHTML); |
|
runner.assertTrue(!!heading.backButton, "3.2 backButton"); |
|
runner.assertEqual("Back", heading.backButton.label, "1.1 backButton.label"); |
|
|
|
// 3.3 Without attach point for backButton but back property specified |
|
// (error case) |
|
try{ |
|
new TemplatedWithWidgetsHeading1({ |
|
back: "Back" |
|
}); |
|
runner.assertTrue(false, |
|
"Creating a templated Heading without attach point for backButton " + |
|
"should throw Error if back property is set"); |
|
}catch(err){ |
|
// error as expected |
|
} |
|
|
|
// 3.4 Without attach point for labelNode but label property specified |
|
// (error case) |
|
try{ |
|
new TemplatedWithWidgetsHeading1({ |
|
label: "Some label" |
|
}); |
|
runner.assertTrue(false, |
|
"Creating a templated Heading without attach point for labelNode " + |
|
"should throw Error if label property is set"); |
|
}catch(err){ |
|
// error as expected |
|
} |
|
}, |
|
function testTemplatedFormControls(){ |
|
// Button |
|
var widget = registry.byId("button1"); |
|
runner.assertTrue(!!widget.domNode); |
|
runner.assertTrue(domClass.contains(widget.domNode, "mblButton")); |
|
|
|
// Slider |
|
widget = registry.byId("slider1"); |
|
runner.assertTrue(!!widget.domNode); |
|
runner.assertTrue(domClass.contains(widget.domNode, "mblSlider")); |
|
runner.assertTrue(!!widget.focusNode); |
|
runner.assertTrue(!!widget.valueNode); |
|
runner.assertTrue(!!widget.relativeParent); |
|
runner.assertTrue(!!widget.progressBar); |
|
runner.assertTrue(!!widget.touchBox); |
|
runner.assertTrue(!!widget.handle); |
|
|
|
// CheckBox |
|
widget = registry.byId("checkbox1"); |
|
runner.assertTrue(!!widget.domNode); |
|
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ? |
|
"mblCheckableInputContainer" : "mblCheckBox")); |
|
|
|
// ToggleButton |
|
widget = registry.byId("togglebutton1"); |
|
runner.assertTrue(!!widget.domNode); |
|
runner.assertTrue(domClass.contains(widget.domNode, "mblToggleButton")); |
|
|
|
// Switch |
|
widget = registry.byId("switch1"); |
|
runner.assertTrue(!!widget.domNode); |
|
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ? |
|
"mblSwitchContainer" : "mblSwitch")); |
|
runner.assertTrue(!!widget.inner); |
|
runner.assertTrue(!!widget.left); |
|
runner.assertTrue(!!widget.right); |
|
runner.assertTrue(!!widget.knob); |
|
runner.assertTrue(!!widget.input); |
|
runner.assertTrue(domClass.contains(widget.inner, "mblSwitchInner")); |
|
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBg")); |
|
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBgLeft")); |
|
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBg")); |
|
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBgRight")); |
|
runner.assertTrue(domClass.contains(widget.knob, "mblSwitchKnob")); |
|
|
|
widget = registry.byId("switch2"); // using declare |
|
runner.assertTrue(!!widget.domNode); |
|
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ? |
|
"mblSwitchContainer" : "mblSwitch")); |
|
runner.assertTrue(!!widget.inner); |
|
runner.assertTrue(!!widget.left); |
|
runner.assertTrue(!!widget.right); |
|
runner.assertTrue(!!widget.knob); |
|
runner.assertTrue(!!widget.input); |
|
runner.assertTrue(domClass.contains(widget.inner, "mblSwitchInner")); |
|
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBg")); |
|
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBgLeft")); |
|
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBg")); |
|
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBgRight")); |
|
runner.assertTrue(domClass.contains(widget.knob, "mblSwitchKnob")); |
|
|
|
// RadioButton |
|
widget = registry.byId("rb1"); // using declare |
|
runner.assertTrue(!!widget.domNode); |
|
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ? |
|
"mblCheckableInputContainer" : "mblRadioButton")); |
|
}, |
|
function testTemplatedView(){ |
|
var view = registry.byId("view1"); |
|
runner.assertTrue(!!view.domNode); |
|
runner.assertTrue(domClass.contains(view.domNode, "mblView")); |
|
runner.assertTrue(!!view.myAttachPoint); |
|
runner.assertTrue(!!view.myAttachPoint.innerHTML); |
|
runner.assertEqual("myValue", view.myAttachPoint.innerHTML, "view.myAttachPoint.innerHTML"); |
|
} |
|
]); |
|
runner.run(); |
|
}); |
|
}) |
|
</script> |
|
|
|
<style type="text/css"> |
|
html,body{ |
|
height: 100%; |
|
} |
|
.mblRoundRect { |
|
margin-left: 32px; |
|
margin-right: 32px; |
|
} |
|
.bold { |
|
font-weight: bold; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="main" data-dojo-type="dojox/mobile/View"> |
|
<!-- Templated ListItem --> |
|
<div id="ListItem" data-dojo-type="dojox/mobile/ScrollableView"> |
|
<ul id="list" data-dojo-type="dojox/mobile/RoundRectList" |
|
data-dojo-props="variableHeight: true"> |
|
|
|
<!-- Templated ListItem --> |
|
|
|
<!-- 1. In markup --> |
|
<!-- 1.1 With attach point for labelNode and label property specified --> |
|
<li id="listItem1" data-dojo-type="dojox/mobile/ListItem" |
|
data-dojo-mixins="dijit/_TemplatedMixin" |
|
data-dojo-props="label:'Some label', |
|
templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'"> |
|
</li> |
|
<!-- 1.2 With attach point for labelNode but no label property specified --> |
|
<li id="listItem2" data-dojo-type="dojox/mobile/ListItem" |
|
data-dojo-mixins="dijit/_TemplatedMixin" |
|
data-dojo-props="templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'"> |
|
</li> |
|
<!-- 1.3 Without attach point for labelNode and no label property specified --> |
|
<li id="listItem3" data-dojo-type="dojox/mobile/ListItem" |
|
data-dojo-mixins="dijit/_TemplatedMixin" |
|
data-dojo-props="templateString: '<div><div>My inline, multiline <i>HTML</i><br>template (markup)</div></div>'"> |
|
</li> |
|
|
|
<!-- 2. In markup using classes created with declare --> |
|
<!-- 2.1 Without widgets (pure HTML); with attach point for labelNode and label property specified --> |
|
<li id="listItem4" data-dojo-type=TemplatedListItem1> |
|
</li> |
|
<!-- 2.2 With widgets; with attach point for labelNode but no label property specified --> |
|
<li id="listItem5" data-dojo-type=TemplatedWithWidgetsListItem1> |
|
</li> |
|
<!-- 2.3 Without attach point for labelNode and no label property specified --> |
|
<li id="listItem6" data-dojo-type=TemplatedWithWidgetsListItem2> |
|
</li> |
|
|
|
<!-- Templated Heading --> |
|
<!-- 3.1 With back specified and no attach point --> |
|
<div id="heading1" data-dojo-type="dojox/mobile/Heading" |
|
data-dojo-props="back:'Back', |
|
templateString: '<div>My inline <i>HTML</i> template (markup)</div>'" |
|
data-dojo-mixins="dijit/_TemplatedMixin"> |
|
</div> |
|
<!-- 3.2 With attach points; back and label specified --> |
|
<div id="heading2" data-dojo-type=TemplatedWithWidgetsHeading1 |
|
data-dojo-props="back:'Back', label: 'Some label'"> |
|
</div> |
|
|
|
<!-- Templated Button --> |
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true"> |
|
<table style="width:100%"> |
|
<tr> |
|
<td><span class="bold">Button</span></td> |
|
<td style="text-align:right"> |
|
<button id="button1" data-dojo-type="dojox/mobile/Button" |
|
data-dojo-props="templateString: templateButton1" |
|
data-dojo-mixins="dijit/_TemplatedMixin"> |
|
Press me! |
|
</button> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
|
|
<!-- Templated Slider --> |
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true"> |
|
<table style="width:100%"> |
|
<tr> |
|
<td><span class="bold">Slider</span></td> |
|
<td style="float:right"> |
|
<input id="slider1" data-dojo-type="dojox/mobile/Slider" |
|
style="width:200px;" type="range" |
|
data-dojo-props="templateString: templateSlider1, |
|
value:10, min:0, max:40, step:0.1" |
|
data-dojo-mixins="dijit/_TemplatedMixin"> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
|
|
<!-- Templated CheckBox --> |
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true"> |
|
<table style="width:100%"> |
|
<tr> |
|
<td><span class="bold">CheckBox</span></td> |
|
<td style="text-align:right"> |
|
<label for="checkbox1">Click me</label> |
|
<input type="checkbox" id="checkbox1" |
|
data-dojo-type="dojox/mobile/CheckBox" |
|
data-dojo-props="templateString: templateCheckBox1"> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
|
|
<!-- Templated ToggleButton --> |
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true"> |
|
<table style="width:100%"> |
|
<tr> |
|
<td><span class="bold">ToggleButton</span></td> |
|
<td style="text-align:right"> |
|
<button id="togglebutton1" data-dojo-type="dojox/mobile/ToggleButton" |
|
data-dojo-props="templateString: templateToggleButton1"> |
|
Toggle me |
|
</button> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
|
|
<!-- Templated Switch --> |
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true"> |
|
<table style="width:100%"> |
|
<tr> |
|
<td><span class="bold">Switch</span></td> |
|
<td style="text-align:right"> |
|
<input id="switch1" type="checkbox" value="on" |
|
data-dojo-type="dojox/mobile/Switch" |
|
data-dojo-props="templateString: templateSwitch1" |
|
data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin"> |
|
</td> |
|
<td style="text-align:right"> |
|
<input id="switch2" type="checkbox" value="on" |
|
data-dojo-type=TemplatedSwitch> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
|
|
<!-- Templated RadioButton --> |
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true"> |
|
<table style="width:100%"> |
|
<tr> |
|
<td><span class="bold">Radio Button</span></td> |
|
<td style="text-align:right"> |
|
<input type="radio" id="rb1" data-dojo-type="dojox/mobile/RadioButton" |
|
data-dojo-props="templateString: templateRadioButton1" |
|
name="mobileRadio" value="Large" checked> |
|
<label for="rb1">1</label> |
|
|
|
<input type="radio" id="rb2" data-dojo-type="dojox/mobile/RadioButton" |
|
data-dojo-props="templateString: templateRadioButton1" |
|
name="mobileRadio" value="Large"> |
|
<label for="rb2">2</label> |
|
|
|
<input type="radio" id="rb3" data-dojo-type="dojox/mobile/RadioButton" |
|
data-dojo-props="templateString: templateRadioButton1" |
|
name="mobileRadio" value="Large"> |
|
<label for="rb3">3</label> |
|
</tr> |
|
</table> |
|
</div> |
|
</ul> |
|
</div> |
|
|
|
<!-- Templated View --> |
|
<div id="view1" data-dojo-type=TemplatedView1> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|