4 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
5 <script src="../../build/tizen-web-ui-fw/0.1/js/jquery.js"></script>
6 <script src="configure.js"></script>
7 <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw-libs.min.js"></script>
8 <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.min.js"
9 data-framework-theme="tizen-gray"
10 data-framework-viewport-scale=false>
12 <script src="init.js"></script>
13 <script src="widgets/checkbox/checkbox.js"></script>
14 <script src="widgets/switch/switch.js"></script>
15 <script src="widgets/radio/radio.js"></script>
16 <script src="widgets/progressbar.js"></script>
17 <script src="widgets/ctxpopup.js"></script>
18 <script src="widgets/popupwindow/popupwindow.js"></script>
19 <script src="tips/generate-elements-dynamically.js"></script>
20 <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
21 <script src="widgets/multibuttonentry-demo.js"></script>
22 <link rel="stylesheet" href="custom.css" />
23 <title>Tizen UI</title>
25 <!-- for compatibility test -->
26 <meta name="apple-mobile-web-app-capable" content="yes" />
27 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
28 <link rel="apple-touch-icon" href="icon-tizen.png" />
29 <link rel="stylesheet" href="./widgets/grid/css/namecard.css" />
33 <div data-role="page">
34 <div data-role="header" data-position="fixed">
37 <div data-role="content">
38 <p id="current_date"></p>
39 <p id="html_font_size"></p>
40 <ul data-role="listview" data-icon="1line-textonly">
41 <li data-role="list-divider">Controls</li>
42 <li><a href="widgets/button/button.html">Button</a></li>
43 <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
44 <li><a href="widgets/switch/switch.html">Switch</a></li>
45 <li><a href="widgets/radio/radio.html">Radio</a></li>
46 <li><a href="widgets/colorpicker.html">Color picker</a></li>
47 <li><a href="widgets/datefield.html">Time picker</a></li>
48 <li><a href="widgets/progressbar.html">Progressbar</a></li>
49 <li><a href="widgets/entry.html">Entry</a></li>
50 <li><a href="widgets/searchbar.html">Searchbar</a></li>
51 <li><a href="#slider-demo">Slider</a></li>
52 <li><a href="widgets/day-selector.html" >Day Selector</a></li>
53 <li><a href="#NavigationbarMain">Navigation Bar</a></li>
54 <li><a href="widgets/imageslider.html">ImageSlider</a></li>
55 <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
56 <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
57 <li><a href="widgets/handler.html">Handler</a></li>
58 <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
59 <li data-role="list-divider">ControlBar</li>
60 <li><a href="#controlbar-demo">ControlBar</a></li>
62 <li data-role="list-divider">List</li>
63 <li><a href="widgets/list/list.html">List</a></li>
64 <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
65 <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
67 <li data-role="list-divider">Navigation Bar</li>
68 <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
69 <li><a href="#option-header-demo">Optional Header</a></li>
71 <li data-role="list-divider">Popup</li>
72 <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
73 <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
75 <li data-role="list-divider">Notification (ticker)</li>
76 <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
77 <li><a href="widgets/tickernoti-interval.html">TickerNoti Interval</a></li>
78 <li><a href="widgets/small-popup.html">Small Popup</a></li>
79 <li><a href="widgets/small-popup-interval.html">Small Popup Interval</a></li>
81 <li data-role="list-divider">No Contents</li>
82 <li><a href="#no-contents-0">No Contents - Text</a></li>
83 <li><a href="#no-contents-1">No Contents - Picture</a></li>
84 <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
85 <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
87 <li data-role="list-divider">Grid view</li>
88 <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
89 <li data-role="list-divider">Multimedia view</li>
90 <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
92 <li data-role="list-divider">Programming Tips</li>
93 <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
99 <div data-role="page" id="notImplemented">
100 <div data-role="header" data-position="fixed">
101 <h1>Not Implemented</h1>
103 <div data-role="content">
104 <p> Not Implemented </p>
108 <div data-role="page" id="slider-demo" data-add-back-btn="true">
109 <div data-role="header" data-position="fixed">
112 <div data-role="content">
113 <ul data-role="listview">
114 <li data-role="list-divider">Normal Slider</li>
115 <li><input id="mySlider" name="mySlider" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" /></li>
116 <li data-role="list-divider">Popup Slider</li>
117 <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
118 <li data-role="list-divider">Icon Slider</li>
119 <li><input id="mySlider3" name="mySlider3" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
120 <li><input id="mySlider4" name="mySlider4" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
121 <li data-role="list-divider">Text Slider</li>
122 <li><input id="mySlider5" name="mySlider5" data-popupenabled='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li>
123 <li><input id="mySlider5" name="mySlider5" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li>
125 </div><!-- /content -->
126 </div> <!-- /page -->
128 <div data-role="page" id="no-contents-0" data-add-back-btn="true">
129 <div data-role="header" data-position="fixed">
132 <div data-role="content">
133 <div data-role="nocontents" id="nocontents0" data-text1="Text Type" data-text2="Text" data-type="text"></div>
134 </div> <!-- /content -->
135 </div> <!-- /page -->
137 <div data-role="page" id="no-contents-1" data-add-back-btn="true">
138 <div data-role="header" data-position="fixed">
141 <div data-role="content">
142 <div data-role="nocontents" id="nocontents1" data-text1="Picture Type" data-text2="Text" data-type="picture"></div>
143 </div> <!-- /content -->
144 </div> <!-- /page -->
146 <div data-role="page" id="no-contents-2" data-add-back-btn="true">
147 <div data-role="header" data-position="fixed">
150 <div data-role="content">
151 <div data-role="nocontents" id="nocontents2" data-text1="Multimedia Type" data-text2="Text" data-type="multimedia"></div>
152 </div> <!-- /content -->
153 </div> <!-- /page -->
155 <div data-role="page" id="no-contents-3" data-add-back-btn="true">
156 <div data-role="header" data-position="fixed">
159 <div data-role="content">
160 <div data-role="nocontents" id="nocontents3" data-text1="Unnamed Type"></div>
161 </div> <!-- /content -->
162 </div> <!-- /page -->
164 <div data-role="page" id="option-header-demo" data-add-back-btn="true">
165 <div data-role="header" data-position="fixed">
166 <h1>Optional Header</h1>
168 <div data-role="content">
169 <ul data-role="listview" data-icon="1line-textonly">
170 <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
171 <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
172 <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
173 <li><a href="#optionheader2line4btn">2 line 4 buttons</a></li>
178 <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
179 <div data-role="header" data-position="fixed">
180 <a id="123">TestBtn</a>
181 <h1>Option header - 2 buttons</h1>
182 <a id="opt_text" data-icon="optiontray"></a>
183 <a id="1234">TestBtn</a>
185 <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
186 <div class="ui-grid-a ">
187 <div class="ui-block-a"><a data-role="button">Save</a></div>
188 <div class="ui-block-b"><a data-role="button">Next</a></div>
192 <div data-role="content">
193 <p>Some content would be here</p>
197 <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
198 <div data-role="header" data-position="fixed">
199 <h1>Option header - 3 buttons</h1>
200 <div id="myoptionheader2" data-role="optionheader">
201 <div class="ui-grid-b ">
202 <div class="ui-block-a"><a data-role="button">Previous</a></div>
203 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
204 <div class="ui-block-c"><a data-role="button">Save</a></div>
208 <div data-role="content">
209 <p>Some content would be here</p>
213 <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
214 <div data-role="header" data-position="fixed">
215 <h1>Option header - 4 buttons</h1>
216 <div id="myoptionheader3" data-role="optionheader">
217 <div class="ui-grid-c ">
218 <div class="ui-block-a"><a data-role="button">Previous</a></div>
219 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
220 <div class="ui-block-c"><a data-role="button">Save</a></div>
221 <div class="ui-block-d"><a data-role="button">Next</a></div>
225 <div data-role="content">
226 <p>Some content would be here</p>
230 <div data-role="page" id="optionheader2line4btn" data-add-back-btn="true">
231 <div data-role="header" data-position="fixed">
232 <h1>Option header - 4 buttons</h1>
233 <div id="myoptionheader" data-role="optionheader">
234 <div class="ui-grid-c ">
235 <div class="ui-block-a"><a data-role="button">Previous</a></div>
236 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
237 <div class="ui-block-c"><a data-role="button">Save</a></div>
238 <div class="ui-block-d"><a data-role="button">Next</a></div>
239 <div class="ui-block-a"><a data-role="button">Left</a></div>
240 <div class="ui-block-b"><a data-role="button">1st Middle</a></div>
241 <div class="ui-block-c"><a data-role="button">2nd Middle</a></div>
242 <div class="ui-block-d"><a data-role="button">Right</a></div>
246 <div data-role="content">
247 <p>Some content would be here</p>
251 <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
252 <div data-role="header" data-position="fixed">
255 <div data-role="content">
256 <div class="content-primary">
257 <ul data-role="listview">
258 <li><a href="#Tabbar_Main">Tabbar Style</a></li>
259 <li><a href="#Toolbar">Toolbar Style</a></li>
261 </div><!--/content-primary -->
265 <!-- ControlBar Tabbar Style -->
266 <div data-role="page" id="Tabbar_Main">
267 <div data-role="header" data-position="fixed">
270 <div data-role="content">
271 <div class="content-primary">
272 <ul data-role="listview">
273 <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
274 <li><a href="#Tabbar2Items">2 Items Style</a></li>
275 <li><a href="#Tabbar3Items">3 Items Style</a></li>
276 <li><a href="#Tabbar4Items">4 Items Style</a></li>
277 <li><a href="#Tabbar5Items">5 Items Style</a></li>
278 <li><a href="#TabbarText">Only Text Style</a></li>
279 <li><a href="#TabbarIcon">Only Icon Style</a></li>
281 </div><!--/content-primary -->
283 <div data-role="footer"data-position ="fixed">
284 <div data-role="controlbar" data-style="tabbar" >
286 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
287 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
288 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
289 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
290 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
295 <div data-role="page" id="TabbarInHeader">
296 <div data-role="header" data-position="fixed">
297 <div data-role="controlbar" data-style="tabbar" >
299 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
300 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
301 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
302 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
303 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
305 </div><!-- /navbar -->
307 <div data-role="content">
308 <div class="content-primary">
309 <ul data-role="listview">
310 <li><a href="#">Test</a></li>
312 </div><!--/content-primary -->
314 <div data-role="footer"data-position ="fixed">
317 <div data-role="page" id="Tabbar2Items">
318 <div data-role="header" data-position="fixed">
321 <div data-role="content">
322 <div class="content-primary">
323 <ul data-role="listview">
324 <li><a href="#">2 Items Style List</a></li>
326 </div><!--/content-primary -->
328 <div data-role="footer"data-position ="fixed">
329 <div data-role="controlbar" data-style="tabbar" >
331 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
332 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
334 </div><!-- /controlbar -->
338 <div data-role="page" id="Tabbar3Items">
339 <div data-role="header" data-position="fixed">
342 <div data-role="content">
343 <div class="content-primary">
344 <ul data-role="listview">
345 <li><a href="#">3 Items Style List</a></li>
347 </div><!--/content-primary -->
349 <div data-role="footer"data-position ="fixed">
350 <div data-role="controlbar" data-style="tabbar" >
352 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
353 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
354 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
356 </div><!-- /controlbar -->
360 <div data-role="page" id="Tabbar4Items">
361 <div data-role="header" data-position="fixed">
364 <div data-role="content">
365 <div class="content-primary">
366 <ul data-role="listview">
367 <li><a href="#">4 Items Style List</a></li>
369 </div><!--/content-primary -->
371 <div data-role="footer"data-position ="fixed">
372 <div data-role="controlbar" data-style="tabbar" >
374 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
375 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
376 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
377 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
379 </div><!-- /controlbar -->
383 <div data-role="page" id="Tabbar5Items">
384 <div data-role="header" data-position="fixed">
387 <div data-role="content">
388 <div class="content-primary">
389 <ul data-role="listview">
390 <li><a href="#">5 Items Style List</a></li>
392 </div><!--/content-primary -->
394 <div data-role="footer"data-position ="fixed">
395 <div data-role="controlbar" data-style="tabbar" >
397 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
398 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
399 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
400 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
401 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
403 </div><!-- /controlbar -->
407 <div data-role="page" id="TabbarText">
408 <div data-role="header" data-position="fixed">
411 <div data-role="content">
412 <div class="content-primary">
413 <ul data-role="listview">
414 <li><a href="#">Text Style List</a></li>
416 </div><!--/content-primary -->
418 <div data-role="footer"data-position ="fixed">
419 <div data-role="controlbar" data-style="tabbar" >
421 <li><a href="#" class="ui-btn-active">Songs</a></li>
422 <li><a href="#">Favorites</a></li>
423 <li><a href="#">Group</a></li>
424 <li><a href="#">Message</a></li>
425 <li><a href="#">Contact</a></li>
427 </div><!-- /controlbar -->
431 <div data-role="page" id="TabbarIcon">
432 <div data-role="header" data-position="fixed">
435 <div data-role="content">
436 <div class="content-primary">
437 <ul data-role="listview">
438 <li><a href="#">Icon Style List</a></li>
440 </div><!--/content-primary -->
442 <div data-role="footer"data-position ="fixed">
443 <div data-role="controlbar" data-style="tabbar" >
445 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
446 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
447 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
448 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
449 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
451 </div><!-- /controlbar -->
455 <!-- Toolbar Style -->
456 <div data-role="page" id="Toolbar">
457 <div data-role="header" data-position="fixed">
460 <div data-role="content">
461 <div class="content-primary">
462 <ul data-role="listview">
463 <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
464 <li><a href="#Toolbar2Items">2 Items Style</a></li>
465 <li><a href="#Toolbar3Items">3 Items Style</a></li>
466 <li><a href="#Toolbar4Items">4 Items Style</a></li>
467 <li><a href="#Toolbar5Items">5 Items Style</a></li>
468 <li><a href="#ToolbarText">Only Text Style</a></li>
469 <li><a href="#ToolbarIcon">Only Icon Style</a></li>
471 </div><!--/content-primary -->
473 <div data-role="footer"data-position ="fixed">
474 <div data-role="controlbar" data-style="toolbar" >
476 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
477 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
478 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
479 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
480 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
482 </div><!-- /controlbar -->
486 <div data-role="page" id="ToolbarInHeader">
487 <div data-role="header" data-position="fixed">
488 <div data-role="controlbar" data-style="toolbar" >
490 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
491 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
492 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
493 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
494 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
496 </div><!-- /controlbar -->
498 <div data-role="content">
499 <div class="content-primary">
500 <ul data-role="listview">
501 <li><a href="#">Test</a></li>
503 </div><!--/content-primary -->
505 <div data-role="footer"data-position ="fixed">
510 <div data-role="page" id="Toolbar2Items">
511 <div data-role="header" data-position="fixed">
514 <div data-role="content">
515 <div class="content-primary">
516 <ul data-role="listview">
517 <li><a href="#">2 Items Style</a></li>
519 </div><!--/content-primary -->
521 <div data-role="footer"data-position ="fixed">
522 <div data-role="controlbar" data-style="toolbar" >
524 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
525 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
527 </div><!-- /controlbar -->
531 <div data-role="page" id="Toolbar3Items">
532 <div data-role="header" data-position="fixed">
535 <div data-role="content">
536 <div class="content-primary">
537 <ul data-role="listview">
538 <li><a href="#">3 Items Style</a></li>
540 </div><!--/content-primary -->
542 <div data-role="footer"data-position ="fixed">
543 <div data-role="controlbar" data-style="toolbar" >
545 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
546 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
547 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
549 </div><!-- /controlbar -->
553 <div data-role="page" id="Toolbar4Items">
554 <div data-role="header" data-position="fixed">
557 <div data-role="content">
558 <div class="content-primary">
559 <ul data-role="listview">
560 <li><a href="#">4 Items Style</a></li>
562 </div><!--/content-primary -->
564 <div data-role="footer"data-position ="fixed">
565 <div data-role="controlbar" data-style="toolbar" >
567 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
568 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
569 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
570 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
572 </div><!-- /controlbar -->
576 <div data-role="page" id="Toolbar5Items">
577 <div data-role="header" data-position="fixed">
580 <div data-role="content">
581 <div class="content-primary">
582 <ul data-role="listview">
583 <li><a href="#">5 Items Style</a></li>
585 </div><!--/content-primary -->
587 <div data-role="footer"data-position ="fixed">
588 <div data-role="controlbar" data-style="toolbar" >
590 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
591 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
592 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
593 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
594 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
596 </div><!-- /controlbar -->
600 <div data-role="page" id="ToolbarText">
601 <div data-role="header" data-position="fixed">
604 <div data-role="content">
605 <div class="content-primary">
606 <ul data-role="listview">
607 <li><a href="#">Text Style</a></li>
609 </div><!--/content-primary -->
611 <div data-role="footer"data-position ="fixed">
612 <div data-role="controlbar" data-style="toolbar" >
614 <li><a href="#" class="ui-btn-active">Songs</a></li>
615 <li><a href="#">Favorites</a></li>
616 <li><a href="#">Group</a></li>
617 <li><a href="#">Message</a></li>
618 <li><a href="#">Contact</a></li>
620 </div><!-- /controlbar -->
624 <div data-role="page" id="ToolbarIcon">
625 <div data-role="header" data-position="fixed">
628 <div data-role="content">
629 <div class="content-primary">
630 <ul data-role="listview">
631 <li><a href="#">Only Icon Style</a></li>
633 </div><!--/content-primary -->
635 <div data-role="footer"data-position ="fixed">
636 <div data-role="controlbar" data-style="toolbar" >
638 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
639 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
640 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
641 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
642 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
644 </div><!-- /controlbar -->
647 <!-- Toolbar Style -->
651 <div data-role="page" id="Mixed" >
652 <div data-role="header" data-position="fixed">
653 <h1>Mixed Toolbar</h1>
655 <div data-role="content">
656 <p>Not Supported for winset</p>
661 <!-- ControlBar Left Style -->
662 <div data-role="page" id="ControlBarVerticalLeft" >
663 <div data-role="header" data-position="fixed">
664 <h1>Vertical Toolbar</h1>
666 <div data-role="content">
667 <ul data-role="listview" data-icon="1line-textonly">
668 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
669 <li><a href="#notImplemented">Button</a></li>
670 <li><a href="#notImplemented">Check</a></li>
672 <div data-role="controlbar" data-style="left">
674 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
675 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
676 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
677 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
678 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
680 </div><!-- /controlbar -->
683 <!-- ControlBar Left Style -->
685 <!-- ControlBar Right Style -->
686 <div data-role="page" id="ControlBarVerticalRight" >
687 <div data-role="header" data-position="fixed">
688 <h1>Vertical Toolbar</h1>
690 <div data-role="content">
691 <ul data-role="listview" data-icon="1line-textonly">
692 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
693 <li><a href="#notImplemented">Button</a></li>
695 <div data-role="controlbar" data-style="right">
697 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
698 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
699 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
700 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
701 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
703 </div><!-- /controlbar -->
706 <!-- ControlBar Right Style -->
708 <!-- ControlBar Animation -->
709 <div data-role="page" id="ControlBarAnimation" >
710 <div data-role="header" data-position="fixed">
711 <h1>Vertical Toolbar</h1>
713 <div data-role="content">
715 <div data-role="footer"data-position ="fixed">
716 <div data-role="controlbar" data-style="tabbar">
718 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
719 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
720 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
721 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
722 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
724 </div><!-- /controlbar -->
727 <!-- ControlBar Animation -->
729 <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
730 <div data-role="header" data-position="fixed">
733 <div data-role="content">
734 <div class="content-primary">
735 <ul data-role="listview">
736 <li><a href="#normalstyle">Normal style title</a></li>
737 <li><a href="#extendedstyle">Extended style title</a></li>
739 </div><!--/content-primary -->
743 <div data-role="page" id="normalstyle" data-add-back-btn="true">
744 <div data-role="header" data-position="fixed">
745 <h1>Normal Title</h1>
747 <div data-role="content">
748 <div class="content-primary">
749 <ul data-role="listview">
750 <li><a href="#normal1btn">Title 1 button</a></li>
751 <li><a href="#normal2btn">Title 2 button</a></li>
752 <li><a href="#normal3btn">Title 3 button</a></li>
754 </div><!--/content-primary -->
758 <div data-role="page" id="normal1btn">
759 <div data-role="header" data-position="fixed">
761 <h1>Normal Title</h1>
763 <div data-role="content">
764 <div class="content-primary">
765 <ul data-role="listview">
766 <li><a href="#normal1btn">Title 1 button</a></li>
767 <li><a href="#normal2btn">Title 2 button</a></li>
768 <li><a href="#normal3btn">Title 3 button</a></li>
770 </div><!--/content-primary -->
774 <div data-role="page" id="normal2btn">
775 <div data-role="header" data-position="fixed">
777 <h1>Normal Title</h1>
780 <div data-role="content">
781 <div class="content-primary">
782 <ul data-role="listview">
783 <li><a href="#normal1btn">Title 1 button</a></li>
784 <li><a href="#normal2btn">Title 2 button</a></li>
785 <li><a href="#normal3btn">Title 3 button</a></li>
787 </div><!--/content-primary -->
791 <div data-role="page" id="normal3btn" data-add-back-btn="true">
792 <div data-role="header" data-position="fixed">
794 <h1>Normal Title</h1>
798 <div data-role="content">
799 <div class="content-primary">
800 <ul data-role="listview">
801 <li><a href="#normal1btn">Title 1 button</a></li>
802 <li><a href="#normal2btn">Title 2 button</a></li>
803 <li><a href="#normal3btn">Title 3 button</a></li>
805 </div><!--/content-primary -->
809 <div data-role="page" id="extendedstyle" data-add-back-btn="true">
810 <div data-role="header" data-position="fixed">
811 <h1>Extended Title</h1>
813 <div data-role="content">
814 <div class="content-primary">
815 <ul data-role="listview">
816 <li><a href="#extendedstyle2btn">2 Button</a></li>
817 <li><a href="#extendedstyle3btn">3 Button</a></li>
818 <li><a href="#extendedstyle4btn">4 Button</a></li>
819 <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
821 </div><!--/content-primary -->
825 <div data-role="page" id="extendedstyle2btn">
826 <div data-role="header" data-position="fixed">
828 <h1>Extended Title 2 Button </h1>
830 <div data-role="fieldcontain">
831 <fieldset data-role="controlgroup" data-type="horizontal">
832 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
833 <label for="segment1">All</label>
834 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
835 <label for="segment2">Call</label>
839 <div data-role="content">
840 <div class="content-primary">
841 <ul data-role="listview">
842 <li><a href="#extendedstyle2btn">2 Button</a></li>
843 <li><a href="#extendedstyle3btn">3 Button</a></li>
845 </div><!--/content-primary -->
849 <div data-role="page" id="extendedstyle3btn">
850 <div data-role="header" data-position="fixed">
852 <h1>Extended Title 3 Button </h1>
854 <div data-role="fieldcontain">
855 <fieldset data-role="controlgroup" data-type="horizontal">
856 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
857 <label for="segment71">All</label>
858 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
859 <label for="segment72">Call</label>
860 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
861 <label for="segment73">Message</label>
865 <div data-role="content">
866 <div class="content-primary">
867 <ul data-role="listview">
868 <li><a href="#extendedstyle2btn">2 Button</a></li>
869 <li><a href="#extendedstyle3btn">3 Button</a></li>
871 </div><!--/content-primary -->
875 <div data-role="page" id="extendedstyle4btn">
876 <div data-role="header" data-position="fixed">
877 <h1>Extended Title 4 Button </h1>
878 <div data-role="fieldcontain">
879 <fieldset data-role="controlgroup" data-type="horizontal">
880 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
881 <label for="segment71">All</label>
882 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
883 <label for="segment72">Call</label>
884 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
885 <label for="segment73">Message</label>
886 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
887 <label for="segment74">Contact</label>
891 <div data-role="content">
892 <div class="content-primary">
893 <ul data-role="listview">
894 <li><a href="#extendedstyle2btn">2 Button</a></li>
895 <li><a href="#extendedstyle3btn">3 Button</a></li>
897 </div><!--/content-primary -->
901 <div data-role="page" id="footerExtendedStyle">
902 <div data-role="header" data-position="fixed">
903 <h1>Extended Footer style</h1>
905 <div data-role="content">
908 <div data-role="footer" data-position="fixed">
909 <div data-role="fieldcontain">
910 <fieldset data-role="controlgroup" data-type="horizontal">
911 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
912 <label for="segment1">All</label>
913 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
914 <label for="segment2">Call</label>
915 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
916 <label for="segment3">Contact</label>
917 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
918 <label for="segment4">Index</label>
925 <div data-role="page" id="multibuttonentry">
926 <div data-role="header" >
927 <h1>Multi-button Entry</h1>
929 <div data-role="content">
930 <div data-role="multibuttonentry" data-listuri="addressbook"></div>
932 <ul data-role="listview">
933 <li><a id='MBTaddItemTest'>Append Item</a></li>
934 <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
935 <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
936 <li><a id='MBTgetInputTextTest'>Get input text</a></li>
937 <li><a id='MBTselectItemTest'>Select 1</a></li>
938 <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
939 <li><a id='MBTlengthTest'>Length</a></li>
940 <li><a id='MBTfocusOutTest'>Grouping On</a></li>
941 <li><a id='MBTfocusInTest'>Grouping Off</a></li>
942 <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
946 <div data-role="page" id="addressbook" data-footer-Exist="false" >
947 <div data-role="header">
948 <h1>Address Book</h1>
949 <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
951 <div data-role="content" id="contentList">
952 <ul data-role="listview">
953 <li data-role="list-divider">A</li>
954 <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
955 <li><a href="#multibuttonentry">Alex Wickerham</a></li>
956 <li><a href="#multibuttonentry">Avery Johnson</a></li>
957 <li data-role="list-divider">B</li>
958 <li><a href="#multibuttonentry">Bob Cabot</a></li>
959 <li data-role="list-divider">C</li>
960 <li><a href="#multibuttonentry">Caleb Booth</a></li>
961 <li><a href="#multibuttonentry">Christopher Adams</a></li>
962 <li><a href="#multibuttonentry">Culver James</a></li>
963 <li data-role="list-divider">D</li>
964 <li><a href="#multibuttonentry">David Walsh</a></li>
965 <li><a href="#multibuttonentry">Drake Alfred</a></li>
966 <li data-role="list-divider">E</li>
967 <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
968 <li><a href="#multibuttonentry">Emery Parker</a></li>
969 <li><a href="#multibuttonentry">Enid Voldon</a></li>
970 <li data-role="list-divider">F</li>
971 <li><a href="#multibuttonentry">Francis Wall</a></li>
972 <li data-role="list-divider">G</li>
973 <li><a href="#multibuttonentry">Graham Smith</a></li>
974 <li><a href="#multibuttonentry">Greta Peete</a></li>
975 <li data-role="list-divider">H</li>
976 <li><a href="#multibuttonentry">Harvey Walls</a></li>
977 <li data-role="list-divider">M</li>
978 <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
979 <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
980 <li data-role="list-divider">N</li>
981 <li><a href="#multibuttonentry">Nathan Williams</a></li>
982 <li data-role="list-divider">P</li>
983 <li><a href="#multibuttonentry">Paul Baker</a></li>
984 <li><a href="#multibuttonentry">Pete Mason</a></li>
985 <li data-role="list-divider">R</li>
986 <li><a href="#multibuttonentry">Rod Tarker</a></li>
987 <li data-role="list-divider">S</li>
988 <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
990 </div> <!--/content -->