Wednesday, December 14, 2011

jQuery Mobile page transitions simple demo

jQuery Mobile has amazing Ajax page transitions available by default. This blog post gives a quick example to demonstrate the same.

Click here to launch the below code in a separate browser.
Launch

<!DOCTYPE html>
<html>
  <head>
    <title>Transitions Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div id="page1" data-role="page">
      <div data-role="header">
        <h1>Pick your transition</h1>
      </div>
      <div data-role="content">
        <p><a href="#page2" data-role="button" data-transition="slide">Slide</a></p>
        <p><a href="#page2" data-role="button" data-transition="slideup">Slideup</a></p>
        <p><a href="#page2" data-role="button" data-transition="slidedown">Slidedown</a></p>
        <p><a href="#page2" data-role="button" data-transition="pop">Pop</a></p>
        <p><a href="#page2" data-role="button" data-transition="fade">Fade</a></p>
        <p><a href="#page2" data-role="button" data-transition="flip">Flip</a></p>
      </div>
    </div>
    <div id="page2" data-role="page">
      <div data-role="header">
        <h1>Reverse the transition now</h1>
      </div>
      <div data-role="content">
<p><a href="#" data-role="button" data-rel="back" 
data-direction="reverse">Reverse</a></p>
      </div>
    </div>
  </body>
</html>


So there are 6 page transitions are available by default and the data-transition attribute specifies the same.
  1. Slide
  2. Slideup
  3. Slidedown
  4. Pop (best for dialogs)
  5. Fade
  6. Flip
I've also included an option to reverse the most recent page transition and this is done using the data-rel and data-direction attribute as shown. As shown in the docs, adding a data-rel="dialog" attribute to the anchor link will open the page as a dialog.

Simple isn't it. Enjoy !!

1 comment:

  1. Hi Chetan, thanks a lot for this useful example. I just started playing with jQuery Mobile. I noticed that if I try to use the new version (right now, the 1.4.5) it does not work. Any idea about why? Thanks a lot

    ReplyDelete