mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-21 08:20:24 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
50 lines
No EOL
2.1 KiB
HTML
Executable file
50 lines
No EOL
2.1 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Pages</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Transitions</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<h2>Page transitions</h2>
|
|
|
|
<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.</p>
|
|
|
|
<p>To set a custom transition effect, add the <code>data-transition</code> attribute to the link. Possible values include: </p>
|
|
|
|
<code><code>
|
|
<a href="index.html" data-transition="pop">I'll pop</a>
|
|
</code></code>
|
|
|
|
<p>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
|
|
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="flip">flip</a>
|
|
</p>
|
|
|
|
<p>In addition, you can also force a "backwards" transition by specifying <code>data-back="true"</code> on your link.</p>
|
|
|
|
<div class="ui-body ui-body-e">
|
|
<p><strong>Transitions from <a href="http://www.jqtouch.com/">jQtouch</a></strong> (<em>with small modifications</em>): Built by David Kaneda and maintained by Jonathan Stark.</p>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |