0

JQuery Mobile – Lesson 03 – Transitions

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