widgets/tabbar/tabbar_scrolling.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.min.js"></script>
   6         <script src="../../configure.js"></script>
   7         <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8         <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                         data-framework-theme="tizen-white"
  10                         data-framework-viewport-width="device-width">
  11         </script>
  12         <script src="../../main.js"></script>
  13         <title>Tizen UI - Tabbar</title>
  14         <!-- for compatibility test -->
  15         <meta name="apple-mobile-web-app-capable" content="yes" />
  16         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  17         <link rel="apple-touch-icon" href="../../icon-tizen.png" />
  18 </head>
  19 <body>
  20
  21 <div data-role="page" data-add-back-btn="true">
  22         <div data-role="header" data-position="fixed">
  23                 <h1>TABBAR SCROLL</h1>
  24
  25                 <div style="white-space:nowrap;" data-scroll="x">
  26                 <div class="ui-scrollview-view" style="display:inline-block">
  27                         <div data-role="tabbar" data-default-list="4">
  28                                 <ul>
  29                                         <li><a href="#tabbar_persist_c">Next0</a></li>
  30                                         <li><a href="#tabbar_persist_a">Menu1</a></li>
  31                                         <li><a href="#tabbar_persist_b">Save2</a></li>
  32                                         <li><a href="#tabbar_persist_c">Next3</a></li>
  33                                         <li><a href="#tabbar_persist_a">Menu4</a></li>
  34                                         <li><a href="#tabbar_persist_b">Save5</a></li>
  35                                         <li><a href="#tabbar_persist_c">Next6</a></li>
  36                                         <li><a href="#tabbar_persist_a">Menu7</a></li>
  37                                         <li><a href="#tabbar_persist_b">Save8</a></li>
  38                                         <li><a href="#tabbar_persist_c">Next9</a></li>
  39                                         <li><a href="#tabbar_persist_a">Menu10</a></li>
  40                                         <li><a href="#tabbar_persist_b">Save11</a></li>
  41                                 </div>
  42                         </div>
  43                 </ul>
  44         </div><!-- /tabbar -->
  45         </div>
  46
  47         <div data-role="content">
  48                 <p>Scroll header tabbar left/right </p>
  49         </div>
  50
  51         <div data-role="footer">
  52         </div>
  53 </div>
  54
  55 </body>
  56 </html>