- Multipage Template
- Single-Page Template
- Link Types
- Preloading and Caching Pages
- Working with Page Transitions
- Customizing Loading Messages
- Wrapping Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with Page Transitions
A number of page transitions can be used with the jQuery Mobile framework. All the page transitions are CSS-based effects. When using Ajax navigation, the page transitions work between linked pages or form submissions. Table 4.5 lists the available page transitions in the framework.
Table 4.5. Page transitions
|
Method |
Description |
|
slide |
Slides the hyperlinked page in from the right to replace the current page. Slide is the default page transition. |
|
slideup |
Slides the hyperlinked page up to replace the current page. |
|
slidedown |
Slides the hyperlinked page down from the top to replace the current page. |
|
pop |
Zooms the hyperlinked page in from the center of the current page and replaces it. |
|
fade |
Fades in the hyperlinked page over the current page and replaces it. |
|
flip |
Creates a 3D effect where the hyperlinked page appears to be on the backside of the current page as it flips and the hyperlinked page comes into view. |
NOTE
Use the flip transition with caution, because it is supported only by browsers that support 3D CSS transform rendering.
Each of these page transitions is easy to set up globally as a default using the defaultPageTransition property. To set it up properly, it’s necessary to bind to the mobileinit event, which is accessible through the API via the jQuery Mobile object:
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = 'fade';
});
The binding of the event handler needs to be executed before the jQuery Mobile library loads. Therefore, in your HTML file, arrange your JavaScript files in a specific order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="assets/js/custom-jqm-transitions.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
They can also be set on a per-link basis to override the default page transition. This option is useful for a number of situations, such as creating pop-up windows that use the pop transition:
<a href="popup.html" data-transition="pop">Pop-up</a>
Or, form submissions that use the flip transition:
<form action="" method="get" data-transition="flip">
<input type="text" name="name">
<input type="submit" value="Submit">
</form>
It’s even possible to set the page transition to none to disable the page transition for a particular hyperlink or form submission:
<form action="" method="get" data-transition="none">
<input type="text" name="name">
<input type="submit" value="Submit">
</form>
jQuery also creates a reverse transition by automatically applying the same page transition when the back button is pressed.
The complete example code for the global and individual page transitions looks like the following:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Transitions - jQuery Mobile: Design and Develop</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="assets/js/custom-jqm-transitions.js"></script><script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body class="container"> <div data-role="page"> <div data-role="header"><h1>Page Name</h1></div> <div data-role="content"> <p><a href="popup.html"data-transition="pop">Pop-up</a></p> <form action="" method="get"data-transition="flip"> <input type="text" name="name"> <input type="submit" value="Submit"> </form> </div> <div data-role="footer">Copyright</div> </div> </body> </html>
Beginning with the head of the document, you can see that the jQuery library is loaded first, then the custom JavaScript where the mobileinit event from our previous example is bound and the default page transition is set. Last, but not least, the jQuery Mobile library is loaded. Within the page there’s a hyperlink that has a pop transition applied and a form that has a flip transition applied.