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-scale=false>
  11         </script>
  12         <script src="main.js"></script>
  13         <link rel="stylesheet" href="custom.css" />
  14
  15         <title>Tizen UI</title>
  16
  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" />
  22 </head>
  23
  24 <body>
  25         <div data-role="page">
  26                 <div data-role="header" data-position="fixed">
  27                         <h1>Tizen Web UI</h1>
  28                 </div>
  29                 <div data-role="content">
  30                         <p id="current_date"></p>
  31                         <p id="html_font_size"></p>
  32
  33                         <script>
  34                                 $( document ).one( "pagecreate", function ( ) {
  35                                         $("#input-select-theme").find("input[name='select-theme']").bind( "change",
  36                                                 function ( ev, data ) {
  37                                                         var radio = this,
  38                                                                 theme = "tizen-white";
  39                                                         if( radio.checked ) {
  40                                                                 theme = radio.value;
  41                                                                 console.log( "Request theme change: " + theme );
  42                                                                 $.tizen.loadTheme( theme );
  43                                                         }
  44                                                 }
  45                                         );
  46                                 } );
  47                         </script>
  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>
  65
  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>
  70
  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>
  74
  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>
  81
  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>
  86
  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>
  91
  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>
  97
  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>
 103
 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>
 112
 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>
 120
 121
 122
 123                         </ul>
 124                 </div>
 125                 <div data-role="footer">
 126                 </div>
 127         </div>
 128
 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" >
 132                         <ul>
 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>
 136                         </ul>
 137                 </div><!-- /controlbar -->
 138         </div>
 139
 140         <div data-role="content">
 141                 <p>page a</p>
 142         </div>
 143 </div>
 144
 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" >
 148                         <ul>
 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>
 152                         </ul>
 153                 </div><!-- /controlbar -->
 154         </div>
 155
 156         <div data-role="content">
 157                 <p>page b</p>
 158         </div>
 159 </div>
 160
 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" >
 164                         <ul>
 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>
 168                         </ul>
 169                 </div><!-- /controlbar -->
 170         </div>
 171
 172         <div data-role="content">
 173                 <p>page c</p>
 174         </div>
 175 </div>
 176
 177
 178         <div data-role="page" id="notImplemented">
 179                 <div data-role="header" data-position="fixed">
 180                         <h1>Not Implemented</h1>
 181                 </div>
 182                 <div data-role="content">
 183                         <p> Not Implemented </p>
 184                 </div>
 185         </div>
 186
 187         <div data-role="page" id="slider-demo" data-add-back-btn="true">
 188                 <div data-role="header" data-position="fixed">
 189                         <h1>Slider</h1>
 190                 </div>
 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>
 203                         </ul>
 204                 </div><!-- /content -->
 205         </div> <!-- /page -->
 206
 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>
 210                 </div>
 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>
 216                         </ul>
 217                 </div>
 218         </div>
 219
 220         <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
 221                 <div data-role="header" data-position="fixed">
 222
 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>
 227
 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>
 232                                 </div>
 233                         </div>
 234                 </div>
 235                 <div data-role="content">
 236                         <p>Some content would be here</p>
 237                 </div>
 238         </div>
 239
 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>
 248                                 </div>
 249                         </div>
 250                 </div>
 251                 <div data-role="content">
 252                         <p>Some content would be here</p>
 253                 </div>
 254         </div>
 255
 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>
 265                                 </div>
 266                         </div>
 267                 </div>
 268                 <div data-role="content">
 269                         <p>Some content would be here</p>
 270                 </div>
 271         </div>
 272
 273
 274         <!-- Mixed Style -->
 275
 276         <div data-role="page" id="Mixed" >
 277                 <div data-role="header" data-position="fixed">
 278                         <h1>Mixed Toolbar</h1>
 279                 </div>
 280                 <div data-role="content">
 281                         <p>Not Supported for winset</p>
 282                 </div>
 283         </div>
 284         <!-- Mixed Style -->
 285
 286
 287         <div data-role="page" id="multibuttonentry">
 288                 <div data-role="header" data-position="fixed">
 289                         <h1>Multi-button Entry</h1>
 290                 </div>
 291                 <div data-role="content">
 292                         <div data-role="multibuttonentry" data-list-id="#addressbook"></div>
 293                         <br>
 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>
 305                         </ul>
 306                 </div>
 307         </div>
 308         <div data-role="page" id="addressbook" data-add-back-btn="none">
 309                 <div data-role="header"  data-position="fixed">
 310                         <h1>Address Book</h1>
 311                 </div>
 312                 <div data-role="content" id="contentList">
 313                         <ul data-role="listview">
 314                                 <li data-role="list-divider">A</li>
 315                                 <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
 316                                 <li><a href="#multibuttonentry">Alex Wickerham</a></li>
 317                                 <li><a href="#multibuttonentry">Avery Johnson</a></li>
 318                                 <li data-role="list-divider">B</li>
 319                                 <li><a href="#multibuttonentry">Bob Cabot</a></li>
 320                                 <li data-role="list-divider">C</li>
 321                                 <li><a href="#multibuttonentry">Caleb Booth</a></li>
 322                                 <li><a href="#multibuttonentry">Christopher Adams</a></li>
 323                                 <li><a href="#multibuttonentry">Culver James</a></li>
 324                                 <li data-role="list-divider">D</li>
 325                                 <li><a href="#multibuttonentry">David Walsh</a></li>
 326                                 <li><a href="#multibuttonentry">Drake Alfred</a></li>
 327                                 <li data-role="list-divider">E</li>
 328                                 <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
 329                                 <li><a href="#multibuttonentry">Emery Parker</a></li>
 330                                 <li><a href="#multibuttonentry">Enid Voldon</a></li>
 331                                 <li data-role="list-divider">F</li>
 332                                 <li><a href="#multibuttonentry">Francis Wall</a></li>
 333                                 <li data-role="list-divider">G</li>
 334                                 <li><a href="#multibuttonentry">Graham Smith</a></li>
 335                                 <li><a href="#multibuttonentry">Greta Peete</a></li>
 336                                 <li data-role="list-divider">H</li>
 337                                 <li><a href="#multibuttonentry">Harvey Walls</a></li>
 338                                 <li data-role="list-divider">M</li>
 339                                 <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
 340                                 <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
 341                                 <li data-role="list-divider">N</li>
 342                                 <li><a href="#multibuttonentry">Nathan Williams</a></li>
 343                                 <li data-role="list-divider">P</li>
 344                                 <li><a href="#multibuttonentry">Paul Baker</a></li>
 345                                 <li><a href="#multibuttonentry">Pete Mason</a></li>
 346                                 <li data-role="list-divider">R</li>
 347                                 <li><a href="#multibuttonentry">Rod Tarker</a></li>
 348                                 <li data-role="list-divider">S</li>
 349                                 <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
 350                         </ul>
 351                 </div> <!--/content -->
 352                 <div data-role="footer">
 353                         <div align="right">
 354                                 <a href="#multibuttonentry" data-role="button" style="margin-right : 1em;">Cancel</a>
 355                         </div>
 356                 </div>
 357         </div> <!--/page -->
 358
 359         <!--                   nocontents                 -->
 360         <div data-role="page" id="no-contents-0" data-add-back-btn="true">
 361                 <div data-role="header" data-position="fixed">
 362                         <h1>No Contents</h1>
 363                 </div>
 364                 <div data-role="content">
 365                         <div data-role="nocontents" id="nocontents0" data-type="text">
 366                                 <p>Text Type</p>
 367                                 <p>Text</p>
 368                         </div>
 369                 </div> <!-- /content -->
 370         </div> <!-- /page -->
 371
 372         <div data-role="page" id="no-contents-1" data-add-back-btn="true">
 373                 <div data-role="header" data-position="fixed">
 374                         <h1>No Contents</h1>
 375                 </div>
 376                 <div data-role="content">
 377                         <div data-role="nocontents" id="nocontents1" data-type="picture">
 378                                 <p>Picture Type</p>
 379                                 <p>Text</p>
 380                         </div>
 381                 </div> <!-- /content -->
 382         </div> <!-- /page -->
 383
 384         <div data-role="page" id="no-contents-2" data-add-back-btn="true">
 385                 <div data-role="header" data-position="fixed">
 386                         <h1>No Contents</h1>
 387                 </div>
 388                 <div data-role="content">
 389                         <div data-role="nocontents" id="nocontents2" data-type="multimedia">
 390                                 <p>Multimedia Type</p>
 391                                 <p>Text</p>
 392                         </div>
 393                 </div> <!-- /content -->
 394         </div> <!-- /page -->
 395
 396         <div data-role="page" id="no-contents-3" data-add-back-btn="true">
 397                 <div data-role="header" data-position="fixed">
 398                         <h1>No Contents</h1>
 399                 </div>
 400                 <div data-role="content">
 401                         <div data-role="nocontents" id="nocontents3">
 402                                 <p>Unnamed Type</p>
 403                         </div>
 404                 </div> <!-- /content -->
 405         </div> <!-- /page -->
 406
 407
 408         <script src="widgets/checkbox/checkbox.js"></script>
 409         <script src="widgets/switch/switch.js"></script>
 410         <script src="widgets/radio/radio.js"></script>
 411         <script src="widgets/progressbar.js"></script>
 412         <script src="widgets/ctxpopup.js"></script>
 413         <script src="widgets/popupwindow/popupwindow.js"></script>
 414         <script src="tips/generate-elements-dynamically.js"></script>
 415         <script src="tips/two-line-text/two-line-text.js"></script>
 416         <script src="tips/list-sample/list-sample.js"></script>
 417         <script src="tips/list-sample/expandable.js"></script>
 418         <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
 419         <script src="widgets/multibuttonentry-demo.js"></script>
 420         <script src="widgets/pagelayout/barcontrol.js"></script>
 421         <script src="widgets/pagelayout/backbutton-control.js"></script>
 422         <!-- test file for content div control, not completed yet -->
 423         <script src="widgets/pagelayout/ctrl-test.js"></script>
 424 </body>
 425 </html>