demos/tizen-gray/index.html

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