4 <script src="../../build/tizen-web-ui-fw/0.1/js/jquery.js"></script>
5 <script src="configure.js"></script>
6 <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw-libs.min.js"></script>
7 <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.min.js"
8 data-framework-root="../../build/tizen-web-ui-fw"
9 data-framework-version="0.1"
10 data-framework-theme="tizen-gray">
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/popupwindow/popupwindow.js"></script>
18 <script src="tips/generate-elements-dynamically.js"></script>
19 <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
20 <link rel="stylesheet" href="custom.css" />
24 <div data-role="page">
25 <div data-role="header" data-position="fixed">
28 <div data-role="content">
29 <p id="current_date"></p>
30 <ul data-role="listview" data-icon="1line-textonly">
31 <li data-role="list-divider">Controls</li>
32 <li><a href="widgets/button/button.html">Button</a></li>
33 <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
34 <li><a href="widgets/switch/switch.html">Switch</a></li>
35 <li><a href="widgets/radio/radio.html">Radio</a></li>
36 <li><a href="widgets/colorpicker.html">Color picker</a></li>
37 <li><a href="widgets/datefield.html">Time picker</a></li>
38 <li><a href="widgets/progressbar.html">Progressbar</a></li>
39 <li><a href="widgets/entry.html">Entry</a></li>
40 <li><a href="widgets/searchbar.html">Searchbar</a></li>
41 <li><a href="#slider-demo">Slider</a></li>
42 <li><a href="widgets/day-selector.html" >Day Selector</a></li>
43 <li><a href="#NavigationbarMain">Navigation Bar</a></li>
44 <li><a href="widgets/imageslider.html">ImageSlider</a></li>
45 <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
46 <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
47 <li data-role="list-divider">ControlBar</li>
48 <li><a href="#controlbar-demo">ControlBar</a></li>
50 <li data-role="list-divider">List</li>
51 <li><a href="widgets/list/list.html">List</a></li>
52 <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
53 <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
55 <li data-role="list-divider">Dialogue Group</li>
57 <li data-role="list-divider">Navigation Bar</li>
58 <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
59 <li><a href="#option-header-demo">Optional Header</a></li>
61 <li data-role="list-divider">Popup</li>
62 <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
63 <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
65 <li data-role="list-divider">Notification (ticker)</li>
66 <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
67 <li><a href="widgets/tickernoti-interval.html">TickerNoti Interval</a></li>
68 <li><a href="widgets/small-popup.html">Small Popup</a></li>
69 <li><a href="widgets/small-popup-interval.html">Small Popup Interval</a></li>
71 <li data-role="list-divider">No Contents</li>
72 <li><a href="#no-contents-0">No Contents - Text</a></li>
73 <li><a href="#no-contents-1">No Contents - Picture</a></li>
74 <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
75 <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
77 <li data-role="list-divider">Grid view</li>
78 <li data-role="list-divider">Background text</li>
79 <li data-role="list-divider">Page Indicator</li>
80 <li data-role="list-divider">Landscape</li>
81 <li data-role="list-divider">Spilit view</li>
83 <li data-role="list-divider">Etc.</li>
84 <li><a href="#widgets/label.html">Label</a></li>
86 <li data-role="list-divider">Programming Tips</li>
87 <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
93 <div data-role="page" id="notImplemented">
94 <div data-role="header" data-position="fixed">
95 <h1>Not Implemented</h1>
97 <div data-role="content">
98 <p> Not Implemented </p>
102 <div data-role="page" id="slider-demo" data-add-back-btn="true">
103 <div data-role="header" data-position="fixed">
106 <div data-role="content">
107 <ul data-role="listview">
108 <li data-role="list-divider">Normal Slider</li>
109 <li><input id="mySlider" name="mySlider" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" /></li>
110 <li data-role="list-divider">Popup Slider</li>
111 <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
112 <li data-role="list-divider">Icon Slider</li>
113 <li><input id="mySlider3" name="mySlider3" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
114 <li><input id="mySlider4" name="mySlider4" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
115 <li data-role="list-divider">Text Slider</li>
116 <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>
117 <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>
119 </div><!-- /content -->
120 </div> <!-- /page -->
122 <div data-role="page" id="no-contents-0" data-add-back-btn="true">
123 <div data-role="header" data-position="fixed">
126 <div data-role="content">
127 <div data-role="nocontents" id="nocontents0" data-text1="Text Type" data-text2="Text Text Text" data-type="text"></div>
128 </div> <!-- /content -->
129 </div> <!-- /page -->
131 <div data-role="page" id="no-contents-1" data-add-back-btn="true">
132 <div data-role="header" data-position="fixed">
135 <div data-role="content">
136 <div data-role="nocontents" id="nocontents1" data-text1="Picture Type" data-text2="Text Text Text" data-type="picture"></div>
137 </div> <!-- /content -->
138 </div> <!-- /page -->
140 <div data-role="page" id="no-contents-2" data-add-back-btn="true">
141 <div data-role="header" data-position="fixed">
144 <div data-role="content">
145 <div data-role="nocontents" id="nocontents2" data-text1="Multimeida Type" data-text2="Text Text Text" data-type="multimedia"></div>
146 </div> <!-- /content -->
147 </div> <!-- /page -->
149 <div data-role="page" id="no-contents-3" data-add-back-btn="true">
150 <div data-role="header" data-position="fixed">
153 <div data-role="content">
154 <div data-role="nocontents" id="nocontents3" data-text1="Unknown Type"></div>
155 </div> <!-- /content -->
156 </div> <!-- /page -->
158 <div data-role="page" id="option-header-demo" data-add-back-btn="true">
159 <div data-role="header" data-position="fixed">
160 <h1>Optional Header</h1>
162 <div data-role="content">
163 <ul data-role="listview" data-icon="1line-textonly">
164 <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
165 <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
166 <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
167 <li><a href="#optionheader2line4btn">2 line 4 buttons</a></li>
172 <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
173 <div data-role="header" data-position="fixed">
174 <a id="123">TestBtn</a>
175 <h1>Option header - 2 buttons</h1>
176 <a id="opt_text" data-icon="optiontray"></a>
177 <a id="1234">TestBtn</a>
179 <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
180 <div class="ui-grid-a ">
181 <div class="ui-block-a"><a data-role="button">Save</a></div>
182 <div class="ui-block-b"><a data-role="button">Next</a></div>
186 <div data-role="content">
187 <p>Some content would be here</p>
191 <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
192 <div data-role="header" data-position="fixed">
193 <h1>Option header - 3 buttons</h1>
194 <div id="myoptionheader2" data-role="optionheader">
195 <div class="ui-grid-b ">
196 <div class="ui-block-a"><a data-role="button">Previous</a></div>
197 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
198 <div class="ui-block-c"><a data-role="button">Save</a></div>
202 <div data-role="content">
203 <p>Some content would be here</p>
207 <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
208 <div data-role="header" data-position="fixed">
209 <h1>Option header - 4 buttons</h1>
210 <div id="myoptionheader3" data-role="optionheader">
211 <div class="ui-grid-c ">
212 <div class="ui-block-a"><a data-role="button">Previous</a></div>
213 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
214 <div class="ui-block-c"><a data-role="button">Save</a></div>
215 <div class="ui-block-d"><a data-role="button">Next</a></div>
219 <div data-role="content">
220 <p>Some content would be here</p>
224 <div data-role="page" id="optionheader2line4btn" data-add-back-btn="true">
225 <div data-role="header" data-position="fixed">
226 <h1>Option header - 4 buttons</h1>
227 <div id="myoptionheader" data-role="optionheader">
228 <div class="ui-grid-c ">
229 <div class="ui-block-a"><a data-role="button">Previous</a></div>
230 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
231 <div class="ui-block-c"><a data-role="button">Save</a></div>
232 <div class="ui-block-d"><a data-role="button">Next</a></div>
233 <div class="ui-block-a"><a data-role="button">Left</a></div>
234 <div class="ui-block-b"><a data-role="button">1st Middle</a></div>
235 <div class="ui-block-c"><a data-role="button">2nd Middle</a></div>
236 <div class="ui-block-d"><a data-role="button">Right</a></div>
240 <div data-role="content">
241 <p>Some content would be here</p>
245 <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
246 <div data-role="header" data-position="fixed">
249 <div data-role="content">
250 <div class="content-primary">
251 <ul data-role="listview">
252 <li><a href="#Tabbar_Main">Tabbar Style</a></li>
253 <li><a href="#Toolbar">Toolbar Style</a></li>
255 </div><!--/content-primary -->
259 <!-- ControlBar Tabbar Style -->
260 <div data-role="page" id="Tabbar_Main">
261 <div data-role="header" data-position="fixed">
264 <div data-role="content">
265 <div class="content-primary">
266 <ul data-role="listview">
267 <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
268 <li><a href="#Tabbar2Items">2 Items Style</a></li>
269 <li><a href="#Tabbar3Items">3 Items Style</a></li>
270 <li><a href="#Tabbar4Items">4 Items Style</a></li>
271 <li><a href="#Tabbar5Items">5 Items Style</a></li>
272 <li><a href="#TabbarText">Only Text Style</a></li>
273 <li><a href="#TabbarIcon">Only Icon Style</a></li>
275 </div><!--/content-primary -->
277 <div data-role="footer"data-position ="fixed">
278 <div data-role="controlbar" data-style="tabbar" >
280 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
281 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
282 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
283 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
284 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
289 <div data-role="page" id="TabbarInHeader">
290 <div data-role="header" data-position="fixed">
291 <div data-role="controlbar" data-style="tabbar" >
293 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
294 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
295 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
296 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
297 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
299 </div><!-- /navbar -->
301 <div data-role="content">
302 <div class="content-primary">
303 <ul data-role="listview">
304 <li><a href="#">Test</a></li>
306 </div><!--/content-primary -->
308 <div data-role="footer"data-position ="fixed">
311 <div data-role="page" id="Tabbar2Items">
312 <div data-role="header" data-position="fixed">
315 <div data-role="content">
316 <div class="content-primary">
317 <ul data-role="listview">
318 <li><a href="#">2 Items Style List</a></li>
320 </div><!--/content-primary -->
322 <div data-role="footer"data-position ="fixed">
323 <div data-role="controlbar" data-style="tabbar" >
325 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
326 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
328 </div><!-- /controlbar -->
332 <div data-role="page" id="Tabbar3Items">
333 <div data-role="header" data-position="fixed">
336 <div data-role="content">
337 <div class="content-primary">
338 <ul data-role="listview">
339 <li><a href="#">3 Items Style List</a></li>
341 </div><!--/content-primary -->
343 <div data-role="footer"data-position ="fixed">
344 <div data-role="controlbar" data-style="tabbar" >
346 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
347 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
348 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
350 </div><!-- /controlbar -->
354 <div data-role="page" id="Tabbar4Items">
355 <div data-role="header" data-position="fixed">
358 <div data-role="content">
359 <div class="content-primary">
360 <ul data-role="listview">
361 <li><a href="#">4 Items Style List</a></li>
363 </div><!--/content-primary -->
365 <div data-role="footer"data-position ="fixed">
366 <div data-role="controlbar" data-style="tabbar" >
368 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
369 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
370 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
371 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
373 </div><!-- /controlbar -->
377 <div data-role="page" id="Tabbar5Items">
378 <div data-role="header" data-position="fixed">
381 <div data-role="content">
382 <div class="content-primary">
383 <ul data-role="listview">
384 <li><a href="#">5 Items Style List</a></li>
386 </div><!--/content-primary -->
388 <div data-role="footer"data-position ="fixed">
389 <div data-role="controlbar" data-style="tabbar" >
391 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
392 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
393 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
394 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
395 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
397 </div><!-- /controlbar -->
401 <div data-role="page" id="TabbarText">
402 <div data-role="header" data-position="fixed">
405 <div data-role="content">
406 <div class="content-primary">
407 <ul data-role="listview">
408 <li><a href="#">Text Style List</a></li>
410 </div><!--/content-primary -->
412 <div data-role="footer"data-position ="fixed">
413 <div data-role="controlbar" data-style="tabbar" >
415 <li><a href="#" class="ui-btn-active">Songs</a></li>
416 <li><a href="#">Favorites</a></li>
417 <li><a href="#">Group</a></li>
418 <li><a href="#">Message</a></li>
419 <li><a href="#">Contact</a></li>
421 </div><!-- /controlbar -->
425 <div data-role="page" id="TabbarIcon">
426 <div data-role="header" data-position="fixed">
429 <div data-role="content">
430 <div class="content-primary">
431 <ul data-role="listview">
432 <li><a href="#">Icon Style List</a></li>
434 </div><!--/content-primary -->
436 <div data-role="footer"data-position ="fixed">
437 <div data-role="controlbar" data-style="tabbar" >
439 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
440 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
441 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
442 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
443 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
445 </div><!-- /controlbar -->
449 <!-- Toolbar Style -->
450 <div data-role="page" id="Toolbar">
451 <div data-role="header" data-position="fixed">
454 <div data-role="content">
455 <div class="content-primary">
456 <ul data-role="listview">
457 <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
458 <li><a href="#Toolbar2Items">2 Items Style</a></li>
459 <li><a href="#Toolbar3Items">3 Items Style</a></li>
460 <li><a href="#Toolbar4Items">4 Items Style</a></li>
461 <li><a href="#Toolbar5Items">5 Items Style</a></li>
462 <li><a href="#ToolbarText">Only Text Style</a></li>
463 <li><a href="#ToolbarIcon">Only Icon Style</a></li>
465 </div><!--/content-primary -->
467 <div data-role="footer"data-position ="fixed">
468 <div data-role="controlbar" data-style="toolbar" >
470 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
471 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
472 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
473 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
474 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
476 </div><!-- /controlbar -->
480 <div data-role="page" id="ToolbarInHeader">
481 <div data-role="header" data-position="fixed">
482 <div data-role="controlbar" data-style="toolbar" >
484 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
485 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
486 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
487 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
488 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
490 </div><!-- /controlbar -->
492 <div data-role="content">
493 <div class="content-primary">
494 <ul data-role="listview">
495 <li><a href="#">Test</a></li>
497 </div><!--/content-primary -->
499 <div data-role="footer"data-position ="fixed">
504 <div data-role="page" id="Toolbar2Items">
505 <div data-role="header" data-position="fixed">
508 <div data-role="content">
509 <div class="content-primary">
510 <ul data-role="listview">
511 <li><a href="#">2 Items Style</a></li>
513 </div><!--/content-primary -->
515 <div data-role="footer"data-position ="fixed">
516 <div data-role="controlbar" data-style="toolbar" >
518 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
519 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
521 </div><!-- /controlbar -->
525 <div data-role="page" id="Toolbar3Items">
526 <div data-role="header" data-position="fixed">
529 <div data-role="content">
530 <div class="content-primary">
531 <ul data-role="listview">
532 <li><a href="#">3 Items Style</a></li>
534 </div><!--/content-primary -->
536 <div data-role="footer"data-position ="fixed">
537 <div data-role="controlbar" data-style="toolbar" >
539 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
540 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
541 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
543 </div><!-- /controlbar -->
547 <div data-role="page" id="Toolbar4Items">
548 <div data-role="header" data-position="fixed">
551 <div data-role="content">
552 <div class="content-primary">
553 <ul data-role="listview">
554 <li><a href="#">4 Items Style</a></li>
556 </div><!--/content-primary -->
558 <div data-role="footer"data-position ="fixed">
559 <div data-role="controlbar" data-style="toolbar" >
561 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
562 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
563 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
564 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
566 </div><!-- /controlbar -->
570 <div data-role="page" id="Toolbar5Items">
571 <div data-role="header" data-position="fixed">
574 <div data-role="content">
575 <div class="content-primary">
576 <ul data-role="listview">
577 <li><a href="#">5 Items Style</a></li>
579 </div><!--/content-primary -->
581 <div data-role="footer"data-position ="fixed">
582 <div data-role="controlbar" data-style="toolbar" >
584 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
585 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
586 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
587 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
588 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
590 </div><!-- /controlbar -->
594 <div data-role="page" id="ToolbarText">
595 <div data-role="header" data-position="fixed">
598 <div data-role="content">
599 <div class="content-primary">
600 <ul data-role="listview">
601 <li><a href="#">Text Style</a></li>
603 </div><!--/content-primary -->
605 <div data-role="footer"data-position ="fixed">
606 <div data-role="controlbar" data-style="toolbar" >
608 <li><a href="#" class="ui-btn-active">Songs</a></li>
609 <li><a href="#">Favorites</a></li>
610 <li><a href="#">Group</a></li>
611 <li><a href="#">Message</a></li>
612 <li><a href="#">Contact</a></li>
614 </div><!-- /controlbar -->
618 <div data-role="page" id="ToolbarIcon">
619 <div data-role="header" data-position="fixed">
622 <div data-role="content">
623 <div class="content-primary">
624 <ul data-role="listview">
625 <li><a href="#">Only Icon Style</a></li>
627 </div><!--/content-primary -->
629 <div data-role="footer"data-position ="fixed">
630 <div data-role="controlbar" data-style="toolbar" >
632 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
633 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
634 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
635 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
636 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
638 </div><!-- /controlbar -->
641 <!-- Toolbar Style -->
645 <div data-role="page" id="Mixed" >
646 <div data-role="header" data-position="fixed">
647 <h1>Mixed Toolbar</h1>
649 <div data-role="content">
650 <p>Not Supported for winset</p>
655 <!-- ControlBar Left Style -->
656 <div data-role="page" id="ControlBarVerticalLeft" >
657 <div data-role="header" data-position="fixed">
658 <h1>Vertical Toolbar</h1>
660 <div data-role="content">
661 <ul data-role="listview" data-icon="1line-textonly">
662 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
663 <li><a href="#notImplemented">Button</a></li>
664 <li><a href="#notImplemented">Check</a></li>
666 <div data-role="controlbar" data-style="left">
668 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
669 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
670 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
671 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
672 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
674 </div><!-- /controlbar -->
677 <!-- ControlBar Left Style -->
679 <!-- ControlBar Right Style -->
680 <div data-role="page" id="ControlBarVerticalRight" >
681 <div data-role="header" data-position="fixed">
682 <h1>Vertical Toolbar</h1>
684 <div data-role="content">
685 <ul data-role="listview" data-icon="1line-textonly">
686 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
687 <li><a href="#notImplemented">Button</a></li>
689 <div data-role="controlbar" data-style="right">
691 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
692 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
693 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
694 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
695 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
697 </div><!-- /controlbar -->
700 <!-- ControlBar Right Style -->
702 <!-- ControlBar Animation -->
703 <div data-role="page" id="ControlBarAnimation" >
704 <div data-role="header" data-position="fixed">
705 <h1>Vertical Toolbar</h1>
707 <div data-role="content">
709 <div data-role="footer"data-position ="fixed">
710 <div data-role="controlbar" data-style="tabbar">
712 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
713 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
714 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
715 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
716 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
718 </div><!-- /controlbar -->
721 <!-- ControlBar Animation -->
723 <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
724 <div data-role="header" data-position="fixed">
727 <div data-role="content">
728 <div class="content-primary">
729 <ul data-role="listview">
730 <li><a href="#normalstyle">Normal</a></li>
731 <li><a href="#expendedstyle">Expended</a></li>
733 </div><!--/content-primary -->
737 <div data-role="page" id="normalstyle" data-add-back-btn="true">
738 <div data-role="header" data-position="fixed">
741 <div data-role="content">
742 <div class="content-primary">
743 <ul data-role="listview">
744 <li><a href="#normal1btn">Title 1 button</a></li>
745 <li><a href="#normal2btn">Title 2 button</a></li>
746 <li><a href="#normal3btn">Title 3 button</a></li>
748 </div><!--/content-primary -->
752 <div data-role="page" id="normal1btn">
753 <div data-role="header" data-position="fixed">
757 <div data-role="content">
758 <div class="content-primary">
759 <ul data-role="listview">
760 <li><a href="#normal1btn">Title 1 button</a></li>
761 <li><a href="#normal2btn">Title 2 button</a></li>
762 <li><a href="#normal3btn">Title 3 button</a></li>
764 </div><!--/content-primary -->
768 <div data-role="page" id="normal2btn">
769 <div data-role="header" data-position="fixed">
774 <div data-role="content">
775 <div class="content-primary">
776 <ul data-role="listview">
777 <li><a href="#normal1btn">Title 1 button</a></li>
778 <li><a href="#normal2btn">Title 2 button</a></li>
779 <li><a href="#normal3btn">Title 3 button</a></li>
781 </div><!--/content-primary -->
785 <div data-role="page" id="normal3btn" data-add-back-btn="true">
786 <div data-role="header" data-position="fixed">
792 <div data-role="content">
793 <div class="content-primary">
794 <ul data-role="listview">
795 <li><a href="#normal1btn">Title 1 button</a></li>
796 <li><a href="#normal2btn">Title 2 button</a></li>
797 <li><a href="#normal3btn">Title 3 button</a></li>
799 </div><!--/content-primary -->
803 <div data-role="page" id="expendedstyle" data-add-back-btn="true">
804 <div data-role="header" data-position="fixed">
805 <h1>Title Extend</h1>
807 <div data-role="content">
808 <div class="content-primary">
809 <ul data-role="listview">
810 <li><a href="#expendedstyle2btn">2 Button</a></li>
811 <li><a href="#expendedstyle3btn">3 Button</a></li>
812 <li><a href="#expendedstyle4btn">4 Button</a></li>
813 <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
815 </div><!--/content-primary -->
819 <div data-role="page" id="expendedstyle2btn">
820 <div data-role="header" data-position="fixed">
822 <h1>Title Extend 2 Button </h1>
824 <div data-role="fieldcontain">
825 <fieldset data-role="controlgroup" data-type="horizontal">
826 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
827 <label for="segment1">All</label>
828 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
829 <label for="segment2">Call</label>
833 <div data-role="content">
834 <div class="content-primary">
835 <ul data-role="listview">
836 <li><a href="#expendedstyle2btn">2 Button</a></li>
837 <li><a href="#expendedstyle3btn">3 Button</a></li>
839 </div><!--/content-primary -->
843 <div data-role="page" id="expendedstyle3btn">
844 <div data-role="header" data-position="fixed">
846 <h1>Title Extend 3 Button </h1>
848 <div data-role="fieldcontain">
849 <fieldset data-role="controlgroup" data-type="horizontal">
850 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
851 <label for="segment71">All</label>
852 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
853 <label for="segment72">Call</label>
854 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
855 <label for="segment73">Message</label>
859 <div data-role="content">
860 <div class="content-primary">
861 <ul data-role="listview">
862 <li><a href="#expendedstyle2btn">2 Button</a></li>
863 <li><a href="#expendedstyle3btn">3 Button</a></li>
865 </div><!--/content-primary -->
869 <div data-role="page" id="expendedstyle4btn">
870 <div data-role="header" data-position="fixed">
871 <h1>Title Extend 4 Button </h1>
872 <div data-role="fieldcontain">
873 <fieldset data-role="controlgroup" data-type="horizontal">
874 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
875 <label for="segment71">All</label>
876 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
877 <label for="segment72">Call</label>
878 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
879 <label for="segment73">Message</label>
880 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
881 <label for="segment74">Contact</label>
885 <div data-role="content">
886 <div class="content-primary">
887 <ul data-role="listview">
888 <li><a href="#expendedstyle2btn">2 Button</a></li>
889 <li><a href="#expendedstyle3btn">3 Button</a></li>
891 </div><!--/content-primary -->
895 <div data-role="page" id="footerExtendedStyle">
896 <div data-role="header" data-position="fixed">
897 <h1>Footer extended style</h1>
899 <div data-role="content">
902 <div data-role="footer" data-position="fixed">
903 <div data-role="fieldcontain">
904 <fieldset data-role="controlgroup" data-type="horizontal">
905 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
906 <label for="segment1">All</label>
907 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
908 <label for="segment2">Call</label>
909 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
910 <label for="segment3">Contact</label>
911 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
912 <label for="segment4">Index</label>