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>
34 $( document ).one( "pagecreate", function ( ) {
35 $("#input-select-theme").find("input[name='select-theme']").bind( "change",
36 function ( ev, data ) {
38 theme = "tizen-white";
41 console.log( "Request theme change: " + theme );
42 $.tizen.loadTheme( theme );
48 <ul data-role="listview">
49 <li data-role="list-divider">Controls</li>
50 <li><a href="widgets/button/button.html">Button</a></li>
51 <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
52 <li><a href="widgets/switch/switch.html">Switch</a></li>
53 <li><a href="widgets/radio/radio.html">Radio</a></li>
54 <li><a href="widgets/searchbar.html">Searchbar</a></li>
55 <li><a href="widgets/entry.html">Entry</a></li>
56 <li><a href="widgets/datefield.html">Time picker</a></li>
57 <li><a href="widgets/progressbar.html">Progressbar</a></li>
58 <li><a href="#slider-demo">Slider</a></li>
59 <li><a href="widgets/imageslider.html">ImageSlider</a></li>
60 <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
61 <li><a href="widgets/day-selector.html" >Day Selector</a></li>
62 <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
63 <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
64 <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
66 <li data-role="list-divider">PageLayout</li>
67 <li><a href="widgets/naviframe/naviframe.html">Naviframe</a></li>
68 <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
69 <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
71 <li data-role="list-divider">Controlbar</li>
72 <li><a href="widgets/controlbar/controlbar.html">Controlbar</a></li>
73 <li><a href="#controlbar_persist_a">Persist toolbar</a></li>
75 <li data-role="list-divider">Scrollview</li>
76 <li><a href="widgets/scrollview_x.html">Horizontal Scroll</a></li>
77 <li><a href="widgets/scrollview_y.html">Vertical Scroll</a></li>
78 <li><a href="widgets/scrollview_xy.html">XY Scroll</a></li>
79 <li><a href="widgets/handler.html">Handler</a></li>
80 <li><a href="widgets/scroll_jump.html">Scroll Jump</a></li>
82 <li data-role="list-divider">List</li>
83 <li><a href="widgets/list/list.html">List</a></li>
84 <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
85 <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
87 <li data-role="list-divider">Additional Popup</li>
88 <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
89 <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
90 <li><a href="#option-header-demo">Optional Header</a></li>
92 <li data-role="list-divider">Notification (ticker)</li>
93 <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
94 <li><a href="widgets/tickernoti-interval.html">TickerNoti Interval</a></li>
95 <li><a href="widgets/small-popup.html">Small Popup</a></li>
96 <li><a href="widgets/small-popup-interval.html">Small Popup Interval</a></li>
98 <li data-role="list-divider">No Contents</li>
99 <li><a href="#no-contents-0">No Contents - Text</a></li>
100 <li><a href="#no-contents-1">No Contents - Picture</a></li>
101 <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
102 <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
104 <li data-role="list-divider">Grid view</li>
105 <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
106 <li><a href="widgets/grid/virtualgrid-rotation.html">Virtual Grid - Rotation</a></li>
107 <li><a href="widgets/grid/virtualgrid-list.html">Virtual Grid - List</a></li>
108 <li><a href="widgets/grid/virtualgrid-x.html">Virtual Grid - X</a></li>
109 <li><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li>
110 <li data-role="list-divider">Multimedia view</li>
111 <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</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>
125 <div data-role="footer">
129 <div data-role="page" id="controlbar_persist_a">
130 <div data-role="header" data-position="fixed">
131 <div data-role="controlbar" data-id="persist_header" >
133 <li><a href="#controlbar_persist_a" class="ui-btn-active ui-state-persist">Menu</a></li>
134 <li><a href="#controlbar_persist_b" >Save</a></li>
135 <li><a href="#controlbar_persist_c" >Next</a></li>
137 </div><!-- /controlbar -->
140 <div data-role="content">
145 <div data-role="page" id="controlbar_persist_b">
146 <div data-role="header" data-position="fixed">
147 <div data-role="controlbar" data-id="persist_header" >
149 <li><a href="#controlbar_persist_a" >Menu</a></li>
150 <li><a href="#controlbar_persist_b" class="ui-btn-active ui-state-persist">Save</a></li>
151 <li><a href="#controlbar_persist_c" >Next</a></li>
153 </div><!-- /controlbar -->
156 <div data-role="content">
161 <div data-role="page" id="controlbar_persist_c">
162 <div data-role="header" data-position="fixed">
163 <div data-role="controlbar" data-id="persist_header" >
165 <li><a href="#controlbar_persist_a" >Menu</a></li>
166 <li><a href="#controlbar_persist_b" >Save</a></li>
167 <li><a href="#controlbar_persist_c" class="ui-btn-active ui-state-persist">Next</a></li>
169 </div><!-- /controlbar -->
172 <div data-role="content">
178 <div data-role="page" id="notImplemented">
179 <div data-role="header" data-position="fixed">
180 <h1>Not Implemented</h1>
182 <div data-role="content">
183 <p> Not Implemented </p>
187 <div data-role="page" id="slider-demo" data-add-back-btn="true">
188 <div data-role="header" data-position="fixed">
191 <div data-role="content">
192 <ul data-role="listview">
193 <li data-role="list-divider">Normal Slider</li>
194 <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" /></li>
195 <li data-role="list-divider">Popup Slider</li>
196 <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
197 <li data-role="list-divider">Icon Slider</li>
198 <li><input id="mySlider3" name="mySlider3" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
199 <li><input id="mySlider4" name="mySlider4" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
200 <li data-role="list-divider">Text Slider</li>
201 <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>
202 <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>
204 </div><!-- /content -->
205 </div> <!-- /page -->
207 <div data-role="page" id="option-header-demo" data-add-back-btn="true">
208 <div data-role="header" data-position="fixed">
209 <h1>Optional Header</h1>
211 <div data-role="content">
212 <ul data-role="listview" data-icon="1line-textonly">
213 <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
214 <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
215 <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
220 <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
221 <div data-role="header" data-position="fixed">
223 <h1>Option header</h1>
224 <a id="123">TestBtn</a>
225 <a id="opt_text" data-icon="optiontray"></a>
226 <a id="1234">TestBtn</a>
228 <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
229 <div class="ui-grid-a ">
230 <div class="ui-block-a"><a data-role="button">Save</a></div>
231 <div class="ui-block-b"><a data-role="button">Next</a></div>
235 <div data-role="content">
236 <p>Some content would be here</p>
240 <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
241 <div data-role="header" data-position="fixed">
242 <h1>Option header - 3 buttons</h1>
243 <div id="myoptionheader2" data-role="optionheader">
244 <div class="ui-grid-b ">
245 <div class="ui-block-a"><a data-role="button">Previous</a></div>
246 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
247 <div class="ui-block-c"><a data-role="button">Save</a></div>
251 <div data-role="content">
252 <p>Some content would be here</p>
256 <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
257 <div data-role="header" data-position="fixed">
258 <h1>Option header - 4 buttons</h1>
259 <div id="myoptionheader3" data-role="optionheader">
260 <div class="ui-grid-c ">
261 <div class="ui-block-a"><a data-role="button">Previous</a></div>
262 <div class="ui-block-b"><a data-role="button">Cancel</a></div>
263 <div class="ui-block-c"><a data-role="button">Save</a></div>
264 <div class="ui-block-d"><a data-role="button">Next</a></div>
268 <div data-role="content">
269 <p>Some content would be here</p>
276 <div data-role="page" id="Mixed" >
277 <div data-role="header" data-position="fixed">
278 <h1>Mixed Toolbar</h1>
280 <div data-role="content">
281 <p>Not Supported for winset</p>
287 <div data-role="page" id="multibuttonentry">
288 <div data-role="header" data-position="fixed">
289 <h1>Multi-button Entry</h1>
291 <div data-role="content">
292 <div data-role="multibuttonentry" data-list-id="#addressbook"></div>
294 <ul data-role="listview">
295 <li><a id='MBTaddItemTest'>Append Item</a></li>
296 <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
297 <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
298 <li><a id='MBTgetInputTextTest'>Get input text</a></li>
299 <li><a id='MBTselectItemTest'>Select 1</a></li>
300 <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
301 <li><a id='MBTlengthTest'>Length</a></li>
302 <li><a id='MBTfocusOutTest'>Grouping On</a></li>
303 <li><a id='MBTfocusInTest'>Grouping Off</a></li>
304 <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
308 <div data-role="page" id="addressbook" data-footer-Exist="false" >
309 <div data-role="header" data-position="fixed">
310 <h1>Address Book</h1>
311 <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
313 <div data-role="content" id="contentList">
314 <ul data-role="listview">
315 <li data-role="list-divider">A</li>
316 <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
317 <li><a href="#multibuttonentry">Alex Wickerham</a></li>
318 <li><a href="#multibuttonentry">Avery Johnson</a></li>
319 <li data-role="list-divider">B</li>
320 <li><a href="#multibuttonentry">Bob Cabot</a></li>
321 <li data-role="list-divider">C</li>
322 <li><a href="#multibuttonentry">Caleb Booth</a></li>
323 <li><a href="#multibuttonentry">Christopher Adams</a></li>
324 <li><a href="#multibuttonentry">Culver James</a></li>
325 <li data-role="list-divider">D</li>
326 <li><a href="#multibuttonentry">David Walsh</a></li>
327 <li><a href="#multibuttonentry">Drake Alfred</a></li>
328 <li data-role="list-divider">E</li>
329 <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
330 <li><a href="#multibuttonentry">Emery Parker</a></li>
331 <li><a href="#multibuttonentry">Enid Voldon</a></li>
332 <li data-role="list-divider">F</li>
333 <li><a href="#multibuttonentry">Francis Wall</a></li>
334 <li data-role="list-divider">G</li>
335 <li><a href="#multibuttonentry">Graham Smith</a></li>
336 <li><a href="#multibuttonentry">Greta Peete</a></li>
337 <li data-role="list-divider">H</li>
338 <li><a href="#multibuttonentry">Harvey Walls</a></li>
339 <li data-role="list-divider">M</li>
340 <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
341 <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
342 <li data-role="list-divider">N</li>
343 <li><a href="#multibuttonentry">Nathan Williams</a></li>
344 <li data-role="list-divider">P</li>
345 <li><a href="#multibuttonentry">Paul Baker</a></li>
346 <li><a href="#multibuttonentry">Pete Mason</a></li>
347 <li data-role="list-divider">R</li>
348 <li><a href="#multibuttonentry">Rod Tarker</a></li>
349 <li data-role="list-divider">S</li>
350 <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
352 </div> <!--/content -->
356 <div data-role="page" id="no-contents-0" data-add-back-btn="true">
357 <div data-role="header" data-position="fixed">
360 <div data-role="content">
361 <div data-role="nocontents" id="nocontents0" data-type="text">
365 </div> <!-- /content -->
366 </div> <!-- /page -->
368 <div data-role="page" id="no-contents-1" data-add-back-btn="true">
369 <div data-role="header" data-position="fixed">
372 <div data-role="content">
373 <div data-role="nocontents" id="nocontents1" data-type="picture">
377 </div> <!-- /content -->
378 </div> <!-- /page -->
380 <div data-role="page" id="no-contents-2" data-add-back-btn="true">
381 <div data-role="header" data-position="fixed">
384 <div data-role="content">
385 <div data-role="nocontents" id="nocontents2" data-type="multimedia">
386 <p>Multimedia Type</p>
389 </div> <!-- /content -->
390 </div> <!-- /page -->
392 <div data-role="page" id="no-contents-3" data-add-back-btn="true">
393 <div data-role="header" data-position="fixed">
396 <div data-role="content">
397 <div data-role="nocontents" id="nocontents3">
400 </div> <!-- /content -->
401 </div> <!-- /page -->
404 <script src="widgets/checkbox/checkbox.js"></script>
405 <script src="widgets/switch/switch.js"></script>
406 <script src="widgets/radio/radio.js"></script>
407 <script src="widgets/progressbar.js"></script>
408 <script src="widgets/ctxpopup.js"></script>
409 <script src="widgets/popupwindow/popupwindow.js"></script>
410 <script src="tips/generate-elements-dynamically.js"></script>
411 <script src="tips/two-line-text/two-line-text.js"></script>
412 <script src="tips/list-sample/list-sample.js"></script>
413 <script src="tips/list-sample/expandable.js"></script>
414 <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
415 <script src="widgets/multibuttonentry-demo.js"></script>
416 <script src="widgets/pagelayout/barcontrol.js"></script>
417 <script src="widgets/pagelayout/backbutton-control.js"></script>
418 <!-- test file for content div control, not completed yet -->
419 <script src="widgets/pagelayout/ctrl-test.js"></script>