demos/tizen-gray/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5         <script src="../../build/tizen-web-ui-fw/0.1/js/jquery.js"></script>
   6         <script src="configure.js"></script>
   7         <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw-libs.min.js"></script>
   8         <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.min.js"
   9                 data-framework-theme="tizen-gray"
  10                 data-framework-viewport-scale=false>
  11         </script>
  12         <script src="init.js"></script>
  13         <script src="widgets/checkbox/checkbox.js"></script>
  14         <script src="widgets/switch/switch.js"></script>
  15         <script src="widgets/radio/radio.js"></script>
  16         <script src="widgets/progressbar.js"></script>
  17         <script src="widgets/ctxpopup.js"></script>
  18         <script src="widgets/popupwindow/popupwindow.js"></script>
  19         <script src="tips/generate-elements-dynamically.js"></script>
  20         <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
  21         <script src="widgets/multibuttonentry-demo.js"></script>
  22         <link rel="stylesheet" href="custom.css" />
  23         <title>Tizen UI</title>
  24
  25         <!-- for compatibility test -->
  26         <meta name="apple-mobile-web-app-capable" content="yes" />
  27         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  28         <link rel="apple-touch-icon" href="icon-tizen.png" />
  29         <link rel="stylesheet" href="./widgets/grid/css/namecard.css" />
  30 </head>
  31
  32 <body>
  33         <div data-role="page">
  34                 <div data-role="header" data-position="fixed">
  35                         <h1>Tizen UI</h1>
  36                 </div>
  37                 <div data-role="content">
  38                         <p id="current_date"></p>
  39                         <p id="html_font_size"></p>
  40                         <ul data-role="listview" data-icon="1line-textonly">
  41                                 <li data-role="list-divider">Controls</li>
  42                                 <li><a href="widgets/button/button.html">Button</a></li>
  43                                 <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
  44                                 <li><a href="widgets/switch/switch.html">Switch</a></li>
  45                                 <li><a href="widgets/radio/radio.html">Radio</a></li>
  46                                 <li><a href="widgets/colorpicker.html">Color picker</a></li>
  47                                 <li><a href="widgets/datefield.html">Time picker</a></li>
  48                                 <li><a href="widgets/progressbar.html">Progressbar</a></li>
  49                                 <li><a href="widgets/entry.html">Entry</a></li>
  50                                 <li><a href="widgets/searchbar.html">Searchbar</a></li>
  51                                 <li><a href="#slider-demo">Slider</a></li>
  52                                 <li><a href="widgets/day-selector.html" >Day Selector</a></li>
  53                                 <li><a href="#NavigationbarMain">Navigation Bar</a></li>
  54                                 <li><a href="widgets/imageslider.html">ImageSlider</a></li>
  55                                 <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
  56                                 <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
  57                                 <li><a href="widgets/handler.html">Handler</a></li>
  58                                 <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
  59                                 <li data-role="list-divider">ControlBar</li>
  60                                 <li><a href="#controlbar-demo">ControlBar</a></li>
  61
  62                                 <li data-role="list-divider">List</li>
  63                                 <li><a href="widgets/list/list.html">List</a></li>
  64                                 <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
  65                                 <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
  66
  67                                 <li data-role="list-divider">Navigation Bar</li>
  68                                 <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
  69                                 <li><a href="#option-header-demo">Optional Header</a></li>
  70
  71                                 <li data-role="list-divider">Popup</li>
  72                                 <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
  73                                 <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
  74
  75                                 <li data-role="list-divider">Notification (ticker)</li>
  76                                 <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
  77                                 <li><a href="widgets/tickernoti-interval.html">TickerNoti Interval</a></li>
  78                                 <li><a href="widgets/small-popup.html">Small Popup</a></li>
  79                                 <li><a href="widgets/small-popup-interval.html">Small Popup Interval</a></li>
  80
  81                                 <li data-role="list-divider">No Contents</li>
  82                                 <li><a href="#no-contents-0">No Contents - Text</a></li>
  83                                 <li><a href="#no-contents-1">No Contents - Picture</a></li>
  84                                 <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
  85                                 <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
  86
  87                                 <li data-role="list-divider">Grid view</li>
  88                                 <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
  89                                 <li data-role="list-divider">Multimedia view</li>
  90                                 <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
  91
  92                                 <li data-role="list-divider">Programming Tips</li>
  93                                 <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
  94
  95                         </ul>
  96                 </div>
  97         </div>
  98
  99         <div data-role="page" id="notImplemented">
 100                 <div data-role="header" data-position="fixed">
 101                         <h1>Not Implemented</h1>
 102                 </div>
 103                 <div data-role="content">
 104                         <p> Not Implemented </p>
 105                 </div>
 106         </div>
 107
 108         <div data-role="page" id="slider-demo" data-add-back-btn="true">
 109                 <div data-role="header" data-position="fixed">
 110                         <h1>Slider</h1>
 111                 </div>
 112                 <div data-role="content">
 113                         <ul data-role="listview">
 114                                 <li data-role="list-divider">Normal Slider</li>
 115                                 <li><input id="mySlider" name="mySlider" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" /></li>
 116                                 <li data-role="list-divider">Popup Slider</li>
 117                                 <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
 118                                 <li data-role="list-divider">Icon Slider</li>
 119                                 <li><input id="mySlider3" name="mySlider3" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
 120                                 <li><input id="mySlider4" name="mySlider4" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
 121                                 <li data-role="list-divider">Text Slider</li>
 122                                 <li><input id="mySlider5" name="mySlider5" data-popupenabled='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li>
 123                                 <li><input id="mySlider5" name="mySlider5" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li>
 124                         </ul>
 125                 </div><!-- /content -->
 126         </div> <!-- /page -->
 127
 128         <div data-role="page" id="no-contents-0" data-add-back-btn="true">
 129                 <div data-role="header" data-position="fixed">
 130                         <h1>No Contents</h1>
 131                 </div>
 132                 <div data-role="content">
 133                         <div data-role="nocontents" id="nocontents0" data-text1="Text Type" data-text2="Text" data-type="text"></div>
 134                 </div> <!-- /content -->
 135         </div> <!-- /page -->
 136
 137         <div data-role="page" id="no-contents-1" data-add-back-btn="true">
 138                 <div data-role="header" data-position="fixed">
 139                         <h1>No Contents</h1>
 140                 </div>
 141                 <div data-role="content">
 142                         <div data-role="nocontents" id="nocontents1" data-text1="Picture Type" data-text2="Text" data-type="picture"></div>
 143                 </div> <!-- /content -->
 144         </div> <!-- /page -->
 145
 146         <div data-role="page" id="no-contents-2" data-add-back-btn="true">
 147                 <div data-role="header" data-position="fixed">
 148                         <h1>No Contents</h1>
 149                 </div>
 150                 <div data-role="content">
 151                         <div data-role="nocontents" id="nocontents2" data-text1="Multimedia Type" data-text2="Text" data-type="multimedia"></div>
 152                 </div> <!-- /content -->
 153         </div> <!-- /page -->
 154
 155         <div data-role="page" id="no-contents-3" data-add-back-btn="true">
 156                 <div data-role="header" data-position="fixed">
 157                         <h1>No Contents</h1>
 158                 </div>
 159                 <div data-role="content">
 160                         <div data-role="nocontents" id="nocontents3" data-text1="Unnamed Type"></div>
 161                 </div> <!-- /content -->
 162         </div> <!-- /page -->
 163
 164         <div data-role="page" id="option-header-demo" data-add-back-btn="true">
 165                 <div data-role="header" data-position="fixed">
 166                         <h1>Optional Header</h1>
 167                 </div>
 168                 <div data-role="content">
 169                         <ul data-role="listview" data-icon="1line-textonly">
 170                                 <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
 171                                 <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
 172                                 <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
 173                                 <li><a href="#optionheader2line4btn">2 line 4 buttons</a></li>
 174                         </ul>
 175                 </div>
 176         </div>
 177
 178         <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
 179                 <div data-role="header" data-position="fixed">
 180                         <a id="123">TestBtn</a>
 181                         <h1>Option header - 2 buttons</h1>
 182                         <a id="opt_text" data-icon="optiontray"></a>
 183                         <a id="1234">TestBtn</a>
 184
 185                         <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
 186                                 <div class="ui-grid-a ">
 187                                         <div class="ui-block-a"><a data-role="button">Save</a></div>
 188                                         <div class="ui-block-b"><a data-role="button">Next</a></div>
 189                                 </div>
 190                         </div>
 191                 </div>
 192                 <div data-role="content">
 193                         <p>Some content would be here</p>
 194                 </div>
 195         </div>
 196
 197         <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
 198                 <div data-role="header" data-position="fixed">
 199                         <h1>Option header - 3 buttons</h1>
 200                         <div id="myoptionheader2" data-role="optionheader">
 201                                 <div class="ui-grid-b ">
 202                                         <div class="ui-block-a"><a data-role="button">Previous</a></div>
 203                                         <div class="ui-block-b"><a data-role="button">Cancel</a></div>
 204                                         <div class="ui-block-c"><a data-role="button">Save</a></div>
 205                                 </div>
 206                         </div>
 207                 </div>
 208                 <div data-role="content">
 209                         <p>Some content would be here</p>
 210                 </div>
 211         </div>
 212
 213         <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
 214                 <div data-role="header" data-position="fixed">
 215                         <h1>Option header - 4 buttons</h1>
 216                         <div id="myoptionheader3" data-role="optionheader">
 217                                 <div class="ui-grid-c ">
 218                                         <div class="ui-block-a"><a data-role="button">Previous</a></div>
 219                                         <div class="ui-block-b"><a data-role="button">Cancel</a></div>
 220                                         <div class="ui-block-c"><a data-role="button">Save</a></div>
 221                                         <div class="ui-block-d"><a data-role="button">Next</a></div>
 222                                 </div>
 223                         </div>
 224                 </div>
 225                 <div data-role="content">
 226                         <p>Some content would be here</p>
 227                 </div>
 228         </div>
 229
 230         <div data-role="page" id="optionheader2line4btn" data-add-back-btn="true">
 231                 <div data-role="header" data-position="fixed">
 232                         <h1>Option header - 4 buttons</h1>
 233                         <div id="myoptionheader" data-role="optionheader">
 234                                 <div class="ui-grid-c ">
 235                                         <div class="ui-block-a"><a data-role="button">Previous</a></div>
 236                                         <div class="ui-block-b"><a data-role="button">Cancel</a></div>
 237                                         <div class="ui-block-c"><a data-role="button">Save</a></div>
 238                                         <div class="ui-block-d"><a data-role="button">Next</a></div>
 239                                         <div class="ui-block-a"><a data-role="button">Left</a></div>
 240                                         <div class="ui-block-b"><a data-role="button">1st Middle</a></div>
 241                                         <div class="ui-block-c"><a data-role="button">2nd Middle</a></div>
 242                                         <div class="ui-block-d"><a data-role="button">Right</a></div>
 243                                 </div>
 244                         </div>
 245                 </div>
 246                 <div data-role="content">
 247                         <p>Some content would be here</p>
 248                 </div>
 249         </div>
 250
 251         <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
 252                 <div data-role="header" data-position="fixed">
 253                         <h1>ControlBar</h1>
 254                 </div>
 255                 <div data-role="content">
 256                         <div class="content-primary">
 257                                 <ul data-role="listview">
 258                                         <li><a href="#Tabbar_Main">Tabbar Style</a></li>
 259                                         <li><a href="#Toolbar">Toolbar Style</a></li>
 260                                 </ul>
 261                         </div><!--/content-primary -->
 262                 </div>
 263         </div>
 264
 265         <!-- ControlBar Tabbar Style -->
 266         <div data-role="page" id="Tabbar_Main">
 267                 <div data-role="header" data-position="fixed">
 268                         <h1>Tabbar</h1>
 269                 </div>
 270                 <div data-role="content">
 271                         <div class="content-primary">
 272                         <ul data-role="listview">
 273                                 <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
 274                                 <li><a href="#Tabbar2Items">2 Items Style</a></li>
 275                                 <li><a href="#Tabbar3Items">3 Items Style</a></li>
 276                                 <li><a href="#Tabbar4Items">4 Items Style</a></li>
 277                                 <li><a href="#Tabbar5Items">5 Items Style</a></li>
 278                                 <li><a href="#TabbarText">Only Text Style</a></li>
 279                                 <li><a href="#TabbarIcon">Only Icon Style</a></li>
 280                         </ul>
 281                         </div><!--/content-primary -->
 282                 </div>
 283                 <div data-role="footer"data-position ="fixed">
 284                         <div data-role="controlbar" data-style="tabbar" >
 285                                 <ul>
 286                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 287                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 288                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 289                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 290                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 291                                 </ul>
 292                         </div>
 293                 </div>
 294         </div>
 295         <div data-role="page" id="TabbarInHeader">
 296                 <div data-role="header" data-position="fixed">
 297                         <div data-role="controlbar" data-style="tabbar" >
 298                                 <ul>
 299                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 300                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 301                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 302                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 303                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 304                                 </ul>
 305                         </div><!-- /navbar -->
 306                 </div>
 307                 <div data-role="content">
 308                         <div class="content-primary">
 309                                 <ul data-role="listview">
 310                                         <li><a href="#">Test</a></li>
 311                                 </ul>
 312                         </div><!--/content-primary -->
 313                 </div>
 314                 <div data-role="footer"data-position ="fixed">
 315                 </div>
 316         </div>
 317         <div data-role="page" id="Tabbar2Items">
 318                 <div data-role="header" data-position="fixed">
 319                         <h1>Tabbar</h1>
 320                 </div>
 321                 <div data-role="content">
 322                         <div class="content-primary">
 323                                 <ul data-role="listview">
 324                                         <li><a href="#">2 Items Style List</a></li>
 325                                 </ul>
 326                         </div><!--/content-primary -->
 327                 </div>
 328                 <div data-role="footer"data-position ="fixed">
 329                         <div data-role="controlbar" data-style="tabbar" >
 330                                 <ul>
 331                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 332                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 333                                 </ul>
 334                         </div><!-- /controlbar -->
 335                 </div>
 336         </div>
 337
 338         <div data-role="page" id="Tabbar3Items">
 339                 <div data-role="header" data-position="fixed">
 340                         <h1>Tabbar</h1>
 341                 </div>
 342                 <div data-role="content">
 343                         <div class="content-primary">
 344                                 <ul data-role="listview">
 345                                         <li><a href="#">3 Items Style List</a></li>
 346                                 </ul>
 347                         </div><!--/content-primary -->
 348                 </div>
 349                 <div data-role="footer"data-position ="fixed">
 350                         <div data-role="controlbar" data-style="tabbar" >
 351                                 <ul>
 352                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 353                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 354                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 355                                 </ul>
 356                         </div><!-- /controlbar -->
 357                 </div>
 358         </div>
 359
 360         <div data-role="page" id="Tabbar4Items">
 361                 <div data-role="header" data-position="fixed">
 362                         <h1>Tabbar</h1>
 363                 </div>
 364                 <div data-role="content">
 365                         <div class="content-primary">
 366                                 <ul data-role="listview">
 367                                         <li><a href="#">4 Items Style List</a></li>
 368                                 </ul>
 369                         </div><!--/content-primary -->
 370                 </div>
 371                 <div data-role="footer"data-position ="fixed">
 372                         <div data-role="controlbar" data-style="tabbar" >
 373                                 <ul>
 374                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 375                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 376                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 377                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 378                                 </ul>
 379                         </div><!-- /controlbar -->
 380                 </div>
 381         </div>
 382
 383         <div data-role="page" id="Tabbar5Items">
 384                 <div data-role="header" data-position="fixed">
 385                         <h1>Tabbar</h1>
 386                 </div>
 387                 <div data-role="content">
 388                         <div class="content-primary">
 389                                 <ul data-role="listview">
 390                                         <li><a href="#">5 Items Style List</a></li>
 391                                 </ul>
 392                         </div><!--/content-primary -->
 393                 </div>
 394                 <div data-role="footer"data-position ="fixed">
 395                         <div data-role="controlbar" data-style="tabbar" >
 396                                 <ul>
 397                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 398                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 399                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 400                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 401                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 402                                 </ul>
 403                         </div><!-- /controlbar -->
 404                 </div>
 405         </div>
 406
 407         <div data-role="page" id="TabbarText">
 408                 <div data-role="header" data-position="fixed">
 409                         <h1>Tabbar</h1>
 410                 </div>
 411                 <div data-role="content">
 412                         <div class="content-primary">
 413                                 <ul data-role="listview">
 414                                         <li><a href="#">Text Style List</a></li>
 415                                 </ul>
 416                         </div><!--/content-primary -->
 417                 </div>
 418                 <div data-role="footer"data-position ="fixed">
 419                         <div data-role="controlbar" data-style="tabbar" >
 420                                 <ul>
 421                                         <li><a href="#" class="ui-btn-active">Songs</a></li>
 422                                         <li><a href="#">Favorites</a></li>
 423                                         <li><a href="#">Group</a></li>
 424                                         <li><a href="#">Message</a></li>
 425                                         <li><a href="#">Contact</a></li>
 426                                 </ul>
 427                         </div><!-- /controlbar -->
 428                 </div>
 429         </div>
 430
 431         <div data-role="page" id="TabbarIcon">
 432                 <div data-role="header" data-position="fixed">
 433                         <h1>Tabbar</h1>
 434                 </div>
 435                 <div data-role="content">
 436                         <div class="content-primary">
 437                                 <ul data-role="listview">
 438                                         <li><a href="#">Icon Style List</a></li>
 439                                 </ul>
 440                         </div><!--/content-primary -->
 441                 </div>
 442                 <div data-role="footer"data-position ="fixed">
 443                         <div data-role="controlbar" data-style="tabbar" >
 444                                 <ul>
 445                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
 446                                         <li><a href="#" data-icon="ctrlbar-save" ></a></li>
 447                                         <li><a href="#" data-icon="ctrlbar-share" ></a></li>
 448                                         <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
 449                                         <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
 450                                 </ul>
 451                         </div><!-- /controlbar -->
 452                 </div>
 453         </div>
 454
 455         <!-- Toolbar Style -->
 456         <div data-role="page" id="Toolbar">
 457                 <div data-role="header" data-position="fixed">
 458                         <h1>Toolbar</h1>
 459                 </div>
 460                 <div data-role="content">
 461                         <div class="content-primary">
 462                                 <ul data-role="listview">
 463                                         <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
 464                                         <li><a href="#Toolbar2Items">2 Items Style</a></li>
 465                                         <li><a href="#Toolbar3Items">3 Items Style</a></li>
 466                                         <li><a href="#Toolbar4Items">4 Items Style</a></li>
 467                                         <li><a href="#Toolbar5Items">5 Items Style</a></li>
 468                                         <li><a href="#ToolbarText">Only Text Style</a></li>
 469                                         <li><a href="#ToolbarIcon">Only Icon Style</a></li>
 470                                 </ul>
 471                         </div><!--/content-primary -->
 472                 </div>
 473                 <div data-role="footer"data-position ="fixed">
 474                         <div data-role="controlbar" data-style="toolbar" >
 475                                 <ul>
 476                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 477                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 478                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 479                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 480                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 481                                 </ul>
 482                         </div><!-- /controlbar -->
 483                 </div>
 484         </div>
 485
 486         <div data-role="page" id="ToolbarInHeader">
 487                 <div data-role="header" data-position="fixed">
 488                         <div data-role="controlbar" data-style="toolbar" >
 489                                 <ul>
 490                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 491                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 492                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 493                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 494                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 495                                 </ul>
 496                         </div><!-- /controlbar -->
 497                 </div>
 498                 <div data-role="content">
 499                         <div class="content-primary">
 500                                 <ul data-role="listview">
 501                                         <li><a href="#">Test</a></li>
 502                                 </ul>
 503                         </div><!--/content-primary -->
 504                 </div>
 505                 <div data-role="footer"data-position ="fixed">
 506                 </div>
 507         </div>
 508
 509
 510         <div data-role="page" id="Toolbar2Items">
 511                 <div data-role="header" data-position="fixed">
 512                         <h1>Toolbar</h1>
 513                 </div>
 514                 <div data-role="content">
 515                         <div class="content-primary">
 516                                 <ul data-role="listview">
 517                                         <li><a href="#">2 Items Style</a></li>
 518                                 </ul>
 519                         </div><!--/content-primary -->
 520                 </div>
 521                 <div data-role="footer"data-position ="fixed">
 522                         <div data-role="controlbar" data-style="toolbar" >
 523                                 <ul>
 524                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 525                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 526                                 </ul>
 527                         </div><!-- /controlbar -->
 528                 </div>
 529         </div>
 530
 531         <div data-role="page" id="Toolbar3Items">
 532                 <div data-role="header" data-position="fixed">
 533                         <h1>Toolbar</h1>
 534                 </div>
 535                 <div data-role="content">
 536                         <div class="content-primary">
 537                                 <ul data-role="listview">
 538                                         <li><a href="#">3 Items Style</a></li>
 539                                 </ul>
 540                         </div><!--/content-primary -->
 541                 </div>
 542                 <div data-role="footer"data-position ="fixed">
 543                         <div data-role="controlbar" data-style="toolbar" >
 544                                 <ul>
 545                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 546                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 547                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 548                                 </ul>
 549                         </div><!-- /controlbar -->
 550                 </div>
 551         </div>
 552
 553         <div data-role="page" id="Toolbar4Items">
 554                 <div data-role="header" data-position="fixed">
 555                         <h1>Toolbar</h1>
 556                 </div>
 557                 <div data-role="content">
 558                         <div class="content-primary">
 559                                 <ul data-role="listview">
 560                                         <li><a href="#">4 Items Style</a></li>
 561                                 </ul>
 562                         </div><!--/content-primary -->
 563                 </div>
 564                 <div data-role="footer"data-position ="fixed">
 565                         <div data-role="controlbar" data-style="toolbar" >
 566                                 <ul>
 567                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 568                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 569                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 570                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 571                                 </ul>
 572                         </div><!-- /controlbar -->
 573                 </div>
 574         </div>
 575
 576         <div data-role="page" id="Toolbar5Items">
 577                 <div data-role="header" data-position="fixed">
 578                         <h1>Toolbar</h1>
 579                 </div>
 580                 <div data-role="content">
 581                         <div class="content-primary">
 582                                 <ul data-role="listview">
 583                                         <li><a href="#">5 Items Style</a></li>
 584                                 </ul>
 585                         </div><!--/content-primary -->
 586                 </div>
 587                 <div data-role="footer"data-position ="fixed">
 588                         <div data-role="controlbar" data-style="toolbar" >
 589                                 <ul>
 590                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 591                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 592                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 593                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 594                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 595                                 </ul>
 596                         </div><!-- /controlbar -->
 597                 </div>
 598         </div>
 599
 600         <div data-role="page" id="ToolbarText">
 601                 <div data-role="header" data-position="fixed">
 602                         <h1>Toolbar</h1>
 603                 </div>
 604                 <div data-role="content">
 605                         <div class="content-primary">
 606                                 <ul data-role="listview">
 607                                         <li><a href="#">Text Style</a></li>
 608                                 </ul>
 609                         </div><!--/content-primary -->
 610                 </div>
 611                 <div data-role="footer"data-position ="fixed">
 612                         <div data-role="controlbar" data-style="toolbar" >
 613                                 <ul>
 614                                         <li><a href="#" class="ui-btn-active">Songs</a></li>
 615                                         <li><a href="#">Favorites</a></li>
 616                                         <li><a href="#">Group</a></li>
 617                                         <li><a href="#">Message</a></li>
 618                                         <li><a href="#">Contact</a></li>
 619                                 </ul>
 620                         </div><!-- /controlbar -->
 621                 </div>
 622         </div>
 623
 624         <div data-role="page" id="ToolbarIcon">
 625                 <div data-role="header" data-position="fixed">
 626                         <h1>Toolbar</h1>
 627                 </div>
 628                 <div data-role="content">
 629                         <div class="content-primary">
 630                                 <ul data-role="listview">
 631                                         <li><a href="#">Only Icon Style</a></li>
 632                                 </ul>
 633                         </div><!--/content-primary -->
 634                 </div>
 635                 <div data-role="footer"data-position ="fixed">
 636                         <div data-role="controlbar" data-style="toolbar" >
 637                                 <ul>
 638                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
 639                                         <li><a href="#" data-icon="ctrlbar-save" ></a></li>
 640                                         <li><a href="#" data-icon="ctrlbar-share" ></a></li>
 641                                         <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
 642                                         <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
 643                                 </ul>
 644                         </div><!-- /controlbar -->
 645                 </div>
 646         </div>
 647         <!-- Toolbar Style -->
 648
 649         <!-- Mixed Style -->
 650
 651         <div data-role="page" id="Mixed" >
 652                 <div data-role="header" data-position="fixed">
 653                         <h1>Mixed Toolbar</h1>
 654                 </div>
 655                 <div data-role="content">
 656                         <p>Not Supported for winset</p>
 657                 </div>
 658         </div>
 659         <!-- Mixed Style -->
 660
 661         <!-- ControlBar Left Style -->
 662         <div data-role="page" id="ControlBarVerticalLeft" >
 663                 <div data-role="header"  data-position="fixed">
 664                         <h1>Vertical Toolbar</h1>
 665                 </div>
 666                 <div data-role="content">
 667                         <ul data-role="listview" data-icon="1line-textonly">
 668                                 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
 669                                 <li><a href="#notImplemented">Button</a></li>
 670                                 <li><a href="#notImplemented">Check</a></li>
 671                         </ul>
 672                         <div data-role="controlbar" data-style="left">
 673                                 <ul>
 674                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 675                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 676                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 677                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 678                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 679                                 </ul>
 680                         </div><!-- /controlbar -->
 681                 </div>
 682         </div>
 683         <!-- ControlBar Left Style -->
 684
 685         <!-- ControlBar Right Style -->
 686         <div data-role="page" id="ControlBarVerticalRight" >
 687                 <div data-role="header"  data-position="fixed">
 688                         <h1>Vertical Toolbar</h1>
 689                 </div>
 690                 <div data-role="content">
 691                         <ul data-role="listview" data-icon="1line-textonly">
 692                                 <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
 693                                 <li><a href="#notImplemented">Button</a></li>
 694                         </ul>
 695                         <div data-role="controlbar" data-style="right">
 696                                 <ul>
 697                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 698                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 699                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 700                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 701                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 702                                 </ul>
 703                         </div><!-- /controlbar -->
 704                 </div>
 705         </div>
 706         <!-- ControlBar Right Style -->
 707
 708         <!-- ControlBar Animation -->
 709         <div data-role="page" id="ControlBarAnimation" >
 710                 <div data-role="header" data-position="fixed">
 711                         <h1>Vertical Toolbar</h1>
 712                 </div>
 713                 <div data-role="content">
 714                 </div>
 715                 <div data-role="footer"data-position ="fixed">
 716                         <div data-role="controlbar" data-style="tabbar">
 717                                 <ul>
 718                                         <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 719                                         <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
 720                                         <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
 721                                         <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
 722                                         <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
 723                                 </ul>
 724                         </div><!-- /controlbar -->
 725                 </div>
 726         </div>
 727         <!-- ControlBar Animation -->
 728
 729         <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
 730                 <div data-role="header" data-position="fixed">
 731                         <h1>ControlBar</h1>
 732                 </div>
 733                 <div data-role="content">
 734                         <div class="content-primary">
 735                                 <ul data-role="listview">
 736                                         <li><a href="#normalstyle">Normal style title</a></li>
 737                                         <li><a href="#extendedstyle">Extended style title</a></li>
 738                                 </ul>
 739                         </div><!--/content-primary -->
 740                 </div>
 741         </div>
 742
 743         <div data-role="page" id="normalstyle" data-add-back-btn="true">
 744                 <div data-role="header" data-position="fixed">
 745                         <h1>Normal Title</h1>
 746                 </div>
 747                 <div data-role="content">
 748                         <div class="content-primary">
 749                                 <ul data-role="listview">
 750                                         <li><a href="#normal1btn">Title 1 button</a></li>
 751                                         <li><a href="#normal2btn">Title 2 button</a></li>
 752                                         <li><a href="#normal3btn">Title 3 button</a></li>
 753                                 </ul>
 754                         </div><!--/content-primary -->
 755                 </div>
 756         </div>
 757
 758         <div data-role="page" id="normal1btn">
 759                 <div data-role="header" data-position="fixed">
 760                         <a>Text1</a>
 761                         <h1>Normal Title</h1>
 762                 </div>
 763                 <div data-role="content">
 764                         <div class="content-primary">
 765                                 <ul data-role="listview">
 766                                         <li><a href="#normal1btn">Title 1 button</a></li>
 767                                         <li><a href="#normal2btn">Title 2 button</a></li>
 768                                         <li><a href="#normal3btn">Title 3 button</a></li>
 769                                 </ul>
 770                         </div><!--/content-primary -->
 771                 </div>
 772         </div>
 773
 774         <div data-role="page" id="normal2btn">
 775                 <div data-role="header" data-position="fixed">
 776                         <a>Text1</a>
 777                         <h1>Normal Title</h1>
 778                         <a>Text2</a>
 779                 </div>
 780                 <div data-role="content">
 781                         <div class="content-primary">
 782                                 <ul data-role="listview">
 783                                         <li><a href="#normal1btn">Title 1 button</a></li>
 784                                         <li><a href="#normal2btn">Title 2 button</a></li>
 785                                         <li><a href="#normal3btn">Title 3 button</a></li>
 786                                 </ul>
 787                         </div><!--/content-primary -->
 788                 </div>
 789         </div>
 790
 791         <div data-role="page" id="normal3btn" data-add-back-btn="true">
 792                 <div data-role="header" data-position="fixed">
 793                         <a>Text1</a>
 794                         <h1>Normal Title</h1>
 795                         <a>Text2</a>
 796                         <a>Text3</a>
 797                 </div>
 798                 <div data-role="content">
 799                         <div class="content-primary">
 800                                 <ul data-role="listview">
 801                                         <li><a href="#normal1btn">Title 1 button</a></li>
 802                                         <li><a href="#normal2btn">Title 2 button</a></li>
 803                                         <li><a href="#normal3btn">Title 3 button</a></li>
 804                                 </ul>
 805                         </div><!--/content-primary -->
 806                 </div>
 807         </div>
 808
 809         <div data-role="page" id="extendedstyle"  data-add-back-btn="true">
 810                 <div data-role="header" data-position="fixed">
 811                         <h1>Extended Title</h1>
 812                 </div>
 813                 <div data-role="content">
 814                         <div class="content-primary">
 815                                 <ul data-role="listview">
 816                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 817                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 818                                         <li><a href="#extendedstyle4btn">4 Button</a></li>
 819                                         <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
 820                                 </ul>
 821                         </div><!--/content-primary -->
 822                 </div>
 823         </div>
 824
 825         <div data-role="page" id="extendedstyle2btn">
 826                 <div data-role="header" data-position="fixed">
 827                         <a>Text</a>
 828                         <h1>Extended Title 2 Button </h1>
 829                         <a>Text</a>
 830                         <div data-role="fieldcontain">
 831                                 <fieldset data-role="controlgroup" data-type="horizontal">
 832                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
 833                                         <label for="segment1">All</label>
 834                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
 835                                         <label for="segment2">Call</label>
 836                                 </fieldset>
 837                         </div>
 838                 </div>
 839                 <div data-role="content">
 840                         <div class="content-primary">
 841                                 <ul data-role="listview">
 842                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 843                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 844                                 </ul>
 845                         </div><!--/content-primary -->
 846                 </div>
 847         </div>
 848
 849         <div data-role="page" id="extendedstyle3btn">
 850                 <div data-role="header" data-position="fixed">
 851                         <a>Text</a>
 852                         <h1>Extended Title 3 Button </h1>
 853                         <a>Text</a>
 854                         <div data-role="fieldcontain">
 855                                 <fieldset data-role="controlgroup" data-type="horizontal">
 856                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
 857                                         <label for="segment71">All</label>
 858                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
 859                                         <label for="segment72">Call</label>
 860                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
 861                                         <label for="segment73">Message</label>
 862                                 </fieldset>
 863                         </div>
 864                 </div>
 865                 <div data-role="content">
 866                         <div class="content-primary">
 867                                 <ul data-role="listview">
 868                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 869                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 870                                 </ul>
 871                         </div><!--/content-primary -->
 872                 </div>
 873         </div>
 874
 875         <div data-role="page" id="extendedstyle4btn">
 876                 <div data-role="header" data-position="fixed">
 877                         <h1>Extended Title 4 Button </h1>
 878                         <div data-role="fieldcontain">
 879                                 <fieldset data-role="controlgroup" data-type="horizontal">
 880                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
 881                                         <label for="segment71">All</label>
 882                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
 883                                         <label for="segment72">Call</label>
 884                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
 885                                         <label for="segment73">Message</label>
 886                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
 887                                         <label for="segment74">Contact</label>
 888                                 </fieldset>
 889                         </div>
 890                 </div>
 891                 <div data-role="content">
 892                         <div class="content-primary">
 893                                 <ul data-role="listview">
 894                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 895                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 896                                 </ul>
 897                         </div><!--/content-primary -->
 898                 </div>
 899         </div>
 900
 901         <div data-role="page" id="footerExtendedStyle">
 902                 <div data-role="header" data-position="fixed">
 903                         <h1>Extended Footer style</h1>
 904                 </div>
 905                 <div data-role="content">
 906                         <p> test page </p>
 907                 </div>
 908                 <div data-role="footer" data-position="fixed">
 909                         <div data-role="fieldcontain">
 910                                 <fieldset data-role="controlgroup" data-type="horizontal">
 911                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
 912                                         <label for="segment1">All</label>
 913                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
 914                                         <label for="segment2">Call</label>
 915                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
 916                                         <label for="segment3">Contact</label>
 917                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
 918                                         <label for="segment4">Index</label>
 919                                 </fieldset>
 920                         </div>
 921                         <a>Edit</a>
 922                 </div>
 923         </div>
 924
 925         <div data-role="page" id="multibuttonentry">
 926                 <div data-role="header" >
 927                         <h1>Multi-button Entry</h1>
 928                 </div>
 929                 <div data-role="content">
 930                         <div data-role="multibuttonentry" data-listuri="addressbook"></div>
 931                         <br>
 932                         <ul data-role="listview">
 933                                 <li><a id='MBTaddItemTest'>Append Item</a></li>
 934                                 <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
 935                                 <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
 936                                 <li><a id='MBTgetInputTextTest'>Get input text</a></li>
 937                                 <li><a id='MBTselectItemTest'>Select 1</a></li>
 938                                 <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
 939                                 <li><a id='MBTlengthTest'>Length</a></li>
 940                                 <li><a id='MBTfocusOutTest'>Grouping On</a></li>
 941                                 <li><a id='MBTfocusInTest'>Grouping Off</a></li>
 942                                 <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
 943                         </ul>
 944                 </div>
 945         </div>
 946         <div data-role="page"  id="addressbook" data-footer-Exist="false" >
 947                 <div data-role="header">
 948                         <h1>Address Book</h1>
 949                         <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
 950                 </div>
 951                 <div data-role="content" id="contentList">
 952                         <ul data-role="listview">
 953                                 <li data-role="list-divider">A</li>
 954                                 <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
 955                                 <li><a href="#multibuttonentry">Alex Wickerham</a></li>
 956                                 <li><a href="#multibuttonentry">Avery Johnson</a></li>
 957                                 <li data-role="list-divider">B</li>
 958                                 <li><a href="#multibuttonentry">Bob Cabot</a></li>
 959                                 <li data-role="list-divider">C</li>
 960                                 <li><a href="#multibuttonentry">Caleb Booth</a></li>
 961                                 <li><a href="#multibuttonentry">Christopher Adams</a></li>
 962                                 <li><a href="#multibuttonentry">Culver James</a></li>
 963                                 <li data-role="list-divider">D</li>
 964                                 <li><a href="#multibuttonentry">David Walsh</a></li>
 965                                 <li><a href="#multibuttonentry">Drake Alfred</a></li>
 966                                 <li data-role="list-divider">E</li>
 967                                 <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
 968                                 <li><a href="#multibuttonentry">Emery Parker</a></li>
 969                                 <li><a href="#multibuttonentry">Enid Voldon</a></li>
 970                                 <li data-role="list-divider">F</li>
 971                                 <li><a href="#multibuttonentry">Francis Wall</a></li>
 972                                 <li data-role="list-divider">G</li>
 973                                 <li><a href="#multibuttonentry">Graham Smith</a></li>
 974                                 <li><a href="#multibuttonentry">Greta Peete</a></li>
 975                                 <li data-role="list-divider">H</li>
 976                                 <li><a href="#multibuttonentry">Harvey Walls</a></li>
 977                                 <li data-role="list-divider">M</li>
 978                                 <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
 979                                 <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
 980                                 <li data-role="list-divider">N</li>
 981                                 <li><a href="#multibuttonentry">Nathan Williams</a></li>
 982                                 <li data-role="list-divider">P</li>
 983                                 <li><a href="#multibuttonentry">Paul Baker</a></li>
 984                                 <li><a href="#multibuttonentry">Pete Mason</a></li>
 985                                 <li data-role="list-divider">R</li>
 986                                 <li><a href="#multibuttonentry">Rod Tarker</a></li>
 987                                 <li data-role="list-divider">S</li>
 988                                 <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
 989                         </ul>
 990                 </div> <!--/content -->
 991         </div> <!--/page -->
 992 </body>
 993 </html>