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