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

<!DOCTYPE html> 
<html> 
	<head> 
	<title>jQuery Mobile Docs - Pages</title> 
	<link rel="stylesheet"  href="../../themes/default" /> 
	<script type="text/javascript" src="../../js/all"></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-transition="slide">slide</a>
		<a href="transition-success.html" data-role="button" data-transition="slideup">slideup</a>
		<a href="transition-success.html" data-role="button" data-transition="slidedown">slidedown</a>
		<a href="transition-success.html" data-role="button" data-transition="pop">pop</a>
		<a href="transition-success.html" data-role="button" data-transition="fade">fade</a>
		<a href="transition-success.html" data-role="button" data-transition="flip">flip</a>
		</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>`
			`<head>`
			`<title>jQuery Mobile Docs - Pages</title>`
			`<link rel="stylesheet" href="../../themes/default" />`
			`<script type="text/javascript" src="../../js/all"></script>`
			`</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>`
changed link to transition success page 2010-10-15 19:43:04 +00:00			`<a href="transition-success.html" data-role="button" data-transition="slide">slide</a>`
			`<a href="transition-success.html" data-role="button" data-transition="slideup">slideup</a>`
			`<a href="transition-success.html" data-role="button" data-transition="slidedown">slidedown</a>`
			`<a href="transition-success.html" data-role="button" data-transition="pop">pop</a>`
			`<a href="transition-success.html" data-role="button" data-transition="fade">fade</a>`
			`<a href="transition-success.html" data-role="button" 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
			`<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>`