demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.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                 <link rel="stylesheet" href="../../custom.css" />
  14                 <title>Tizen UI - Naviframe</title>
  15                 <!-- for compatibility test -->
  16                 <meta name="apple-mobile-web-app-capable" content="yes" />
  17                 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  18                 <link rel="apple-touch-icon" href="../../icon-tizen.png" />
  19         </head>
  20 <body>
  21
  22 <div data-role="page" data-add-back-btn="true">
  23         <div data-role="header" data-position="fixed">
  24                 <h1>Footer more</h1>
  25         </div>
  26         <div data-role="content">
  27                 <p>Footer more sample</p>
  28         </div>
  29         <div data-role="footer">
  30                 <a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-transition="slidedownfade" data-rel="popup"></a>
  31
  32                 <div data-role="button" data-inline="true" data-style="round">Button1</div>
  33                 <div data-role="button" data-inline="true" data-style="round">Button2</div>
  34
  35                 <div id="pop_js" data-role="popup" >
  36                 <ul data-role="listview">
  37                         <li><a href="#" data-rel="back">Settings</a></li>
  38                         <li><a href="#" data-rel="back">Add to contact</a></li>
  39                         <li><a href="#" data-rel="back">Call log</a></li>
  40                         <li><a href="#" data-rel="back">Music</a></li>
  41                         <li><a href="#" data-rel="back">File manager</a></li>
  42                 </ul>
  43         </div>
  44 </div>
  45
  46
  47 </body>
  48 </html>