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="#multibuttonentry">Multi-Button Entry</a></li>
73 <li data-role="list-divider">ControlBar</li>
74 <li><a href="#controlbar-demo">ControlBar</a></li>
76 <li data-role="list-divider">List</li>
77 <li><a href="widgets/list/list.html">List</a></li>
78 <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
79 <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
81 <li data-role="list-divider">Navigation Bar</li>
82 <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
83 <li><a href="#option-header-demo">Optional Header</a></li>
85 <li data-role="list-divider">Popup</li>
86 <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
87 <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
89 <li data-role="list-divider">Notification (ticker)</li>
90 <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
91 <li><a href="widgets/small-popup.html">Small Popup</a></li>
93 <li data-role="list-divider">No Contents</li>
94 <li><a href="#no-contents-0">No Contents - Text</a></li>
95 <li><a href="#no-contents-1">No Contents - Picture</a></li>
96 <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
97 <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
99 <li data-role="list-divider">Grid view</li>
100 <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
101 <li><a href="widgets/grid/virtualgrid-rotation.html">Virtual Grid - Rotation</a></li>
102 <li><a href="widgets/grid/virtualgrid-list.html">Virtual Grid - List</a></li>
103 <li><a href="widgets/grid/virtualgrid-x.html">Virtual Grid - X</a></li>
104 <li><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li>
105 <li data-role="list-divider">Multimedia view</li>
106 <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
107 <li data-role="list-divider">Map view</li>
109 <li data-role="list-divider">PageLayout</li>
110 <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
111 <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
113 <li data-role="list-divider">Programming Tips</li>
114 <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
115 <li><a href="tips/custom-globalize-culture/custom-globalize-culture.html">Using custom Globalize culture files</a></li>
116 <li><a href="tips/two-line-text/two-line-text.html">2 line text</a></li>
117 <li><a href="tips/list-sample/list-sample.html">Example for using listview</a></li>
118 <li><a href="tips/list-sample/expandable.html">Example for using expandable list</a></li>
119 <li><a href="tips/page-transition/transition.html">Page transitions</a></li>
124 <div data-role="page" id="notImplemented">
125 <div data-role="header" data-position="fixed">
126 <h1>Not Implemented</h1>
128 <div data-role="content">
129 <p> Not Implemented </p>
133 <div data-role="page" id="slider-demo" data-add-back-btn="true">
134 <div data-role="header" data-position="fixed">
137 <div data-role="content">
138 <ul data-role="listview">
139 <li data-role="list-divider">Normal Slider</li>
140 <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" /></li>
141 <li data-role="list-divider">Popup Slider</li>
142 <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
143 <li data-role="list-divider">Icon Slider</li>
144 <li><input id="mySlider3" name="mySlider3" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
145 <li><input id="mySlider4" name="mySlider4" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
146 <li data-role="list-divider">Text Slider</li>
147 <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>
148 <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>
150 </div><!-- /content -->
151 </div> <!-- /page -->
153 <div data-role="page" id="option-header-demo" data-add-back-btn="true">
154 <div data-role="header" data-position="fixed">
155 <h1>Optional Header</h1>
157 <div data-role="content">
158 <ul data-role="listview" data-icon="1line-textonly">
159 <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
160 <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
161 <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
162 <li><a href="#optionheader2line4btn">2 line 4 buttons</a></li>
167 <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
168 <div data-role="header" data-position="fixed">
169 <a id="123">TestBtn</a>
170 <h1>Option header - 2 buttons</h1>
171 <a id="opt_text" data-icon="optiontray"></a>
172 <a id="1234">TestBtn</a>
174 <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
175 <div class="ui-grid-a ">
176 <div class="ui-block-a"><a data-role="button">Save</a></div>
177 <div class="ui-block-b"><a data-role="button">Next</a></div>
181 <div data-role="content">
182 <p>Some content would be here</p>
186 <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
187 <div data-role="header" data-position="fixed">
188 <h1>Option header - 3 buttons</h1>
189 <div id="myoptionheader2" data-role="optionheader">
190 <div class="ui-grid-b ">
191 <div class="ui-block-a"><a data-role="button">Previous</a></div>
192 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
193 <div class="ui-block-c"><a data-role="button">Save</a></div>
197 <div data-role="content">
198 <p>Some content would be here</p>
202 <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
203 <div data-role="header" data-position="fixed">
204 <h1>Option header - 4 buttons</h1>
205 <div id="myoptionheader3" data-role="optionheader">
206 <div class="ui-grid-c ">
207 <div class="ui-block-a"><a data-role="button">Previous</a></div>
208 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
209 <div class="ui-block-c"><a data-role="button">Save</a></div>
210 <div class="ui-block-d"><a data-role="button">Next</a></div>
214 <div data-role="content">
215 <p>Some content would be here</p>
219 <div data-role="page" id="optionheader2line4btn" data-add-back-btn="true">
220 <div data-role="header" data-position="fixed">
221 <h1>Option header - 4 buttons</h1>
222 <div id="myoptionheader" data-role="optionheader">
223 <div class="ui-grid-c ">
224 <div class="ui-block-a"><a data-role="button">Previous</a></div>
225 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
226 <div class="ui-block-c"><a data-role="button">Save</a></div>
227 <div class="ui-block-d"><a data-role="button">Next</a></div>
228 <div class="ui-block-a"><a data-role="button">Left</a></div>
229 <div class="ui-block-b"><a data-role="button">1st Middle</a></div>
230 <div class="ui-block-c"><a data-role="button">2nd Middle</a></div>
231 <div class="ui-block-d"><a data-role="button">Right</a></div>
235 <div data-role="content">
236 <p>Some content would be here</p>
240 <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
241 <div data-role="header" data-position="fixed">
244 <div data-role="content">
245 <div class="content-primary">
246 <ul data-role="listview">
247 <li><a href="#Tabbar_Main">Tabbar Style</a></li>
248 <li><a href="#Toolbar">Toolbar Style</a></li>
250 </div><!--/content-primary -->
254 <!-- ControlBar Tabbar Style -->
255 <div data-role="page" id="Tabbar_Main">
256 <div data-role="header" data-position="fixed">
259 <div data-role="content">
260 <div class="content-primary">
261 <ul data-role="listview">
262 <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
263 <li><a href="#Tabbar2Items">2 Items Style</a></li>
264 <li><a href="#Tabbar3Items">3 Items Style</a></li>
265 <li><a href="#Tabbar4Items">4 Items Style</a></li>
266 <li><a href="#Tabbar5Items">5 Items Style</a></li>
267 <li><a href="#TabbarText">Only Text Style</a></li>
268 <li><a href="#TabbarIcon">Only Icon Style</a></li>
270 </div><!--/content-primary -->
272 <div data-role="footer"data-position ="fixed">
273 <div data-role="controlbar" data-style="tabbar" >
275 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
276 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
277 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
278 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
279 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
284 <div data-role="page" id="TabbarInHeader">
285 <div data-role="header" data-position="fixed">
286 <div data-role="controlbar" data-style="tabbar" >
288 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
289 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
290 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
291 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
292 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
294 </div><!-- /navbar -->
296 <div data-role="content">
297 <div class="content-primary">
298 <ul data-role="listview">
299 <li><a href="#">Test</a></li>
301 </div><!--/content-primary -->
303 <div data-role="footer"data-position ="fixed">
306 <div data-role="page" id="Tabbar2Items">
307 <div data-role="header" data-position="fixed">
310 <div data-role="content">
311 <div class="content-primary">
312 <ul data-role="listview">
313 <li><a href="#">2 Items Style List</a></li>
315 </div><!--/content-primary -->
317 <div data-role="footer"data-position ="fixed">
318 <div data-role="controlbar" data-style="tabbar" >
320 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
321 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
323 </div><!-- /controlbar -->
327 <div data-role="page" id="Tabbar3Items">
328 <div data-role="header" data-position="fixed">
331 <div data-role="content">
332 <div class="content-primary">
333 <ul data-role="listview">
334 <li><a href="#">3 Items Style List</a></li>
336 </div><!--/content-primary -->
338 <div data-role="footer"data-position ="fixed">
339 <div data-role="controlbar" data-style="tabbar" >
341 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
342 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
343 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
345 </div><!-- /controlbar -->
349 <div data-role="page" id="Tabbar4Items">
350 <div data-role="header" data-position="fixed">
353 <div data-role="content">
354 <div class="content-primary">
355 <ul data-role="listview">
356 <li><a href="#">4 Items Style List</a></li>
358 </div><!--/content-primary -->
360 <div data-role="footer"data-position ="fixed">
361 <div data-role="controlbar" data-style="tabbar" >
363 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
364 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
365 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
366 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
368 </div><!-- /controlbar -->
372 <div data-role="page" id="Tabbar5Items">
373 <div data-role="header" data-position="fixed">
376 <div data-role="content">
377 <div class="content-primary">
378 <ul data-role="listview">
379 <li><a href="#">5 Items Style List</a></li>
381 </div><!--/content-primary -->
383 <div data-role="footer"data-position ="fixed">
384 <div data-role="controlbar" data-style="tabbar" >
386 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
387 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
388 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
389 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
390 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
392 </div><!-- /controlbar -->
396 <div data-role="page" id="TabbarText">
397 <div data-role="header" data-position="fixed">
400 <div data-role="content">
401 <div class="content-primary">
402 <ul data-role="listview">
403 <li><a href="#">Text Style List</a></li>
405 </div><!--/content-primary -->
407 <div data-role="footer"data-position ="fixed">
408 <div data-role="controlbar" data-style="tabbar" >
410 <li><a href="#" class="ui-btn-active">Songs</a></li>
411 <li><a href="#">Favorites</a></li>
412 <li><a href="#">Group</a></li>
413 <li><a href="#">Message</a></li>
414 <li><a href="#">Contact</a></li>
416 </div><!-- /controlbar -->
420 <div data-role="page" id="TabbarIcon">
421 <div data-role="header" data-position="fixed">
424 <div data-role="content">
425 <div class="content-primary">
426 <ul data-role="listview">
427 <li><a href="#">Icon Style List</a></li>
429 </div><!--/content-primary -->
431 <div data-role="footer"data-position ="fixed">
432 <div data-role="controlbar" data-style="tabbar" >
434 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
435 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
436 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
437 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
438 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
440 </div><!-- /controlbar -->
444 <!-- Toolbar Style -->
445 <div data-role="page" id="Toolbar">
446 <div data-role="header" data-position="fixed">
449 <div data-role="content">
450 <div class="content-primary">
451 <ul data-role="listview">
452 <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
453 <li><a href="#Toolbar2Items">2 Items Style</a></li>
454 <li><a href="#Toolbar3Items">3 Items Style</a></li>
455 <li><a href="#Toolbar4Items">4 Items Style</a></li>
456 <li><a href="#Toolbar5Items">5 Items Style</a></li>
457 <li><a href="#ToolbarText">Only Text Style</a></li>
458 <li><a href="#ToolbarIcon">Only Icon Style</a></li>
460 </div><!--/content-primary -->
462 <div data-role="footer"data-position ="fixed">
463 <div data-role="controlbar" data-style="toolbar" >
465 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
466 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
467 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
468 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
469 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
471 </div><!-- /controlbar -->
475 <div data-role="page" id="ToolbarInHeader">
476 <div data-role="header" data-position="fixed">
477 <div data-role="controlbar" data-style="toolbar" >
479 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
480 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
481 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
482 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
483 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
485 </div><!-- /controlbar -->
487 <div data-role="content">
488 <div class="content-primary">
489 <ul data-role="listview">
490 <li><a href="#">Test</a></li>
492 </div><!--/content-primary -->
494 <div data-role="footer"data-position ="fixed">
499 <div data-role="page" id="Toolbar2Items">
500 <div data-role="header" data-position="fixed">
503 <div data-role="content">
504 <div class="content-primary">
505 <ul data-role="listview">
506 <li><a href="#">2 Items Style</a></li>
508 </div><!--/content-primary -->
510 <div data-role="footer"data-position ="fixed">
511 <div data-role="controlbar" data-style="toolbar" >
513 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
514 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
516 </div><!-- /controlbar -->
520 <div data-role="page" id="Toolbar3Items">
521 <div data-role="header" data-position="fixed">
524 <div data-role="content">
525 <div class="content-primary">
526 <ul data-role="listview">
527 <li><a href="#">3 Items Style</a></li>
529 </div><!--/content-primary -->
531 <div data-role="footer"data-position ="fixed">
532 <div data-role="controlbar" data-style="toolbar" >
534 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
535 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
536 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
538 </div><!-- /controlbar -->
542 <div data-role="page" id="Toolbar4Items">
543 <div data-role="header" data-position="fixed">
546 <div data-role="content">
547 <div class="content-primary">
548 <ul data-role="listview">
549 <li><a href="#">4 Items Style</a></li>
551 </div><!--/content-primary -->
553 <div data-role="footer"data-position ="fixed">
554 <div data-role="controlbar" data-style="toolbar" >
556 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
557 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
558 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
559 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
561 </div><!-- /controlbar -->
565 <div data-role="page" id="Toolbar5Items">
566 <div data-role="header" data-position="fixed">
569 <div data-role="content">
570 <div class="content-primary">
571 <ul data-role="listview">
572 <li><a href="#">5 Items Style</a></li>
574 </div><!--/content-primary -->
576 <div data-role="footer"data-position ="fixed">
577 <div data-role="controlbar" data-style="toolbar" >
579 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
580 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
581 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
582 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
583 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
585 </div><!-- /controlbar -->
589 <div data-role="page" id="ToolbarText">
590 <div data-role="header" data-position="fixed">
593 <div data-role="content">
594 <div class="content-primary">
595 <ul data-role="listview">
596 <li><a href="#">Text Style</a></li>
598 </div><!--/content-primary -->
600 <div data-role="footer"data-position ="fixed">
601 <div data-role="controlbar" data-style="toolbar" >
603 <li><a href="#" class="ui-btn-active">Songs</a></li>
604 <li><a href="#">Favorites</a></li>
605 <li><a href="#">Group</a></li>
606 <li><a href="#">Message</a></li>
607 <li><a href="#">Contact</a></li>
609 </div><!-- /controlbar -->
613 <div data-role="page" id="ToolbarIcon">
614 <div data-role="header" data-position="fixed">
617 <div data-role="content">
618 <div class="content-primary">
619 <ul data-role="listview">
620 <li><a href="#">Only Icon Style</a></li>
622 </div><!--/content-primary -->
624 <div data-role="footer"data-position ="fixed">
625 <div data-role="controlbar" data-style="toolbar" >
627 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
628 <li><a href="#" data-icon="ctrlbar-save" ></a></li>
629 <li><a href="#" data-icon="ctrlbar-share" ></a></li>
630 <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
631 <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
633 </div><!-- /controlbar -->
636 <!-- Toolbar Style -->
640 <div data-role="page" id="Mixed" >
641 <div data-role="header" data-position="fixed">
642 <h1>Mixed Toolbar</h1>
644 <div data-role="content">
645 <p>Not Supported for winset</p>
650 <!-- ControlBar Left Style -->
651 <div data-role="page" id="ControlBarVerticalLeft" >
652 <div data-role="header" data-position="fixed">
653 <h1>Vertical Toolbar</h1>
655 <div data-role="content">
656 <ul data-role="listview" data-icon="1line-textonly">
657 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
658 <li><a href="#notImplemented">Button</a></li>
659 <li><a href="#notImplemented">Check</a></li>
661 <div data-role="controlbar" data-style="left">
663 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
664 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
665 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
666 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
667 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
669 </div><!-- /controlbar -->
672 <!-- ControlBar Left Style -->
674 <!-- ControlBar Right Style -->
675 <div data-role="page" id="ControlBarVerticalRight" >
676 <div data-role="header" data-position="fixed">
677 <h1>Vertical Toolbar</h1>
679 <div data-role="content">
680 <ul data-role="listview" data-icon="1line-textonly">
681 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
682 <li><a href="#notImplemented">Button</a></li>
684 <div data-role="controlbar" data-style="right">
686 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
687 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
688 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
689 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
690 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
692 </div><!-- /controlbar -->
695 <!-- ControlBar Right Style -->
697 <!-- ControlBar Animation -->
698 <div data-role="page" id="ControlBarAnimation" >
699 <div data-role="header" data-position="fixed">
700 <h1>Vertical Toolbar</h1>
702 <div data-role="content">
704 <div data-role="footer"data-position ="fixed">
705 <div data-role="controlbar" data-style="tabbar">
707 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
708 <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
709 <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
710 <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
711 <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
713 </div><!-- /controlbar -->
716 <!-- ControlBar Animation -->
718 <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
719 <div data-role="header" data-position="fixed">
722 <div data-role="content">
723 <div class="content-primary">
724 <ul data-role="listview">
725 <li><a href="#normalstyle">Normal style title</a></li>
726 <li><a href="#extendedstyle">Extended style title</a></li>
728 </div><!--/content-primary -->
732 <div data-role="page" id="normalstyle" data-add-back-btn="true">
733 <div data-role="header" data-position="fixed">
734 <h1>Normal Title</h1>
736 <div data-role="content">
737 <ul data-role="listview">
738 <li><a href="#normal1btn">Title 1 button</a></li>
739 <li><a href="#normal2btn">Title 2 button</a></li>
740 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
741 <li><a href="#normal3btn">Title 3 button</a></li>
742 <li><a href="#iconTitle">Icon + Title</a></li>
743 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
744 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
745 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
746 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
751 <div data-role="page" id="normal1btn">
752 <div data-role="header" data-position="fixed">
753 <h1>Normal Title - 1Btn</h1>
756 <div data-role="content">
757 <ul data-role="listview">
758 <li><a href="#normal1btn">Title 1 button</a></li>
759 <li><a href="#normal2btn">Title 2 button</a></li>
760 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
761 <li><a href="#normal3btn">Title 3 button</a></li>
762 <li><a href="#iconTitle">Icon + Title</a></li>
763 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
764 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
765 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
766 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
771 <div data-role="page" id="normal2btn">
772 <div data-role="header" data-position="fixed">
773 <h1>Normal Title - 2Btn</h1>
777 <div data-role="content">
778 <ul data-role="listview">
779 <li><a href="#normal1btn">Title 1 button</a></li>
780 <li><a href="#normal2btn">Title 2 button</a></li>
781 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
782 <li><a href="#normal3btn">Title 3 button</a></li>
783 <li><a href="#iconTitle">Icon + Title</a></li>
784 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
785 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
786 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
787 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
792 <div data-role="page" id="normal2btnicononly">
793 <div data-role="header" data-position="fixed">
794 <h1>Normal Title+2Buttons Icon only - Not Implemented Yet</h1>
795 <a data-icon="plus"></a>
796 <a data-icon="minus"></a>
798 <div data-role="content">
799 <ul data-role="listview">
800 <li><a href="#normal1btn">Title 1 button</a></li>
801 <li><a href="#normal2btn">Title 2 button</a></li>
802 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
803 <li><a href="#normal3btn">Title 3 button</a></li>
804 <li><a href="#iconTitle">Icon + Title</a></li>
805 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
806 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
807 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
808 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
814 <div data-role="page" id="normal3btn" data-add-back-btn="true">
815 <div data-role="header" data-position="fixed">
817 <h1>Normal Title - 3Btn</h1>
821 <div data-role="content">
822 <ul data-role="listview">
823 <li><a href="#normal1btn">Title 1 button</a></li>
824 <li><a href="#normal2btn">Title 2 button</a></li>
825 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
826 <li><a href="#normal3btn">Title 3 button</a></li>
827 <li><a href="#iconTitle">Icon + Title</a></li>
828 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
829 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
830 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
831 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
836 <div data-role="page" id="iconTitle">
837 <div data-role="header" data-position="fixed">
838 <img src="icon-tizen.png"/>
842 <div data-role="content">
843 <ul data-role="listview">
844 <li><a href="#normal1btn">Title 1 button</a></li>
845 <li><a href="#normal2btn">Title 2 button</a></li>
846 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
847 <li><a href="#normal3btn">Title 3 button</a></li>
848 <li><a href="#iconTitle">Icon + Title</a></li>
849 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
850 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
851 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
852 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
857 <div data-role="page" id="customTitle1">
858 <div data-role="header" data-position="fixed">
859 <h1>Title with Left button</h1>
860 <a class="ui-btn-left">Left1</a>
861 <a class="ui-btn-left">Left2</a>
862 <a class="ui-btn-left">Left3</a>
864 <div data-role="content">
865 <ul data-role="listview">
866 <li><a href="#normal1btn">Title 1 button</a></li>
867 <li><a href="#normal2btn">Title 2 button</a></li>
868 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
869 <li><a href="#normal3btn">Title 3 button</a></li>
870 <li><a href="#iconTitle">Icon + Title</a></li>
871 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
872 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
873 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
874 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
879 <div data-role="page" id="customTitle2">
880 <div data-role="header" data-position="fixed">
881 <h1>Title with Right button</h1>
882 <a class="ui-btn-right">Right1</a>
883 <a class="ui-btn-right">Right2</a>
884 <a class="ui-btn-right">Right3</a>
886 <div data-role="content">
887 <ul data-role="listview">
888 <li><a href="#normal1btn">Title 1 button</a></li>
889 <li><a href="#normal2btn">Title 2 button</a></li>
890 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
891 <li><a href="#normal3btn">Title 3 button</a></li>
892 <li><a href="#iconTitle">Icon + Title</a></li>
893 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
894 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
895 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
896 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
901 <div data-role="page" id="customTitle3">
902 <div data-role="header" data-position="fixed">
903 <a class="ui-btn-left">Left</a>
904 <h1>Title with Left/Right button</h1>
905 <a class="ui-btn-right">Right1</a>
906 <a class="ui-btn-right">Right2</a>
908 <div data-role="content">
909 <ul data-role="listview">
910 <li><a href="#normal1btn">Title 1 button</a></li>
911 <li><a href="#normal2btn">Title 2 button</a></li>
912 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
913 <li><a href="#normal3btn">Title 3 button</a></li>
914 <li><a href="#iconTitle">Icon + Title</a></li>
915 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
916 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
917 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
918 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
927 <div data-role="page" id="extendedstyle" data-add-back-btn="true">
928 <div data-role="header" data-position="fixed">
929 <h1>Extended Title</h1>
931 <div data-role="content">
932 <div class="content-primary">
933 <ul data-role="listview">
934 <li><a href="#extendedstyle2btn">2 Button</a></li>
935 <li><a href="#extendedstyle3btn">3 Button</a></li>
936 <li><a href="#extendedstyle4btn">4 Button</a></li>
937 <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
939 </div><!--/content-primary -->
943 <div data-role="page" id="extendedstyle2btn">
944 <div data-role="header" data-position="fixed">
945 <h1>Extended Title 2 Button </h1>
946 <div data-role="fieldcontain">
947 <fieldset data-role="controlgroup" data-type="horizontal">
948 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
949 <label for="segment1">All</label>
950 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
951 <label for="segment2">Call</label>
955 <div data-role="content">
956 <div class="content-primary">
957 <ul data-role="listview">
958 <li><a href="#extendedstyle2btn">2 Button</a></li>
959 <li><a href="#extendedstyle3btn">3 Button</a></li>
961 </div><!--/content-primary -->
965 <div data-role="page" id="extendedstyle3btn">
966 <div data-role="header" data-position="fixed">
967 <h1>Extended Title 3 Button </h1>
968 <div data-role="fieldcontain">
969 <fieldset data-role="controlgroup" data-type="horizontal">
970 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
971 <label for="segment71">All</label>
972 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
973 <label for="segment72">Call</label>
974 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
975 <label for="segment73">Message</label>
979 <div data-role="content">
980 <div class="content-primary">
981 <ul data-role="listview">
982 <li><a href="#extendedstyle2btn">2 Button</a></li>
983 <li><a href="#extendedstyle3btn">3 Button</a></li>
985 </div><!--/content-primary -->
989 <div data-role="page" id="extendedstyle4btn">
990 <div data-role="header" data-position="fixed">
991 <h1>Extended Title 4 Button </h1>
992 <div data-role="fieldcontain">
993 <fieldset data-role="controlgroup" data-type="horizontal">
994 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
995 <label for="segment71">All</label>
996 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
997 <label for="segment72">Call</label>
998 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
999 <label for="segment73">Message</label>
1000 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
1001 <label for="segment74">Contact</label>
1005 <div data-role="content">
1006 <div class="content-primary">
1007 <ul data-role="listview">
1008 <li><a href="#extendedstyle2btn">2 Button</a></li>
1009 <li><a href="#extendedstyle3btn">3 Button</a></li>
1011 </div><!--/content-primary -->
1015 <div data-role="page" id="footerExtendedStyle">
1016 <div data-role="header" data-position="fixed">
1017 <h1>Extended Footer style</h1>
1019 <div data-role="content">
1022 <div data-role="footer" data-position="fixed">
1023 <div data-role="fieldcontain">
1024 <fieldset data-role="controlgroup" data-type="horizontal">
1025 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
1026 <label for="segment1">All</label>
1027 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
1028 <label for="segment2">Call</label>
1029 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
1030 <label for="segment3">Contact</label>
1037 <div data-role="page" id="multibuttonentry">
1038 <div data-role="header" data-position="fixed">
1039 <h1>Multi-button Entry</h1>
1041 <div data-role="content">
1042 <div data-role="multibuttonentry" data-listuri="addressbook"></div>
1044 <ul data-role="listview">
1045 <li><a id='MBTaddItemTest'>Append Item</a></li>
1046 <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
1047 <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
1048 <li><a id='MBTgetInputTextTest'>Get input text</a></li>
1049 <li><a id='MBTselectItemTest'>Select 1</a></li>
1050 <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
1051 <li><a id='MBTlengthTest'>Length</a></li>
1052 <li><a id='MBTfocusOutTest'>Grouping On</a></li>
1053 <li><a id='MBTfocusInTest'>Grouping Off</a></li>
1054 <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
1058 <div data-role="page" id="addressbook" data-footer-Exist="false" >
1059 <div data-role="header" data-position="fixed">
1060 <h1>Address Book</h1>
1061 <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
1063 <div data-role="content" id="contentList">
1064 <ul data-role="listview">
1065 <li data-role="list-divider">A</li>
1066 <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
1067 <li><a href="#multibuttonentry">Alex Wickerham</a></li>
1068 <li><a href="#multibuttonentry">Avery Johnson</a></li>
1069 <li data-role="list-divider">B</li>
1070 <li><a href="#multibuttonentry">Bob Cabot</a></li>
1071 <li data-role="list-divider">C</li>
1072 <li><a href="#multibuttonentry">Caleb Booth</a></li>
1073 <li><a href="#multibuttonentry">Christopher Adams</a></li>
1074 <li><a href="#multibuttonentry">Culver James</a></li>
1075 <li data-role="list-divider">D</li>
1076 <li><a href="#multibuttonentry">David Walsh</a></li>
1077 <li><a href="#multibuttonentry">Drake Alfred</a></li>
1078 <li data-role="list-divider">E</li>
1079 <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
1080 <li><a href="#multibuttonentry">Emery Parker</a></li>
1081 <li><a href="#multibuttonentry">Enid Voldon</a></li>
1082 <li data-role="list-divider">F</li>
1083 <li><a href="#multibuttonentry">Francis Wall</a></li>
1084 <li data-role="list-divider">G</li>
1085 <li><a href="#multibuttonentry">Graham Smith</a></li>
1086 <li><a href="#multibuttonentry">Greta Peete</a></li>
1087 <li data-role="list-divider">H</li>
1088 <li><a href="#multibuttonentry">Harvey Walls</a></li>
1089 <li data-role="list-divider">M</li>
1090 <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
1091 <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
1092 <li data-role="list-divider">N</li>
1093 <li><a href="#multibuttonentry">Nathan Williams</a></li>
1094 <li data-role="list-divider">P</li>
1095 <li><a href="#multibuttonentry">Paul Baker</a></li>
1096 <li><a href="#multibuttonentry">Pete Mason</a></li>
1097 <li data-role="list-divider">R</li>
1098 <li><a href="#multibuttonentry">Rod Tarker</a></li>
1099 <li data-role="list-divider">S</li>
1100 <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
1102 </div> <!--/content -->
1103 </div> <!--/page -->
1106 <div data-role="page" id="no-contents-0" data-add-back-btn="true">
1107 <div data-role="header" data-position="fixed">
1108 <h1>No Contents</h1>
1110 <div data-role="content">
1111 <div data-role="nocontents" id="nocontents0" data-type="text">
1115 </div> <!-- /content -->
1116 </div> <!-- /page -->
1118 <div data-role="page" id="no-contents-1" data-add-back-btn="true">
1119 <div data-role="header" data-position="fixed">
1120 <h1>No Contents</h1>
1122 <div data-role="content">
1123 <div data-role="nocontents" id="nocontents1" data-type="picture">
1127 </div> <!-- /content -->
1128 </div> <!-- /page -->
1130 <div data-role="page" id="no-contents-2" data-add-back-btn="true">
1131 <div data-role="header" data-position="fixed">
1132 <h1>No Contents</h1>
1134 <div data-role="content">
1135 <div data-role="nocontents" id="nocontents2" data-type="multimedia">
1136 <p>Multimedia Type</p>
1139 </div> <!-- /content -->
1140 </div> <!-- /page -->
1142 <div data-role="page" id="no-contents-3" data-add-back-btn="true">
1143 <div data-role="header" data-position="fixed">
1144 <h1>No Contents</h1>
1146 <div data-role="content">
1147 <div data-role="nocontents" id="nocontents3">
1150 </div> <!-- /content -->
1151 </div> <!-- /page -->
1154 <script src="widgets/checkbox/checkbox.js"></script>
1155 <script src="widgets/switch/switch.js"></script>
1156 <script src="widgets/radio/radio.js"></script>
1157 <script src="widgets/progressbar.js"></script>
1158 <script src="widgets/ctxpopup.js"></script>
1159 <script src="widgets/popupwindow/popupwindow.js"></script>
1160 <script src="tips/generate-elements-dynamically.js"></script>
1161 <script src="tips/two-line-text/two-line-text.js"></script>
1162 <script src="tips/list-sample/list-sample.js"></script>
1163 <script src="tips/list-sample/expandable.js"></script>
1164 <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
1165 <script src="widgets/multibuttonentry-demo.js"></script>
1166 <script src="widgets/pagelayout/barcontrol.js"></script>
1167 <script src="widgets/pagelayout/backbutton-control.js"></script>
1168 <!-- test file for content div control, not completed yet -->
1169 <script src="widgets/pagelayout/ctrl-test.js"></script>