JQuery Mobile – Lesson 03 – Transitions
Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05
1. In continuation to Lesson 02, here you will see a demo of transitions.
2. We will use the last HTML file that has been created at the last lesson with addition of the red tags below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<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 data-role="page" id="page1">
<div data-role="header">
<h1>Page 1 header</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Page 1 Main</h1>
<a href="#page2" data-transition="flow">page 2</a>
</div>
<div data-role="footer">
<h1>Page 1 footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2 header</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Page 2 Main</h1>
<a href="#page1" data-transition="flow">page 1</a>
</div>
<div data-role="footer">
<h1>Page 2 footer</h1>
</div>
</div>
</body>
</html>
3. Replace the transition with the transitions below:
fade Default. Fades to the next page flip Flips to the next page from back to front flow Throws the current page away and comes in with the next page pop Goes to the next page like a popup window slide Slides to the next page from right to left slidefade Slides from right to left and fades in the next page slideup Slides to the next page from bottom to top slidedown Slides to the next page from top to bottom turn Turns to the next page none No transition effect