demos/tizen-winsets/index.html

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