demos/tizen-winsets/index.html

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