Move css files from index to proper subpages

[platform/framework/web/web-ui-fw.git] / demos / tizen-winsets / tips / page-transition / transition.html
diff --git a/demos/tizen-winsets/tips/page-transition/transition.html b/demos/tizen-winsets/tips/page-transition/transition.html

index 1f55f4d..b3c620b 100644 (file)
--- a/demos/tizen-winsets/tips/page-transition/transition.html
+++ b/demos/tizen-winsets/tips/page-transition/transition.html
@@ -1,20 +1,55 @@
  <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<html>
+<head>
+       <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+       <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+       <script src="../../configure.js"></script>
+       <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+       <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+                       data-framework-theme="tizen-white"
+                       data-framework-viewport-width="device-width">
+       </script>
+       <script src="../../main.js"></script>
+       <title>Tizen UI - Transition page</title>
+       <!-- for compatibility test -->
+       <meta name="apple-mobile-web-app-capable" content="yes" />
+       <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+       <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+</head>
+<body>
+<div data-role="page" data-add-back-btn="true" id="transition-list">
         <div data-role="header" data-position="fixed">
                 <h1>Transitions</h1>
         </div>
         <div data-role="content">
                 <ul data-role="listview" data-icon="1line-textonly">
-                       <li><a href="transition-page.html" data-transition="fade">fade</a></li>
-                       <li><a href="transition-page.html" data-transition="pop">pop</a></li>
-                       <li><a href="transition-page.html" data-transition="flip">flip</a></li>
-                       <li><a href="transition-page.html" data-transition="turn">turn</a></li>
-                       <li><a href="transition-page.html" data-transition="flow">flow</a></li>
-                       <li><a href="transition-page.html" data-transition="slidefade">slidefade</a></li>
-                       <li><a href="transition-page.html" data-transition="slide">slide</a></li>
-                       <li><a href="transition-page.html" data-transition="slideup">slideup</a></li>
-                       <li><a href="transition-page.html" data-transition="slidedown">slidedown</a></li>
-                       <li><a href="transition-page.html" data-transition="none">none</a></li>
+                       <li><a href="#transition-page" data-transition="depth">depth</a></li>
+                       <li><a href="#transition-page" data-transition="fade">fade</a></li>
+                       <li><a href="#transition-page" data-transition="pop">pop</a></li>
+                       <li><a href="#transition-page" data-transition="flip">flip</a></li>
+                       <li><a href="#transition-page" data-transition="turn">turn</a></li>
+                       <li><a href="#transition-page" data-transition="flow">flow</a></li>
+                       <li><a href="#transition-page" data-transition="slidefade">slidefade</a></li>
+                       <li><a href="#transition-page" data-transition="slide">slide</a></li>
+                       <li><a href="#transition-page" data-transition="slideup">slideup</a></li>
+                       <li><a href="#transition-page" data-transition="slidedown">slidedown</a></li>
+                       <li><a href="#transition-page" data-transition="none">none</a></li>
                 </ul>
         </div><!-- /content -->
+       <div data-role="footer" data-add-back-btn="true">
+       </div>
+</div> <!-- /page -->
+<div data-role="page" data-add-back-btn="true" id="transition-page">
+       <div data-role="header" data-position="fixed">
+               <h1>Sample</h1>
+       </div>
+       <div data-role="content">
+               <div data-role="gallery" data-vertical-align="middle">
+                       <img src="../../widgets/test/05.jpg">
+               </div>
+       </div> <!-- /content -->
+       <div data-role="footer">
+       </div>
  </div> <!-- /page -->
+</body>
+</html>