mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
285 lines
15 KiB
HTML
Executable file
285 lines
15 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html class="ui-mobile-rendering">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Transitions</title>
|
|
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
|
|
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
|
|
<script src="../../js/jquery.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" class="type-interior">
|
|
|
|
<div data-role="header" data-theme="f">
|
|
<h1>Transitions</h1>
|
|
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<div class="content-primary">
|
|
<h2>Page transitions</h2>
|
|
|
|
<p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
|
|
|
|
<style>
|
|
table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
|
|
th { text-align:left; }
|
|
th h3 { margin:.6em 0; }
|
|
th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
|
|
td .ui-btn { margin:.4em 0 .5em 0; }
|
|
td .ui-btn-inner { padding: .4em 15px; }
|
|
</style>
|
|
|
|
<table margin="0">
|
|
<tr>
|
|
<th><h3>fade</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="fade" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>pop</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="pop" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>flip</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="flip" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>turn</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="turn" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>flow</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="flow" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>slide</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="slide" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>slideup</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>slidedown</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>none</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<p><strong>NOTE</strong>: To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support will fallback to "fade" for all transition types. This behavior is configurable (see below).</p>
|
|
|
|
<p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p>
|
|
|
|
<h2>Setting a transition on a link or form submit</h2>
|
|
<p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
|
|
|
|
<code><code>
|
|
<a href="index.html" <strong>data-transition="pop"</strong>>I'll pop</a>
|
|
</code></code>
|
|
|
|
<p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</p>
|
|
|
|
<h2>Global configuration of transitions</h2>
|
|
|
|
<p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also set configured.</p>
|
|
|
|
|
|
<h2>Browser support and performance</h2>
|
|
<p>All transitions are built with CSS keyframe animations and include both <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and <code>-moz</code> rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p>
|
|
|
|
<h2>Defining fallback transitions for non-3D support</h2>
|
|
<p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p>
|
|
|
|
<p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p>
|
|
<code>$.mobile.fallbackTransition.slideout = "none"</code>
|
|
|
|
<h2>Setting a max width for transitions</h2>
|
|
<p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window width is wider than the specified value.</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Creating custom transitions</h2>
|
|
|
|
<p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app.
|
|
|
|
<h2>Transitions and scroll position</h2>
|
|
<p>One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.</p>
|
|
|
|
|
|
<table>
|
|
<tr>
|
|
<th><h3>fade</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="fade" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>pop</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="pop" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>flip</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="flip" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>turn</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="turn" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>flow</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="flow" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>slide</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="slide" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>slideup</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>slidedown</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th><h3>none</h3></th>
|
|
<td><a href="#dialog-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
|
|
<td><a href="#page-success" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
|
|
|
|
</div><!--/content-primary -->
|
|
|
|
<div class="content-secondary">
|
|
|
|
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
|
|
|
|
<h3>More in this section</h3>
|
|
|
|
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
|
<li data-role="list-divider">Pages & Dialogs</li>
|
|
<li><a href="page-anatomy.html">Anatomy of a page</a></li>
|
|
<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
|
|
<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
|
|
<li><a href="page-titles.html">Page titles</a></li>
|
|
<li><a href="page-links.html">Linking pages</a></li>
|
|
<li data-theme="a"><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
|
|
<li><a href="page-dialogs.html">Dialogs</a></li>
|
|
<li><a href="page-cache.html">Prefetching & caching pages</a></li>
|
|
<li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
|
|
<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
|
|
<li><a href="page-scripting.html">Scripting pages</a></li>
|
|
<li><a href="phonegap.html">PhoneGap apps</a></li>
|
|
<li><a href="touchoverflow.html">touchOverflow feature</a></li>
|
|
<li><a href="pages-themes.html">Theming pages</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
|
|
<div data-role="footer" class="footer-docs" data-theme="c">
|
|
<p>© 2011 The jQuery Project</p>
|
|
</div>
|
|
|
|
</div><!-- /page -->
|
|
|
|
|
|
|
|
|
|
|
|
<div data-role="page" id="dialog-success"><!-- dialog-->
|
|
|
|
<div data-role="header" data-theme="e">
|
|
<h1>Dialog</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content" data-theme="e">
|
|
<p>That was an animated page transition effect to a dialog that we added with a <code>data-transition</code> attribute on the link.</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>
|
|
|
|
<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">Take me back</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-role="page" id="page-success"><!-- dialog-->
|
|
|
|
<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" />
|
|
</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="header" 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><!-- /header -->
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|