demos/tizen-winsets/tips/page-transition/transition.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 - Transition page</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 <div data-role="page" data-add-back-btn="true" id="transition-list">
  22         <div data-role="header" data-position="fixed">
  23                 <h1>Transitions</h1>
  24         </div>
  25         <div data-role="content">
  26                 <ul data-role="listview" data-icon="1line-textonly">
  27                         <li><a href="#transition-page" data-transition="depth">depth</a></li>
  28                         <li><a href="#transition-page" data-transition="fade">fade</a></li>
  29                         <li><a href="#transition-page" data-transition="pop">pop</a></li>
  30                         <li><a href="#transition-page" data-transition="flip">flip</a></li>
  31                         <li><a href="#transition-page" data-transition="turn">turn</a></li>
  32                         <li><a href="#transition-page" data-transition="flow">flow</a></li>
  33                         <li><a href="#transition-page" data-transition="slidefade">slidefade</a></li>
  34                         <li><a href="#transition-page" data-transition="slide">slide</a></li>
  35                         <li><a href="#transition-page" data-transition="slideup">slideup</a></li>
  36                         <li><a href="#transition-page" data-transition="slidedown">slidedown</a></li>
  37                         <li><a href="#transition-page" data-transition="none">none</a></li>
  38                 </ul>
  39         </div><!-- /content -->
  40         <div data-role="footer" data-add-back-btn="true">
  41         </div>
  42 </div> <!-- /page -->
  43 <div data-role="page" data-add-back-btn="true" id="transition-page">
  44         <div data-role="header" data-position="fixed">
  45                 <h1>Sample</h1>
  46         </div>
  47         <div data-role="content">
  48                 <div data-role="gallery" data-vertical-align="middle">
  49                         <img src="../../widgets/test/05.jpg">
  50                 </div>
  51         </div> <!-- /content -->
  52         <div data-role="footer">
  53         </div>
  54 </div> <!-- /page -->
  55 </body>
  56 </html>