widgets/tabbar/tabbar_scrolling.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" data-add-back-btn="true">
  15         <div data-role="header" data-position="fixed">
  16                 <h1>Tabbar Scroll</h1>
  17
  18                 <div style="white-space:nowrap;" data-scroll="x">
  19                 <div class="ui-scrollview-view" style="display:inline-block">
  20                         <div data-role="tabbar" data-default-list="4">
  21                                 <ul>
  22                                         <li><a href="#tabbar_persist_c">Next0</a></li>
  23                                         <li><a href="#tabbar_persist_a">Menu1</a></li>
  24                                         <li><a href="#tabbar_persist_b">Save2</a></li>
  25                                         <li><a href="#tabbar_persist_c">Next3</a></li>
  26                                         <li><a href="#tabbar_persist_a">Menu4</a></li>
  27                                         <li><a href="#tabbar_persist_b">Save5</a></li>
  28                                         <li><a href="#tabbar_persist_c">Next6</a></li>
  29                                         <li><a href="#tabbar_persist_a">Menu7</a></li>
  30                                         <li><a href="#tabbar_persist_b">Save8</a></li>
  31                                         <li><a href="#tabbar_persist_c">Next9</a></li>
  32                                         <li><a href="#tabbar_persist_a">Menu10</a></li>
  33                                         <li><a href="#tabbar_persist_b">Save11</a></li>
  34                                 </div>
  35                         </div>
  36                 </ul>
  37         </div><!-- /tabbar -->
  38         </div>
  39
  40         <div data-role="content">
  41                 <p>Scroll header tabbar left/right </p>
  42         </div>
  43
  44         <div data-role="footer">
  45         </div>
  46 </div>
  47
  48 </body>
  49 </html>