diff options
Diffstat (limited to 'libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html')
-rw-r--r-- | libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html new file mode 100644 index 00000000..daf91001 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Page</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + + + <div data-role="page" id="page-success" data-dom-cache="true"><!-- page--> + <div data-role="header" data-theme="a"> + <h1>Page</h1> + </div><!-- /header --> + + <div data-role="content" data-theme="d"> + <p>That was an animated page transition effect to a page that we added with a <code>data-transition</code> attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.</p> + <p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p> + + <form action="#" method="get"> + <h2>Here's a few form elements</h2> + + <p>These are here to see if this slows down rendering.</p> + + <div data-role="fieldcontain"> + <label for="name">Text Input:</label> + <input type="text" name="name" id="name" value="" /> + </div> + + <div data-role="fieldcontain"> + <label for="textarea">Textarea:</label> + <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> + </div> + + <div data-role="fieldcontain"> + <label for="slider2">Flip switch:</label> + <select name="slider2" id="slider2" data-role="slider"> + <option value="off">Off</option> + <option value="on">On</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="slider">Slider:</label> + <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-highlight="true" /> + </div> + + </form> + + <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back" data-inline="true">Take me back</a> + </div> + + <div data-role="footer" data-theme="d"> + <div style="margin:5px 10px;"><!-- To add a bit of spacing --> + <label for="search" class="ui-hidden-accessible">Search:</label> + <input type="search" name="password" id="search" placeholder="Search..." value="" /> + </div> + </div><!-- /footer --> + </div> +</body> +</html> |