4 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
5 <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
6 <script src="configure.js"></script>
7 <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
8 <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
9 data-framework-theme="tizen-white"
10 data-framework-viewport-scale=false>
12 <script src="main.js"></script>
13 <link rel="stylesheet" href="custom.css" />
15 <title>Tizen UI</title>
17 <!-- for compatibility test -->
18 <meta name="apple-mobile-web-app-capable" content="yes" />
19 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
20 <link rel="apple-touch-icon" href="icon-tizen.png" />
21 <link rel="stylesheet" href="./widgets/grid/css/namecard.css" />
25 <div data-role="page">
26 <div data-role="header" data-position="fixed">
29 <div data-role="content">
30 <p id="current_date"></p>
31 <p id="html_font_size"></p>
32 <fieldset data-role="controlgroup" id="input-select-theme">
33 <legend>Select theme</legend>
34 <input type="radio" name="select-theme" id="select-theme-tizen-black" value="tizen-black"/>
35 <label for="select-theme-tizen-black">tizen-black</label>
36 <input type="radio" name="select-theme" id="select-theme-tizen-white" value="tizen-white" checked="true" />
37 <label for="select-theme-tizen-white">tizen-white</label>
40 $( document ).one( "pagecreate", function ( ) {
41 $("#input-select-theme").find("input[name='select-theme']").bind( "change",
42 function ( ev, data ) {
44 theme = "tizen-white";
47 console.log( "Request theme change: " + theme );
48 $.tizen.loadTheme( theme );
54 <ul data-role="listview" data-icon="1line-textonly">
55 <li data-role="list-divider">Controls</li>
56 <li><a href="widgets/button/button.html">Button</a></li>
57 <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
58 <li><a href="widgets/switch/switch.html">Switch</a></li>
59 <li><a href="widgets/radio/radio.html">Radio</a></li>
60 <li><a href="widgets/colorpicker.html">Color picker</a></li>
61 <li><a href="widgets/datefield.html">Time picker</a></li>
62 <li><a href="widgets/progressbar.html">Progressbar</a></li>
63 <li><a href="widgets/entry.html">Entry</a></li>
64 <li><a href="widgets/searchbar.html">Searchbar</a></li>
65 <li><a href="#slider-demo">Slider</a></li>
66 <li><a href="widgets/day-selector.html" >Day Selector</a></li>
67 <li><a href="#NavigationbarMain">Navigation Bar</a></li>
68 <li><a href="widgets/imageslider.html">ImageSlider</a></li>
69 <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
70 <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
71 <li><a href="widgets/handler.html">Handler</a></li>
72 <li><a href="widgets/scroll_jump.html">Scroll Jump</a></li>
73 <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
74 <li data-role="list-divider">ControlBar</li>
75 <li><a href="#controlbar-demo">ControlBar</a></li>
77 <li data-role="list-divider">List</li>
78 <li><a href="widgets/list/list.html">List</a></li>
79 <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
80 <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
82 <li data-role="list-divider">Navigation Bar</li>
83 <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
84 <li><a href="#option-header-demo">Optional Header</a></li>
86 <li data-role="list-divider">Popup</li>
87 <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
88 <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
90 <li data-role="list-divider">Notification (ticker)</li>
91 <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
92 <li><a href="widgets/small-popup.html">Small Popup</a></li>
94 <li data-role="list-divider">No Contents</li>
95 <li><a href="#no-contents-0">No Contents - Text</a></li>
96 <li><a href="#no-contents-1">No Contents - Picture</a></li>
97 <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
98 <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
100 <li data-role="list-divider">Grid view</li>
101 <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
102 <li><a href="widgets/grid/virtualgrid-rotation.html">Virtual Grid - Rotation</a></li>
103 <li><a href="widgets/grid/virtualgrid-list.html">Virtual Grid - List</a></li>
104 <li><a href="widgets/grid/virtualgrid-x.html">Virtual Grid - X</a></li>
105 <li><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li>
106 <li data-role="list-divider">Multimedia view</li>
107 <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
108 <li data-role="list-divider">PageLayout</li>
109 <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
110 <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
112 <li data-role="list-divider">Programming Tips</li>
113 <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
114 <li><a href="tips/custom-globalize-culture/custom-globalize-culture.html">Using custom Globalize culture files</a></li>
115 <li><a href="tips/two-line-text/two-line-text.html">2 line text</a></li>
116 <li><a href="tips/list-sample/list-sample.html">Example for using listview</a></li>
117 <li><a href="tips/list-sample/expandable.html">Example for using expandable list</a></li>
118 <li><a href="tips/page-transition/transition.html">Page transitions</a></li>
126 <div data-role="page" id="notImplemented">
127 <div data-role="header" data-position="fixed">
128 <h1>Not Implemented</h1>
130 <div data-role="content">
131 <p> Not Implemented </p>
135 <div data-role="page" id="slider-demo" data-add-back-btn="true">
136 <div data-role="header" data-position="fixed">
139 <div data-role="content">
140 <ul data-role="listview">
141 <li data-role="list-divider">Normal Slider</li>
142 <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" /></li>
143 <li data-role="list-divider">Popup Slider</li>
144 <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
145 <li data-role="list-divider">Icon Slider</li>
146 <li><input id="mySlider3" name="mySlider3" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
147 <li><input id="mySlider4" name="mySlider4" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
148 <li data-role="list-divider">Text Slider</li>
149 <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li>
150 <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li>
152 </div><!-- /content -->
153 </div> <!-- /page -->
155 <div data-role="page" id="option-header-demo" data-add-back-btn="true">
156 <div data-role="header" data-position="fixed">
157 <h1>Optional Header</h1>
159 <div data-role="content">
160 <ul data-role="listview" data-icon="1line-textonly">
161 <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
162 <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
163 <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
168 <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
169 <div data-role="header" data-position="fixed">
171 <h1>Option header</h1>
172 <a id="123">TestBtn</a>
173 <a id="opt_text" data-icon="optiontray"></a>
174 <a id="1234">TestBtn</a>
176 <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
177 <div class="ui-grid-a ">
178 <div class="ui-block-a"><a data-role="button">Save</a></div>
179 <div class="ui-block-b"><a data-role="button">Next</a></div>
183 <div data-role="content">
184 <p>Some content would be here</p>
188 <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
189 <div data-role="header" data-position="fixed">
190 <h1>Option header - 3 buttons</h1>
191 <div id="myoptionheader2" data-role="optionheader">
192 <div class="ui-grid-b ">
193 <div class="ui-block-a"><a data-role="button">Previous</a></div>
194 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
195 <div class="ui-block-c"><a data-role="button">Save</a></div>
199 <div data-role="content">
200 <p>Some content would be here</p>
204 <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
205 <div data-role="header" data-position="fixed">
206 <h1>Option header - 4 buttons</h1>
207 <div id="myoptionheader3" data-role="optionheader">
208 <div class="ui-grid-c ">
209 <div class="ui-block-a"><a data-role="button">Previous</a></div>
210 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
211 <div class="ui-block-c"><a data-role="button">Save</a></div>
212 <div class="ui-block-d"><a data-role="button">Next</a></div>
216 <div data-role="content">
217 <p>Some content would be here</p>
221 <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
222 <div data-role="header" data-position="fixed">
225 <div data-role="content">
226 <div class="content-primary">
227 <ul data-role="listview">
228 <li><a href="#Tabbar_Main">Tabbar Style</a></li>
229 <li><a href="#Toolbar">Toolbar Style</a></li>
231 </div><!--/content-primary -->
235 <!-- ControlBar Tabbar Style -->
236 <div data-role="page" id="Tabbar_Main">
237 <div data-role="header" data-position="fixed">
240 <div data-role="content">
241 <div class="content-primary">
242 <ul data-role="listview">
243 <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
244 <li><a href="#Tabbar2Items">2 Items Style</a></li>
245 <li><a href="#Tabbar3Items">3 Items Style</a></li>
246 <li><a href="#Tabbar4Items">4 Items Style</a></li>
247 <li><a href="#Tabbar5Items">5 Items Style</a></li>
248 <li><a href="#TabbarText">Only Text Style</a></li>
249 <li><a href="#TabbarIcon">Only Icon Style</a></li>
251 </div><!--/content-primary -->
253 <div data-role="footer"data-position ="fixed">
254 <div data-role="controlbar" data-style="tabbar" >
256 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
257 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
258 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
259 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
260 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
265 <div data-role="page" id="TabbarInHeader">
266 <div data-role="header" data-position="fixed">
267 <div data-role="controlbar" data-style="tabbar" >
269 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
270 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
271 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
272 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
273 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
275 </div><!-- /navbar -->
277 <div data-role="content">
278 <div class="content-primary">
279 <ul data-role="listview">
280 <li><a href="#">Test</a></li>
282 </div><!--/content-primary -->
284 <div data-role="footer"data-position ="fixed">
287 <div data-role="page" id="Tabbar2Items">
288 <div data-role="header" data-position="fixed">
291 <div data-role="content">
292 <div class="content-primary">
293 <ul data-role="listview">
294 <li><a href="#">2 Items Style List</a></li>
296 </div><!--/content-primary -->
298 <div data-role="footer"data-position ="fixed">
299 <div data-role="controlbar" data-style="tabbar" >
301 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
302 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
304 </div><!-- /controlbar -->
308 <div data-role="page" id="Tabbar3Items">
309 <div data-role="header" data-position="fixed">
312 <div data-role="content">
313 <div class="content-primary">
314 <ul data-role="listview">
315 <li><a href="#">3 Items Style List</a></li>
317 </div><!--/content-primary -->
319 <div data-role="footer"data-position ="fixed">
320 <div data-role="controlbar" data-style="tabbar" >
322 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
323 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
324 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
326 </div><!-- /controlbar -->
330 <div data-role="page" id="Tabbar4Items">
331 <div data-role="header" data-position="fixed">
334 <div data-role="content">
335 <div class="content-primary">
336 <ul data-role="listview">
337 <li><a href="#">4 Items Style List</a></li>
339 </div><!--/content-primary -->
341 <div data-role="footer"data-position ="fixed">
342 <div data-role="controlbar" data-style="tabbar" >
344 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
345 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
346 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
347 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
349 </div><!-- /controlbar -->
353 <div data-role="page" id="Tabbar5Items">
354 <div data-role="header" data-position="fixed">
357 <div data-role="content">
358 <div class="content-primary">
359 <ul data-role="listview">
360 <li><a href="#">5 Items Style List</a></li>
362 </div><!--/content-primary -->
364 <div data-role="footer"data-position ="fixed">
365 <div data-role="controlbar" data-style="tabbar" >
367 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
368 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
369 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
370 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
371 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
373 </div><!-- /controlbar -->
377 <div data-role="page" id="TabbarText">
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="#">Text 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="#" class="ui-btn-active">Songs</a></li>
392 <li><a href="#">Favorites</a></li>
393 <li><a href="#">Group</a></li>
394 <li><a href="#">Message</a></li>
395 <li><a href="#">Contact</a></li>
397 </div><!-- /controlbar -->
401 <div data-role="page" id="TabbarIcon">
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="#">Icon 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="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
416 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
417 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
418 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
419 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
421 </div><!-- /controlbar -->
425 <!-- Toolbar Style -->
426 <div data-role="page" id="Toolbar">
427 <div data-role="header" data-position="fixed">
430 <div data-role="content">
431 <div class="content-primary">
432 <ul data-role="listview">
433 <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
434 <li><a href="#Toolbar2Items">2 Items Style</a></li>
435 <li><a href="#Toolbar3Items">3 Items Style</a></li>
436 <li><a href="#Toolbar4Items">4 Items Style</a></li>
437 <li><a href="#Toolbar5Items">5 Items Style</a></li>
438 <li><a href="#ToolbarText">Only Text Style</a></li>
439 <li><a href="#ToolbarIcon">Only Icon Style</a></li>
441 </div><!--/content-primary -->
443 <div data-role="footer"data-position ="fixed">
444 <div data-role="controlbar" data-style="toolbar" >
446 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
447 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
448 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
449 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
450 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
452 </div><!-- /controlbar -->
456 <div data-role="page" id="ToolbarInHeader">
457 <div data-role="header" data-position="fixed">
458 <div data-role="controlbar" data-style="toolbar" >
460 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
461 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
462 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
463 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
464 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
466 </div><!-- /controlbar -->
468 <div data-role="content">
469 <div class="content-primary">
470 <ul data-role="listview">
471 <li><a href="#">Test</a></li>
473 </div><!--/content-primary -->
475 <div data-role="footer"data-position ="fixed">
480 <div data-role="page" id="Toolbar2Items">
481 <div data-role="header" data-position="fixed">
484 <div data-role="content">
485 <div class="content-primary">
486 <ul data-role="listview">
487 <li><a href="#">2 Items Style</a></li>
489 </div><!--/content-primary -->
491 <div data-role="footer"data-position ="fixed">
492 <div data-role="controlbar" data-style="toolbar" >
494 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
495 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
497 </div><!-- /controlbar -->
501 <div data-role="page" id="Toolbar3Items">
502 <div data-role="header" data-position="fixed">
505 <div data-role="content">
506 <div class="content-primary">
507 <ul data-role="listview">
508 <li><a href="#">3 Items Style</a></li>
510 </div><!--/content-primary -->
512 <div data-role="footer"data-position ="fixed">
513 <div data-role="controlbar" data-style="toolbar" >
515 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
516 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
517 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
519 </div><!-- /controlbar -->
523 <div data-role="page" id="Toolbar4Items">
524 <div data-role="header" data-position="fixed">
527 <div data-role="content">
528 <div class="content-primary">
529 <ul data-role="listview">
530 <li><a href="#">4 Items Style</a></li>
532 </div><!--/content-primary -->
534 <div data-role="footer"data-position ="fixed">
535 <div data-role="controlbar" data-style="toolbar" >
537 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
538 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
539 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
540 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
542 </div><!-- /controlbar -->
546 <div data-role="page" id="Toolbar5Items">
547 <div data-role="header" data-position="fixed">
550 <div data-role="content">
551 <div class="content-primary">
552 <ul data-role="listview">
553 <li><a href="#">5 Items Style</a></li>
555 </div><!--/content-primary -->
557 <div data-role="footer"data-position ="fixed">
558 <div data-role="controlbar" data-style="toolbar" >
560 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
561 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
562 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
563 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
564 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
566 </div><!-- /controlbar -->
570 <div data-role="page" id="ToolbarText">
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="#">Text 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="#" class="ui-btn-active">Songs</a></li>
585 <li><a href="#">Favorites</a></li>
586 <li><a href="#">Group</a></li>
587 <li><a href="#">Message</a></li>
588 <li><a href="#">Contact</a></li>
590 </div><!-- /controlbar -->
594 <div data-role="page" id="ToolbarIcon">
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="#">Only Icon 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="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
609 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
610 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
611 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
612 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
614 </div><!-- /controlbar -->
617 <!-- Toolbar Style -->
621 <div data-role="page" id="Mixed" >
622 <div data-role="header" data-position="fixed">
623 <h1>Mixed Toolbar</h1>
625 <div data-role="content">
626 <p>Not Supported for winset</p>
631 <!-- ControlBar Left Style -->
632 <div data-role="page" id="ControlBarVerticalLeft" >
633 <div data-role="header" data-position="fixed">
634 <h1>Vertical Toolbar</h1>
636 <div data-role="content">
637 <ul data-role="listview" data-icon="1line-textonly">
638 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
639 <li><a href="#notImplemented">Button</a></li>
640 <li><a href="#notImplemented">Check</a></li>
642 <div data-role="controlbar" data-style="left">
644 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
645 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
646 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
647 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
648 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
650 </div><!-- /controlbar -->
653 <!-- ControlBar Left Style -->
655 <!-- ControlBar Right Style -->
656 <div data-role="page" id="ControlBarVerticalRight" >
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>
665 <div data-role="controlbar" data-style="right">
667 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
668 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
669 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
670 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
671 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
673 </div><!-- /controlbar -->
676 <!-- ControlBar Right Style -->
678 <!-- ControlBar Animation -->
679 <div data-role="page" id="ControlBarAnimation" >
680 <div data-role="header" data-position="fixed">
681 <h1>Vertical Toolbar</h1>
683 <div data-role="content">
685 <div data-role="footer"data-position ="fixed">
686 <div data-role="controlbar" data-style="tabbar">
688 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
689 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
690 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
691 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
692 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
694 </div><!-- /controlbar -->
697 <!-- ControlBar Animation -->
699 <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
700 <div data-role="header" data-position="fixed">
703 <div data-role="content">
704 <div class="content-primary">
705 <ul data-role="listview">
706 <li><a href="#normalstyle">Normal style title</a></li>
707 <li><a href="#extendedstyle">Extended style title</a></li>
709 </div><!--/content-primary -->
713 <div data-role="page" id="normalstyle" data-add-back-btn="true">
714 <div data-role="header" data-position="fixed">
715 <h1>Normal Title</h1>
717 <div data-role="content">
718 <ul data-role="listview">
719 <li><a href="#normal1btn">Title 1 button</a></li>
720 <li><a href="#normal2btn">Title 2 button</a></li>
721 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
722 <li><a href="#normal3btn">Title 3 button</a></li>
723 <li><a href="#iconTitle">Icon + Title</a></li>
724 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
725 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
726 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
727 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
732 <div data-role="page" id="normal1btn">
733 <div data-role="header" data-position="fixed">
734 <h1>Normal Title - 1Btn</h1>
737 <div data-role="content">
738 <ul data-role="listview">
739 <li><a href="#normal1btn">Title 1 button</a></li>
740 <li><a href="#normal2btn">Title 2 button</a></li>
741 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
742 <li><a href="#normal3btn">Title 3 button</a></li>
743 <li><a href="#iconTitle">Icon + Title</a></li>
744 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
745 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
746 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
747 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
752 <div data-role="page" id="normal2btn">
753 <div data-role="header" data-position="fixed">
754 <h1>Normal Title - 2Btn</h1>
758 <div data-role="content">
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="#normal2btnicononly">Title 2 button Icon only</a></li>
763 <li><a href="#normal3btn">Title 3 button</a></li>
764 <li><a href="#iconTitle">Icon + Title</a></li>
765 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
766 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
767 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
768 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
773 <div data-role="page" id="normal2btnicononly">
774 <div data-role="header" data-position="fixed">
775 <h1>Normal Title+2Buttons Icon only</h1>
776 <a data-icon="plus"></a>
777 <a data-icon="minus"></a>
779 <div data-role="content">
780 <ul data-role="listview">
781 <li><a href="#normal1btn">Title 1 button</a></li>
782 <li><a href="#normal2btn">Title 2 button</a></li>
783 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
784 <li><a href="#normal3btn">Title 3 button</a></li>
785 <li><a href="#iconTitle">Icon + Title</a></li>
786 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
787 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
788 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
789 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
795 <div data-role="page" id="normal3btn" data-add-back-btn="true">
796 <div data-role="header" data-position="fixed">
797 <h1>Normal Title - 3Btn</h1>
802 <div data-role="content">
803 <ul data-role="listview">
804 <li><a href="#normal1btn">Title 1 button</a></li>
805 <li><a href="#normal2btn">Title 2 button</a></li>
806 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
807 <li><a href="#normal3btn">Title 3 button</a></li>
808 <li><a href="#iconTitle">Icon + Title</a></li>
809 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
810 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
811 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
812 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
817 <div data-role="page" id="iconTitle">
818 <div data-role="header" data-position="fixed">
819 <img src="icon-tizen.png"/>
823 <div data-role="content">
824 <ul data-role="listview">
825 <li><a href="#normal1btn">Title 1 button</a></li>
826 <li><a href="#normal2btn">Title 2 button</a></li>
827 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
828 <li><a href="#normal3btn">Title 3 button</a></li>
829 <li><a href="#iconTitle">Icon + Title</a></li>
830 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
831 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
832 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
833 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
838 <div data-role="page" id="customTitle1">
839 <div data-role="header" data-position="fixed">
840 <h1>Title with Left button</h1>
841 <a class="ui-btn-left">Left1</a>
842 <a class="ui-btn-left">Left2</a>
843 <a class="ui-btn-left">Left3</a>
845 <div data-role="content">
846 <ul data-role="listview">
847 <li><a href="#normal1btn">Title 1 button</a></li>
848 <li><a href="#normal2btn">Title 2 button</a></li>
849 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
850 <li><a href="#normal3btn">Title 3 button</a></li>
851 <li><a href="#iconTitle">Icon + Title</a></li>
852 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
853 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
854 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
855 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
860 <div data-role="page" id="customTitle2">
861 <div data-role="header" data-position="fixed">
862 <h1>Title with Right button</h1>
863 <a class="ui-btn-right">Right1</a>
864 <a class="ui-btn-right">Right2</a>
865 <a class="ui-btn-right">Right3</a>
867 <div data-role="content">
868 <ul data-role="listview">
869 <li><a href="#normal1btn">Title 1 button</a></li>
870 <li><a href="#normal2btn">Title 2 button</a></li>
871 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
872 <li><a href="#normal3btn">Title 3 button</a></li>
873 <li><a href="#iconTitle">Icon + Title</a></li>
874 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
875 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
876 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
877 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
882 <div data-role="page" id="customTitle3">
883 <div data-role="header" data-position="fixed">
884 <a class="ui-btn-left">Left</a>
885 <h1>Title with Left/Right button</h1>
886 <a class="ui-btn-right">Right1</a>
887 <a class="ui-btn-right">Right2</a>
889 <div data-role="content">
890 <ul data-role="listview">
891 <li><a href="#normal1btn">Title 1 button</a></li>
892 <li><a href="#normal2btn">Title 2 button</a></li>
893 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
894 <li><a href="#normal3btn">Title 3 button</a></li>
895 <li><a href="#iconTitle">Icon + Title</a></li>
896 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
897 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
898 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
899 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
908 <div data-role="page" id="extendedstyle" data-add-back-btn="true">
909 <div data-role="header" data-position="fixed">
910 <h1>Extended Title</h1>
912 <div data-role="content">
913 <div class="content-primary">
914 <ul data-role="listview">
915 <li><a href="#extendedstyle2btn">2 Button</a></li>
916 <li><a href="#extendedstyle3btn">3 Button</a></li>
917 <li><a href="#extendedstyle4btn">4 Button</a></li>
918 <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
920 </div><!--/content-primary -->
924 <div data-role="page" id="extendedstyle2btn">
925 <div data-role="header" data-position="fixed">
926 <h1>Extended Title 2 Button </h1>
927 <div data-role="fieldcontain">
928 <fieldset data-role="controlgroup" data-type="horizontal">
929 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
930 <label for="segment1">All</label>
931 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
932 <label for="segment2">Call</label>
936 <div data-role="content">
937 <div class="content-primary">
938 <ul data-role="listview">
939 <li><a href="#extendedstyle2btn">2 Button</a></li>
940 <li><a href="#extendedstyle3btn">3 Button</a></li>
942 </div><!--/content-primary -->
946 <div data-role="page" id="extendedstyle3btn">
947 <div data-role="header" data-position="fixed">
948 <h1>Extended Title 3 Button </h1>
949 <div data-role="fieldcontain">
950 <fieldset data-role="controlgroup" data-type="horizontal">
951 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
952 <label for="segment71">All</label>
953 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
954 <label for="segment72">Call</label>
955 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
956 <label for="segment73">Message</label>
960 <div data-role="content">
961 <div class="content-primary">
962 <ul data-role="listview">
963 <li><a href="#extendedstyle2btn">2 Button</a></li>
964 <li><a href="#extendedstyle3btn">3 Button</a></li>
966 </div><!--/content-primary -->
970 <div data-role="page" id="extendedstyle4btn">
971 <div data-role="header" data-position="fixed">
972 <h1>Extended Title 4 Button </h1>
973 <div data-role="fieldcontain">
974 <fieldset data-role="controlgroup" data-type="horizontal">
975 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
976 <label for="segment71">All</label>
977 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
978 <label for="segment72">Call</label>
979 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
980 <label for="segment73">Message</label>
981 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
982 <label for="segment74">Contact</label>
986 <div data-role="content">
987 <div class="content-primary">
988 <ul data-role="listview">
989 <li><a href="#extendedstyle2btn">2 Button</a></li>
990 <li><a href="#extendedstyle3btn">3 Button</a></li>
992 </div><!--/content-primary -->
996 <div data-role="page" id="footerExtendedStyle">
997 <div data-role="header" data-position="fixed">
998 <h1>Extended Footer style</h1>
1000 <div data-role="content">
1003 <div data-role="footer" data-position="fixed">
1004 <div data-role="fieldcontain">
1005 <fieldset data-role="controlgroup" data-type="horizontal">
1006 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
1007 <label for="segment1">All</label>
1008 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
1009 <label for="segment2">Call</label>
1010 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
1011 <label for="segment3">Contact</label>
1018 <div data-role="page" id="multibuttonentry">
1019 <div data-role="header" data-position="fixed">
1020 <h1>Multi-button Entry</h1>
1022 <div data-role="content">
1023 <div data-role="multibuttonentry" data-list-id="#addressbook"></div>
1025 <ul data-role="listview">
1026 <li><a id='MBTaddItemTest'>Append Item</a></li>
1027 <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
1028 <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
1029 <li><a id='MBTgetInputTextTest'>Get input text</a></li>
1030 <li><a id='MBTselectItemTest'>Select 1</a></li>
1031 <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
1032 <li><a id='MBTlengthTest'>Length</a></li>
1033 <li><a id='MBTfocusOutTest'>Grouping On</a></li>
1034 <li><a id='MBTfocusInTest'>Grouping Off</a></li>
1035 <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
1039 <div data-role="page" id="addressbook" data-footer-Exist="false" >
1040 <div data-role="header" data-position="fixed">
1041 <h1>Address Book</h1>
1042 <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
1044 <div data-role="content" id="contentList">
1045 <ul data-role="listview">
1046 <li data-role="list-divider">A</li>
1047 <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
1048 <li><a href="#multibuttonentry">Alex Wickerham</a></li>
1049 <li><a href="#multibuttonentry">Avery Johnson</a></li>
1050 <li data-role="list-divider">B</li>
1051 <li><a href="#multibuttonentry">Bob Cabot</a></li>
1052 <li data-role="list-divider">C</li>
1053 <li><a href="#multibuttonentry">Caleb Booth</a></li>
1054 <li><a href="#multibuttonentry">Christopher Adams</a></li>
1055 <li><a href="#multibuttonentry">Culver James</a></li>
1056 <li data-role="list-divider">D</li>
1057 <li><a href="#multibuttonentry">David Walsh</a></li>
1058 <li><a href="#multibuttonentry">Drake Alfred</a></li>
1059 <li data-role="list-divider">E</li>
1060 <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
1061 <li><a href="#multibuttonentry">Emery Parker</a></li>
1062 <li><a href="#multibuttonentry">Enid Voldon</a></li>
1063 <li data-role="list-divider">F</li>
1064 <li><a href="#multibuttonentry">Francis Wall</a></li>
1065 <li data-role="list-divider">G</li>
1066 <li><a href="#multibuttonentry">Graham Smith</a></li>
1067 <li><a href="#multibuttonentry">Greta Peete</a></li>
1068 <li data-role="list-divider">H</li>
1069 <li><a href="#multibuttonentry">Harvey Walls</a></li>
1070 <li data-role="list-divider">M</li>
1071 <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
1072 <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
1073 <li data-role="list-divider">N</li>
1074 <li><a href="#multibuttonentry">Nathan Williams</a></li>
1075 <li data-role="list-divider">P</li>
1076 <li><a href="#multibuttonentry">Paul Baker</a></li>
1077 <li><a href="#multibuttonentry">Pete Mason</a></li>
1078 <li data-role="list-divider">R</li>
1079 <li><a href="#multibuttonentry">Rod Tarker</a></li>
1080 <li data-role="list-divider">S</li>
1081 <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
1083 </div> <!--/content -->
1084 </div> <!--/page -->
1087 <div data-role="page" id="no-contents-0" data-add-back-btn="true">
1088 <div data-role="header" data-position="fixed">
1089 <h1>No Contents</h1>
1091 <div data-role="content">
1092 <div data-role="nocontents" id="nocontents0" data-type="text">
1096 </div> <!-- /content -->
1097 </div> <!-- /page -->
1099 <div data-role="page" id="no-contents-1" data-add-back-btn="true">
1100 <div data-role="header" data-position="fixed">
1101 <h1>No Contents</h1>
1103 <div data-role="content">
1104 <div data-role="nocontents" id="nocontents1" data-type="picture">
1108 </div> <!-- /content -->
1109 </div> <!-- /page -->
1111 <div data-role="page" id="no-contents-2" data-add-back-btn="true">
1112 <div data-role="header" data-position="fixed">
1113 <h1>No Contents</h1>
1115 <div data-role="content">
1116 <div data-role="nocontents" id="nocontents2" data-type="multimedia">
1117 <p>Multimedia Type</p>
1120 </div> <!-- /content -->
1121 </div> <!-- /page -->
1123 <div data-role="page" id="no-contents-3" data-add-back-btn="true">
1124 <div data-role="header" data-position="fixed">
1125 <h1>No Contents</h1>
1127 <div data-role="content">
1128 <div data-role="nocontents" id="nocontents3">
1131 </div> <!-- /content -->
1132 </div> <!-- /page -->
1135 <script src="widgets/checkbox/checkbox.js"></script>
1136 <script src="widgets/switch/switch.js"></script>
1137 <script src="widgets/radio/radio.js"></script>
1138 <script src="widgets/progressbar.js"></script>
1139 <script src="widgets/ctxpopup.js"></script>
1140 <script src="widgets/popupwindow/popupwindow.js"></script>
1141 <script src="tips/generate-elements-dynamically.js"></script>
1142 <script src="tips/two-line-text/two-line-text.js"></script>
1143 <script src="tips/list-sample/list-sample.js"></script>
1144 <script src="tips/list-sample/expandable.js"></script>
1145 <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
1146 <script src="widgets/multibuttonentry-demo.js"></script>
1147 <script src="widgets/pagelayout/barcontrol.js"></script>
1148 <script src="widgets/pagelayout/backbutton-control.js"></script>
1149 <!-- test file for content div control, not completed yet -->
1150 <script src="widgets/pagelayout/ctrl-test.js"></script>