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

<!DOCTYPE html> 
<html> 
	<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="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../js/"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header" data-theme="b">
		<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">
			
		<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>NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.</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>`
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags. 2011-02-18 20:00:18 +00:00			`<meta charset="utf-8">`
Ya'll can scale your pages now. Fixes #1645. Note: we originally disabled user zooming to work around a bug in iOS that automatically zooms the page beyond the constraints of the viewport on orientation change. We are not working around this bug at all now, but you are free to include any meta tag you'd like, or better yet, consider this polyfill: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ 2011-05-17 21:28:19 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
better page titles 2011-03-31 13:11:26 +00:00			`<title>jQuery Mobile Docs - Transitions</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"/>`
been meaning to do this for a while. 2011-04-14 20:04:47 +00:00			`<script src="../../js/jquery.js"></script>`
			`<script src="../../js/"></script>`
pages section cleanup 2010-10-14 04:12:17 +00:00			`</head>`
			`<body>`

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

Added a home link to all pages and changed the header bar theme swatch to b globally 2011-02-03 22:29:48 +00:00			`<div data-role="header" data-theme="b">`
pages section cleanup 2010-10-14 04:12:17 +00:00			`<h1>Transitions</h1>`
home button fixes 2011-02-03 23:34:35 +00:00			`<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>`
pages section cleanup 2010-10-14 04:12:17 +00:00			`</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>`
Added a warning about the use of the flip transition on Android. 2011-06-17 20:37:28 +00:00			`<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
Added a warning about the use of the flip transition on Android. 2011-06-17 20:37:28 +00:00			`<p>NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.</p>`
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>`