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 >
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 >
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 >
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 >
2010-10-14 04:12:17 +00:00
< / p >
2010-10-15 19:06:18 +00:00
2010-10-18 22:20:47 +00:00
< p > In addition, you can also force a "backwards" transition by specifying < code > data-back="true"< / code > on your link.< / p >
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 >
2010-10-14 04:12:17 +00:00
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
< / html >
