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-width="device-width">
13 <script src="main.js"></script>
14 <link rel="stylesheet" href="custom.css" />
16 <title>Tizen UI</title>
18 <!-- for compatibility test -->
19 <meta name="apple-mobile-web-app-capable" content="yes" />
20 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
21 <link rel="apple-touch-icon" href="icon-tizen.png" />
22 <link rel="stylesheet" href="./widgets/grid/css/namecard.css" />
26 <div data-role="page" data-add-back-btn="true">
27 <div data-role="header" data-position="fixed">
30 <div data-role="content">
31 <p id="current_date"></p>
32 <p id="html_font_size"></p>
35 $( document ).one( "pagecreate", function ( ) {
36 $("#input-select-theme").find("input[name='select-theme']").bind( "change",
37 function ( ev, data ) {
39 theme = "tizen-white";
42 console.log( "Request theme change: " + theme );
43 $.tizen.loadTheme( theme );
49 <ul data-role="listview">
50 <li data-role="list-divider">Controls</li>
51 <li><a href="widgets/button/button.html">Button</a></li>
52 <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
53 <li><a href="widgets/switch/toggleswitch.html">Flip Toggle Switch</a></li>
54 <li><a href="widgets/radio/radio.html">Radio</a></li>
55 <li><a href="widgets/searchbar/searchbar.html">Searchbar</a></li>
56 <li><a href="widgets/entry.html">Entry</a></li>
57 <li><a href="widgets/datefield.html">Time picker</a></li>
58 <li><a href="widgets/progressbar.html">Progressbar</a></li>
59 <li><a href="#slider-demo">Slider</a></li>
60 <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
61 <li><a href="widgets/buttonGrouping.html">Group Control(new segment)</a></li>
62 <li><a href="#tokentextarea">Token Text Area</a></li>
64 <li data-role="list-divider">Page Layout</li>
65 <li><a href="widgets/naviframe/naviframe.html">Naviframe</a></li>
66 <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
67 <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
69 <li data-role="list-divider">Tabbar</li>
70 <li><a href="widgets/tabbar/tabbar.html">Tabbar</a></li>
71 <li><a href="#tabbar_persist_a">Persist toolbar</a></li>
73 <li data-role="list-divider">Scrollview</li>
74 <li><a href="widgets/scrollview_x.html">Horizontal Scroll</a></li>
75 <li><a href="widgets/scrollview_y.html">Vertical Scroll</a></li>
76 <li><a href="widgets/scrollview_xy.html">XY Scroll</a></li>
77 <li><a href="widgets/handler.html">Handler</a></li>
78 <li><a href="widgets/scroll_jump.html">Scroll Jump</a></li>
80 <li data-role="list-divider">List</li>
81 <li><a href="widgets/list/list.html">List</a></li>
82 <li><a href="widgets/list/lists-autodividers.html">Autodividers</a></li>
83 <li><a href="widgets/fastscroll.html">Fastscroll</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">Context Popup</a></li>
89 <li data-role="list-divider">Notification</li>
90 <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
91 <li><a href="widgets/tickernoti-interval.html">TickerNoti Interval</a></li>
92 <li><a href="widgets/small-popup.html">Small Popup</a></li>
93 <li><a href="widgets/small-popup-interval.html">Small Popup Interval</a></li>
95 <li data-role="list-divider">Gallery</li>
96 <li><a href="widgets/gallery.html">Gallery</a></li>
98 <li data-role="list-divider">Virtual Grid</li>
99 <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
100 <li><a href="widgets/grid/virtualgrid-rotation.html">Virtual Grid - Rotation</a></li>
101 <li><a href="widgets/grid/virtualgrid-list.html">Virtual Grid - List</a></li>
102 <li><a href="widgets/grid/virtualgrid-x.html">Virtual Grid - X</a></li>
103 <li><a href="widgets/grid/virtualgrid-size.html">Virtual Grid - Size</a></li>
105 <li data-role="list-divider">Multimedia View</li>
106 <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
108 <li data-role="list-divider">Programming Tips</li>
109 <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
110 <li><a href="tips/custom-globalize-culture/custom-globalize-culture.html">Using custom Globalize culture files</a></li>
111 <li><a href="tips/two-line-text/two-line-text.html">2 line text</a></li>
112 <li><a href="tips/list-sample/list-sample.html">Example for using listview</a></li>
113 <li><a href="tips/page-transition/transition.html">Page transitions</a></li>
119 <div data-role="footer">
123 <div data-role="page" id="tabbar_persist_a" data-add-back-btn="true">
124 <div data-role="header" data-position="fixed">
125 <div data-role="tabbar" data-id="persist_header" >
127 <li><a href="#tabbar_persist_a" class="ui-btn-active ui-state-persist">Menu</a></li>
128 <li><a href="#tabbar_persist_b" >Save</a></li>
129 <li><a href="#tabbar_persist_c" >Next</a></li>
131 </div><!-- /tabbar -->
134 <div data-role="content">
138 <div data-role="footer">
142 <div data-role="page" id="tabbar_persist_b" data-add-back-btn="true">
143 <div data-role="header" data-position="fixed">
144 <div data-role="tabbar" data-id="persist_header" >
146 <li><a href="#tabbar_persist_a" >Menu</a></li>
147 <li><a href="#tabbar_persist_b" class="ui-btn-active ui-state-persist">Save</a></li>
148 <li><a href="#tabbar_persist_c" >Next</a></li>
150 </div><!-- /tabbar -->
153 <div data-role="content">
157 <div data-role="footer">
161 <div data-role="page" id="tabbar_persist_c" data-add-back-btn="true">
162 <div data-role="header" data-position="fixed">
163 <div data-role="tabbar" data-id="persist_header" >
165 <li><a href="#tabbar_persist_a" >Menu</a></li>
166 <li><a href="#tabbar_persist_b" >Save</a></li>
167 <li><a href="#tabbar_persist_c" class="ui-btn-active ui-state-persist">Next</a></li>
169 </div><!-- /tabbar -->
172 <div data-role="content">
176 <div data-role="footer">
181 <div data-role="page" id="notImplemented" data-add-back-btn="true">
182 <div data-role="header" data-position="fixed">
183 <h1>Not Implemented</h1>
185 <div data-role="content">
186 <p> Not Implemented </p>
188 <div data-role="footer">
192 <div data-role="page" id="slider-demo" data-add-back-btn="true">
193 <div data-role="header" data-position="fixed">
196 <div data-role="content">
197 <ul data-role="listview">
198 <li data-role="list-divider">Normal Slider</li>
199 <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" /></li>
200 <li data-role="list-divider">Popup Slider</li>
201 <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
202 <li data-role="list-divider">Icon Slider</li>
203 <li><input id="mySlider3" name="mySlider3" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
204 <li><input id="mySlider4" name="mySlider4" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
205 <li data-role="list-divider">Text Slider</li>
206 <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>
207 <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>
208 <li data-role="list-divider">data-highlight="false"</li>
209 <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-highlight="false" /></li>
211 </div><!-- /content -->
212 <div data-role="footer">
214 </div> <!-- /page -->
216 <div data-role="page" id="tokentextarea" data-add-back-btn="true">
217 <div data-role="header" data-position="fixed">
218 <h1>Token Text Area</h1>
220 <div data-role="content">
221 <div data-role="tokentextarea" data-link="#addressbook"></div>
223 <ul data-role="listview">
224 <li><a id='MBTaddItemTest'>Append Item</a></li>
225 <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
226 <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
227 <li><a id='MBTgetInputTextTest'>Get input text</a></li>
228 <li><a id='MBTselectItemTest'>Select 1</a></li>
229 <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
230 <li><a id='MBTlengthTest'>Length</a></li>
231 <li><a id='MBTfocusOutTest'>Grouping On</a></li>
232 <li><a id='MBTfocusInTest'>Grouping Off</a></li>
233 <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
236 <div data-role="footer">
239 <div data-role="page" id="addressbook">
240 <div data-role="header" data-position="fixed">
241 <h1>Address Book</h1>
243 <div data-role="content" id="contentList">
244 <ul data-role="listview">
245 <li data-role="list-divider">A</li>
246 <li><a href="#tokentextarea">Adam Kinkaid</a></li>
247 <li><a href="#tokentextarea">Alex Wickerham</a></li>
248 <li><a href="#tokentextarea">Avery Johnson</a></li>
249 <li data-role="list-divider">B</li>
250 <li><a href="#tokentextarea">Bob Cabot</a></li>
251 <li data-role="list-divider">C</li>
252 <li><a href="#tokentextarea">Caleb Booth</a></li>
253 <li><a href="#tokentextarea">Christopher Adams</a></li>
254 <li><a href="#tokentextarea">Culver James</a></li>
255 <li data-role="list-divider">D</li>
256 <li><a href="#tokentextarea">David Walsh</a></li>
257 <li><a href="#tokentextarea">Drake Alfred</a></li>
258 <li data-role="list-divider">E</li>
259 <li><a href="#tokentextarea">Elizabeth Bacon</a></li>
260 <li><a href="#tokentextarea">Emery Parker</a></li>
261 <li><a href="#tokentextarea">Enid Voldon</a></li>
262 <li data-role="list-divider">F</li>
263 <li><a href="#tokentextarea">Francis Wall</a></li>
264 <li data-role="list-divider">G</li>
265 <li><a href="#tokentextarea">Graham Smith</a></li>
266 <li><a href="#tokentextarea">Greta Peete</a></li>
267 <li data-role="list-divider">H</li>
268 <li><a href="#tokentextarea">Harvey Walls</a></li>
269 <li data-role="list-divider">M</li>
270 <li><a href="#tokentextarea">Mike Farnsworth</a></li>
271 <li><a href="#tokentextarea">Murray Vanderbuilt</a></li>
272 <li data-role="list-divider">N</li>
273 <li><a href="#tokentextarea">Nathan Williams</a></li>
274 <li data-role="list-divider">P</li>
275 <li><a href="#tokentextarea">Paul Baker</a></li>
276 <li><a href="#tokentextarea">Pete Mason</a></li>
277 <li data-role="list-divider">R</li>
278 <li><a href="#tokentextarea">Rod Tarker</a></li>
279 <li data-role="list-divider">S</li>
280 <li><a href="#tokentextarea">Sawyer Wakefield</a></li>
282 </div> <!--/content -->
283 <div data-role="footer">
285 <a href="#tokentextarea" data-role="button" style="margin-right : 1em;">Cancel</a>
290 <script src="widgets/checkbox/checkbox.js"></script>
291 <script src="widgets/radio/radio.js"></script>
292 <script src="widgets/progressbar.js"></script>
293 <script src="widgets/ctxpopup.js"></script>
294 <script src="widgets/popupwindow/popupwindow.js"></script>
295 <script src="tips/generate-elements-dynamically.js"></script>
296 <script src="tips/two-line-text/two-line-text.js"></script>
297 <script src="tips/list-sample/list-sample.js"></script>
298 <script src="widgets/tokentextarea-demo.js"></script>
299 <script src="widgets/pagelayout/barcontrol.js"></script>
300 <script src="widgets/pagelayout/backbutton-control.js"></script>
301 <script src="widgets/list/list-edit.js"></script>
303 <link rel="stylesheet" href="./widgets/tabbar/tabbar.css" />
304 <link rel="stylesheet" href="./widgets/switch/toggleswitch.css" />