demos/tizen-winsets/index.html

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