widgets/tabbar/tabbar_persist.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                 <div data-role="page" id="tabbar_persist_a" data-add-back-btn="true">
  21                         <div data-role="header" data-position="fixed">
  22                                 <div data-role="tabbar" data-id="persist_header" >
  23                                         <ul>
  24                                                 <li><a href="#tabbar_persist_a" class="ui-btn-active ui-state-persist">Menu</a></li>
  25                                                 <li><a href="#tabbar_persist_b" >Save</a></li>
  26                                                 <li><a href="#tabbar_persist_c" >Next</a></li>
  27                                         </ul>
  28                                 </div><!-- /tabbar -->
  29                         </div>
  30
  31                         <div data-role="content">
  32                                 <p>page a</p>
  33                         </div>
  34
  35                         <div data-role="footer">
  36                         </div>
  37                 </div>
  38
  39                 <div data-role="page" id="tabbar_persist_b" data-add-back-btn="true">
  40                         <div data-role="header" data-position="fixed">
  41                                 <div data-role="tabbar" data-id="persist_header" >
  42                                         <ul>
  43                                                 <li><a href="#tabbar_persist_a" >Menu</a></li>
  44                                                 <li><a href="#tabbar_persist_b" class="ui-btn-active ui-state-persist">Save</a></li>
  45                                                 <li><a href="#tabbar_persist_c" >Next</a></li>
  46                                         </ul>
  47                                 </div><!-- /tabbar -->
  48                         </div>
  49
  50                         <div data-role="content">
  51                                 <p>page b</p>
  52                         </div>
  53
  54                         <div data-role="footer">
  55                         </div>
  56                 </div>
  57
  58                 <div data-role="page" id="tabbar_persist_c" data-add-back-btn="true">
  59                         <div data-role="header" data-position="fixed">
  60                                 <div data-role="tabbar" data-id="persist_header" >
  61                                         <ul>
  62                                                 <li><a href="#tabbar_persist_a" >Menu</a></li>
  63                                                 <li><a href="#tabbar_persist_b" >Save</a></li>
  64                                                 <li><a href="#tabbar_persist_c" class="ui-btn-active ui-state-persist">Next</a></li>
  65                                         </ul>
  66                                 </div><!-- /tabbar -->
  67                         </div>
  68
  69                         <div data-role="content">
  70                                 <p>page c</p>
  71                         </div>
  72
  73                         <div data-role="footer">
  74                         </div>
  75                 </div>
  76         </body>
  77 </html>