widgets/controlbar/controlbar.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta charset="utf-8" />
   5                 <meta name="viewport" content="width=device-width, initial-scale=1" />
   6                 <link rel="stylesheet" href="themes/default/" />
   7                 <script src="js/jquery.js"></script>
   8                 <script src="js/"></script>
   9                 <script src="theme.js"></script>
  10                 <script src="js/jquery.mobile.forms.button.extension.js"></script>
  11         </head>
  12         <body>
  13                 <div data-role="page">
  14                         <div data-role="header" data-position="fixed">
  15                                 <h1>ControlBar Demo</h1>
  16                         </div>
  17                         <div data-role="content">
  18                                 <div class="content-primary">
  19                                         <ul data-role="listview">
  20                                                 <li data-role="list-divider">Header</li>
  21                                                 <li><a href="controlbar_text.html">Tab(text) only</a></li>
  22                                                 <li><a href="controlbar_icon_text.html">Tab(icon + text) only</a></li>
  23                                                 <li><a href="controlbar_icon.html">Tab(icon) only</a></li>
  24                                                 <li><a href="controlbar_title_text.html">Title + Tab(text)</a></li>
  25                                                 <li><a href="controlbar_title_icon.html">Title Tab(icon) only</a></li>
  26                                                 <li><a href="controlbar_scrolling.html">Scrolling interation</a></li>
  27                                                 <li data-role="list-divider">Footer</li>
  28                                                 <li><a href="controlbar_footer_icon.html">[Progressing...]Footer + Tab(text)</a></li>
  29                                                 <li><a href="controlbar_footer.html">[Progressing...]Footer + Tab(text)</a></li>
  30                                                 <li><a href="controlbar_footer_more.html">[Progressing...]Footer + more + Tab(text)</a></li>
  31                                                 <li><a href="controlbar_footer_segment.html">Footer + SegmentTab(text)</a></li>
  32                                                 <li><a href="controlbar_footer_segment_more.html">Footer + more + SegmentTab(text)</a></li>
  33                                                 <li data-role="list-divider">Old version</li>
  34                                                 <li><a href="#Tabbar_Main">Tabbar Style</a></li>
  35                                                 <li><a href="#Toolbar">Toolbar Style</a></li>
  36                                         </ul>
  37                                 </div>
  38                                 <!--/content-primary -->
  39                         </div>
  40                 </div>
  41                 <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
  42                         <div data-role="header" data-position="fixed">
  43                                 <h1>ControlBar</h1>
  44                         </div>
  45                         <div data-role="content">
  46                                 <div class="content-primary">
  47                                         <ul data-role="listview">
  48                                                 <li><a href="#Tabbar_Main">Tabbar Style</a></li>
  49                                                 <li><a href="#Toolbar">Toolbar Style</a></li>
  50                                         </ul>
  51                                 </div>
  52                                 <!--/content-primary -->
  53                         </div>
  54                 </div>
  55                 <!-- ControlBar Tabbar Style -->
  56                 <div data-role="page" id="Tabbar_Main">
  57                         <div data-role="header" data-position="fixed">
  58                                 <h1>Tabbar</h1>
  59                         </div>
  60                         <div data-role="content">
  61                                 <div class="content-primary">
  62                                         <ul data-role="listview">
  63                                                 <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
  64                                                 <li><a href="#Tabbar2Items">2 Items Style</a></li>
  65                                                 <li><a href="#Tabbar3Items">3 Items Style</a></li>
  66                                                 <li><a href="#Tabbar4Items">4 Items Style</a></li>
  67                                                 <li><a href="#Tabbar5Items">5 Items Style</a></li>
  68                                                 <li><a href="#TabbarText">Only Text Style</a></li>
  69                                                 <li><a href="#TabbarIcon">Only Icon Style</a></li>
  70                                         </ul>
  71                                 </div>
  72                                 <!--/content-primary -->
  73                         </div>
  74                         <div data-role="footer" data-position="fixed">
  75                                 <div data-role="tabbar" data-style="tabbar">
  76                                         <ul>
  77                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
  78                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
  79                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
  80                                                 <li><a href="#" data-icon="ctrlbar-timeline">Timeline</a></li>
  81                                                 <li><a href="#" data-icon="ctrlbar-world_clock">WorldClock</a></li>
  82                                         </ul>
  83                                 </div>
  84                         </div>
  85                 </div>
  86                 <div data-role="page" id="TabbarInHeader">
  87                         <div data-role="header" data-position="fixed">
  88                                 <div data-role="tabbar" data-style="tabbar">
  89                                         <ul>
  90                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
  91                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
  92                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
  93                                                 <li><a href="#" data-icon="ctrlbar-timeline">Timeline</a></li>
  94                                                 <li><a href="#" data-icon="ctrlbar-world_clock">WorldClock</a></li>
  95                                         </ul>
  96                                 </div>
  97                                 <!-- /navbar -->
  98                         </div>
  99                         <div data-role="content">
 100                                 <div class="content-primary">
 101                                         <ul data-role="listview">
 102                                                 <li><a href="#">Test</a></li>
 103                                         </ul>
 104                                 </div>
 105                                 <!--/content-primary -->
 106                         </div>
 107                         <div data-role="footer" data-position="fixed">
 108                         </div>
 109                 </div>
 110                 <div data-role="page" id="Tabbar2Items">
 111                         <div data-role="header" data-position="fixed">
 112                                 <h1>Tabbar</h1>
 113                         </div>
 114                         <div data-role="content">
 115                                 <div class="content-primary">
 116                                         <ul data-role="listview">
 117                                                 <li><a href="#">2 Items Style List</a></li>
 118                                         </ul>
 119                                 </div>
 120                                 <!--/content-primary -->
 121                         </div>
 122                         <div data-role="footer" data-position="fixed">
 123                                 <div data-role="tabbar" data-style="tabbar">
 124                                         <ul>
 125                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 126                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 127                                         </ul>
 128                                 </div>
 129                                 <!-- /controlbar -->
 130                         </div>
 131                 </div>
 132                 <div data-role="page" id="Tabbar3Items">
 133                         <div data-role="header" data-position="fixed">
 134                                 <h1>Tabbar</h1>
 135                         </div>
 136                         <div data-role="content">
 137                                 <div class="content-primary">
 138                                         <ul data-role="listview">
 139                                                 <li><a href="#">3 Items Style List</a></li>
 140                                         </ul>
 141                                 </div>
 142                                 <!--/content-primary -->
 143                         </div>
 144                         <div data-role="footer" data-position="fixed">
 145                                 <div data-role="tabbar" data-style="tabbar">
 146                                         <ul>
 147                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 148                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 149                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
 150                                         </ul>
 151                                 </div>
 152                                 <!-- /controlbar -->
 153                         </div>
 154                 </div>
 155                 <div data-role="page" id="Tabbar4Items">
 156                         <div data-role="header" data-position="fixed">
 157                                 <h1>Tabbar</h1>
 158                         </div>
 159                         <div data-role="content">
 160                                 <div class="content-primary">
 161                                         <ul data-role="listview">
 162                                                 <li><a href="#">4 Items Style List</a></li>
 163                                         </ul>
 164                                 </div>
 165                                 <!--/content-primary -->
 166                         </div>
 167                         <div data-role="footer" data-position="fixed">
 168                                 <div data-role="tabbar" data-style="tabbar">
 169                                         <ul>
 170                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 171                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 172                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
 173                                                 <li><a href="#" data-icon="ctrlbar-timeline">Timeline</a></li>
 174                                         </ul>
 175                                 </div>
 176                                 <!-- /controlbar -->
 177                         </div>
 178                 </div>
 179                 <div data-role="page" id="Tabbar5Items">
 180                         <div data-role="header" data-position="fixed">
 181                                 <h1>Tabbar</h1>
 182                         </div>
 183                         <div data-role="content">
 184                                 <div class="content-primary">
 185                                         <ul data-role="listview">
 186                                                 <li><a href="#">5 Items Style List</a></li>
 187                                         </ul>
 188                                 </div>
 189                                 <!--/content-primary -->
 190                         </div>
 191                         <div data-role="footer" data-position="fixed">
 192                                 <div data-role="tabbar" data-style="tabbar">
 193                                         <ul>
 194                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 195                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 196                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
 197                                                 <li><a href="#" data-icon="ctrlbar-timeline">Timeline</a></li>
 198                                                 <li><a href="#" data-icon="ctrlbar-world_clock">WorldClock</a></li>
 199                                         </ul>
 200                                 </div>
 201                                 <!-- /controlbar -->
 202                         </div>
 203                 </div>
 204                 <div data-role="page" id="TabbarText">
 205                         <div data-role="header" data-position="fixed">
 206                                 <h1>Tabbar</h1>
 207                         </div>
 208                         <div data-role="content">
 209                                 <div class="content-primary">
 210                                         <ul data-role="listview">
 211                                                 <li><a href="#">Text Style List</a></li>
 212                                         </ul>
 213                                 </div>
 214                                 <!--/content-primary -->
 215                         </div>
 216                         <div data-role="footer" data-position="fixed">
 217                                 <div data-role="tabbar" data-style="tabbar">
 218                                         <ul>
 219                                                 <li><a href="#" class="ui-btn-active">Songs</a></li>
 220                                                 <li><a href="#">Favorites</a></li>
 221                                                 <li><a href="#">Group</a></li>
 222                                                 <li><a href="#">Message</a></li>
 223                                                 <li><a href="#">Contact</a></li>
 224                                         </ul>
 225                                 </div>
 226                                 <!-- /controlbar -->
 227                         </div>
 228                 </div>
 229                 <div data-role="page" id="TabbarIcon">
 230                         <div data-role="header" data-position="fixed">
 231                                 <h1>Tabbar</h1>
 232                         </div>
 233                         <div data-role="content">
 234                                 <div class="content-primary">
 235                                         <ul data-role="listview">
 236                                                 <li><a href="#">Icon Style List</a></li>
 237                                         </ul>
 238                                 </div>
 239                                 <!--/content-primary -->
 240                         </div>
 241                         <div data-role="footer" data-position="fixed">
 242                                 <div data-role="tabbar" data-style="tabbar">
 243                                         <ul>
 244                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
 245                                                 <li><a href="#" data-icon="ctrlbar-save"></a></li>
 246                                                 <li><a href="#" data-icon="ctrlbar-share"></a></li>
 247                                                 <li><a href="#" data-icon="ctrlbar-timeline"></a></li>
 248                                                 <li><a href="#" data-icon="ctrlbar-world_clock"></a></li>
 249                                         </ul>
 250                                 </div>
 251                                 <!-- /controlbar -->
 252                         </div>
 253                 </div>
 254                 <!-- Toolbar Style -->
 255                 <div data-role="page" id="Toolbar">
 256                         <div data-role="header" data-position="fixed">
 257                                 <h1>Toolbar</h1>
 258                         </div>
 259                         <div data-role="content">
 260                                 <div class="content-primary">
 261                                         <ul data-role="listview">
 262                                                 <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
 263                                                 <li><a href="#Toolbar2Items">2 Items Style</a></li>
 264                                                 <li><a href="#Toolbar3Items">3 Items Style</a></li>
 265                                                 <li><a href="#Toolbar4Items">4 Items Style</a></li>
 266                                                 <li><a href="#Toolbar5Items">5 Items Style</a></li>
 267                                                 <li><a href="#ToolbarText">Only Text Style</a></li>
 268                                                 <li><a href="#ToolbarIcon">Only Icon Style</a></li>
 269                                         </ul>
 270                                 </div>
 271                                 <!--/content-primary -->
 272                         </div>
 273                         <div data-role="footer" data-position="fixed">
 274                                 <div data-role="tabbar" data-style="toolbar">
 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>
 283                                 <!-- /controlbar -->
 284                         </div>
 285                 </div>
 286                 <div data-role="page" id="ToolbarInHeader">
 287                         <div data-role="header" data-position="fixed">
 288                                 <div data-role="tabbar" data-style="toolbar">
 289                                         <ul>
 290                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 291                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 292                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
 293                                                 <li><a href="#" data-icon="ctrlbar-timeline">Timeline</a></li>
 294                                                 <li><a href="#" data-icon="ctrlbar-world_clock">WorldClock</a></li>
 295                                         </ul>
 296                                 </div>
 297                                 <!-- /controlbar -->
 298                         </div>
 299                         <div data-role="content">
 300                                 <div class="content-primary">
 301                                         <ul data-role="listview">
 302                                                 <li><a href="#">Test</a></li>
 303                                         </ul>
 304                                 </div>
 305                                 <!--/content-primary -->
 306                         </div>
 307                         <div data-role="footer" data-position="fixed">
 308                         </div>
 309                 </div>
 310                 <div data-role="page" id="Toolbar2Items">
 311                         <div data-role="header" data-position="fixed">
 312                                 <h1>Toolbar</h1>
 313                         </div>
 314                         <div data-role="content">
 315                                 <div class="content-primary">
 316                                         <ul data-role="listview">
 317                                                 <li><a href="#">2 Items Style</a></li>
 318                                         </ul>
 319                                 </div>
 320                                 <!--/content-primary -->
 321                         </div>
 322                         <div data-role="footer" data-position="fixed">
 323                                 <div data-role="tabbar" data-style="toolbar">
 324                                         <ul>
 325                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 326                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 327                                         </ul>
 328                                 </div>
 329                                 <!-- /controlbar -->
 330                         </div>
 331                 </div>
 332                 <div data-role="page" id="Toolbar3Items">
 333                         <div data-role="header" data-position="fixed">
 334                                 <h1>Toolbar</h1>
 335                         </div>
 336                         <div data-role="content">
 337                                 <div class="content-primary">
 338                                         <ul data-role="listview">
 339                                                 <li><a href="#">3 Items Style</a></li>
 340                                         </ul>
 341                                 </div>
 342                                 <!--/content-primary -->
 343                         </div>
 344                         <div data-role="footer" data-position="fixed">
 345                                 <div data-role="tabbar" data-style="toolbar">
 346                                         <ul>
 347                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 348                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 349                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
 350                                         </ul>
 351                                 </div>
 352                                 <!-- /controlbar -->
 353                         </div>
 354                 </div>
 355                 <div data-role="page" id="Toolbar4Items">
 356                         <div data-role="header" data-position="fixed">
 357                                 <h1>Toolbar</h1>
 358                         </div>
 359                         <div data-role="content">
 360                                 <div class="content-primary">
 361                                         <ul data-role="listview">
 362                                                 <li><a href="#">4 Items Style</a></li>
 363                                         </ul>
 364                                 </div>
 365                                 <!--/content-primary -->
 366                         </div>
 367                         <div data-role="footer" data-position="fixed">
 368                                 <div data-role="tabbar" data-style="toolbar">
 369                                         <ul>
 370                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 371                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 372                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
 373                                                 <li><a href="#" data-icon="ctrlbar-timeline">Timeline</a></li>
 374                                         </ul>
 375                                 </div>
 376                                 <!-- /controlbar -->
 377                         </div>
 378                 </div>
 379                 <div data-role="page" id="Toolbar5Items">
 380                         <div data-role="header" data-position="fixed">
 381                                 <h1>Toolbar</h1>
 382                         </div>
 383                         <div data-role="content">
 384                                 <div class="content-primary">
 385                                         <ul data-role="listview">
 386                                                 <li><a href="#">5 Items Style</a></li>
 387                                         </ul>
 388                                 </div>
 389                                 <!--/content-primary -->
 390                         </div>
 391                         <div data-role="footer" data-position="fixed">
 392                                 <div data-role="tabbar" data-style="toolbar">
 393                                         <ul>
 394                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
 395                                                 <li><a href="#" data-icon="ctrlbar-save">Save</a></li>
 396                                                 <li><a href="#" data-icon="ctrlbar-share">Share</a></li>
 397                                                 <li><a href="#" data-icon="ctrlbar-timeline">Timeline</a></li>
 398                                                 <li><a href="#" data-icon="ctrlbar-world_clock">WorldClock</a></li>
 399                                         </ul>
 400                                 </div>
 401                                 <!-- /controlbar -->
 402                         </div>
 403                 </div>
 404                 <div data-role="page" id="ToolbarText">
 405                         <div data-role="header" data-position="fixed">
 406                                 <h1>Toolbar</h1>
 407                         </div>
 408                         <div data-role="content">
 409                                 <div class="content-primary">
 410                                         <ul data-role="listview">
 411                                                 <li><a href="#">Text Style</a></li>
 412                                         </ul>
 413                                 </div>
 414                                 <!--/content-primary -->
 415                         </div>
 416                         <div data-role="footer" data-position="fixed">
 417                                 <div data-role="tabbar" data-style="toolbar">
 418                                         <ul>
 419                                                 <li><a href="#" class="ui-btn-active">Songs</a></li>
 420                                                 <li><a href="#">Favorites</a></li>
 421                                                 <li><a href="#">Group</a></li>
 422                                                 <li><a href="#">Message</a></li>
 423                                                 <li><a href="#">Contact</a></li>
 424                                         </ul>
 425                                 </div>
 426                                 <!-- /controlbar -->
 427                         </div>
 428                 </div>
 429                 <div data-role="page" id="ToolbarIcon">
 430                         <div data-role="header" data-position="fixed">
 431                                 <h1>Toolbar</h1>
 432                         </div>
 433                         <div data-role="content">
 434                                 <div class="content-primary">
 435                                         <ul data-role="listview">
 436                                                 <li><a href="#">Only Icon Style</a></li>
 437                                         </ul>
 438                                 </div>
 439                                 <!--/content-primary -->
 440                         </div>
 441                         <div data-role="footer" data-position="fixed">
 442                                 <div data-role="tabbar" data-style="toolbar">
 443                                         <ul>
 444                                                 <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
 445                                                 <li><a href="#" data-icon="ctrlbar-save"></a></li>
 446                                                 <li><a href="#" data-icon="ctrlbar-share"></a></li>
 447                                                 <li><a href="#" data-icon="ctrlbar-timeline"></a></li>
 448                                                 <li><a href="#" data-icon="ctrlbar-world_clock"></a></li>
 449                                         </ul>
 450                                 </div>
 451                                 <!-- /controlbar -->
 452                         </div>
 453                 </div>
 454                 <!-- Toolbar Style -->
 455         </body>
 456 </html>