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