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