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