jquery-mobile/docs/pages/docs-transitions.html

<!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>
&lt;a href=&quot;index.html&quot; data-transition=&quot;pop&quot;&gt;I'll pop&lt;/a&gt;
</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-direction="reverse"</code> on your link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</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>
pages section cleanup 2010-10-14 04:12:17 +00:00			`<!DOCTYPE html>`
			`<html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<head>`
			`<meta charset="utf-8" />`
pages section cleanup 2010-10-14 04:12:17 +00:00			`<title>jQuery Mobile Docs - Pages</title>`
Sweep through all files to add a trailing slash to <link> tags that include thems/default. This should fix Opera Mobile Issue 763. 2011-01-06 00:19:24 +00:00			`<link rel="stylesheet" href="../../themes/default/" />`
Added link to demo css file to all docs pages 2010-11-11 19:15:42 +00:00			`<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>`
Removed jquery.js from js/index.php and updated all html doc/experiments/test files that incuded "js/" so that they also include jquery.js manually. 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. 2011-01-20 19:26:12 +00:00			`<script type="text/javascript" src="../../js/jquery.js"></script>`
removed js/all redirect. updated files to use js/ 2010-11-09 22:57:26 +00:00			`<script type="text/javascript" src="../../js/"></script>`
pages section cleanup 2010-10-14 04:12:17 +00:00			`</head>`
			`<body>`

			`<div data-role="page">`

			`<div data-role="header">`
			`<h1>Transitions</h1>`
			`</div><!-- /header -->`

			`<div data-role="content">`

			`<h2>Page transitions</h2>`

content edits to page transitions 2010-10-15 13:15:07 +00:00			`<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>`
pages section cleanup 2010-10-14 04:12:17 +00:00
			`<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>`
Made each transition link a data-rel="dialog" so it's not tracked in history. Once you played with transitions you were in a deep history stack before. 2010-11-09 15:03:51 +00:00			`<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>`
pages section cleanup 2010-10-14 04:12:17 +00:00			`</p>`
updated transiton types - added attribution 2010-10-15 19:06:18 +00:00
deprecated data-back attribute on links in favor of data-direction="reverse". Updated docs and relevant demos. 2011-01-23 23:12:46 +00:00			`<p>In addition, you can also force a "backwards" transition by specifying <code>data-direction="reverse"</code> on your link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</p>`
updated docs on new data-back attr 2010-10-18 22:20:47 +00:00
updated transiton types - added attribution 2010-10-15 19:06:18 +00:00			`<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>`
pages section cleanup 2010-10-14 04:12:17 +00:00
			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`