Navigation and Transitions
AJAX-powered navigation, page transition animations, and history management are automatically incorporated in jQuery Mobile, making mobile web apps easier to design. HTML5 and CSS3 improve HTML markup and create a consistent mobile experience across platforms.
This is how transitions and navigation are handled by jQuery Mobile:
How jQuery Mobile Works: jQuery Mobile embeds data into valid HTML5 markup by relying primarily on HTML5 data-* attributes. These characteristics enable the framework to recognise and gradually improve page elements. By abstracting away browser quirks, it offers a unified interface across various browser versions. It simplifies standard JavaScript features, such as AJAX and UI effects.
Internal Pages: Using the data-role=”page” tag, jQuery Mobile classifies HTML document content as “pages.” Document body internal pages must be top-level siblings, not nested. When a user clicks on a link pointing to another data-role=”page” element , jQuery Mobile handles page transition animation and navigation and Transitions . It looks “application-like” and feels that way. One HTML file may contain many <section data-role=”page”> elements, which jQuery Mobile handles transitions between.
External Pages: Navigation to external HTML pages is another capability of jQuery Mobile. For example, <a href=”external.html”>, a link pointing to an other HTML file, causes jQuery Mobile to do an asynchronous fetch (AJAX request) for that page. jQuery Mobile adds the content into the DOM of the original document after successfully retrieving the first element identified with data-role=”page” from the remote page.
Any further information in the external file is disregarded. The page will display an error message if it cannot obtain the data-role=”page” element or does not include one. You can specify a target attribute (such as _blank) or a rel=”external” element on the link to stop jQuery Mobile from fetching a page asynchronously and instead load it properly (with a complete page refresh).
Page Transition Animations: A number of pre-installed animated transitions are available in jQuery Mobile and can be used for presenting dialogues or switching between pages. With CSS3 transforms, these navigation and transitions are produced. Adding the data-transition attribute to a link allows you to specify a transition. Valid values consist of:
- Fade: Overlays the preceding content with a faded page.
- Flip: A page flip animation that rotates the active view out.
- Pop: The centre of the page pops into view.
- Slide: Brings up earlier content by sliding in from the left or the right.
- Over the current content, the slidedown menu slides down from the top.
- Slideup: To reveal the following material below, slide up to the top.
Using the data-direction=”reverse” attribute will reverse navigation and transitions. Sometimes, like when you utilise the automatic back button or hide a dialogue, jQuery Mobile will try to employ reverse navigation and transitions automatically.
History Management: jQuery Mobile automatically maintains the application’s page and dialogue URLs. The data-url attribute of each element with data-role=”page” contains a distinct page URL. By altering location, jQuery Mobile may leverage the browser’s history for deep linking and back button functionality.hash. The history hash typically excludes dialogues because of their modal nature.
changePage() Method: Instead of clicking a link, the jQuery Mobile changePage() method changes pages automatically. The framework handles history updates and page navigation and transitions properly with this method. Some of its parameters are:
- An object with url, type (HTTP verb like “GET” or “POST”), and data (serialised arguments), or the destination page, supplied as an element ID (e.g., “#page2”) or a filename (e.g., “external.html”).
- Change: The intended change’s name (e.g., “flip” or “slide”).
- Boolean back: Indicates whether the transition should be made in reverse.
- Boolean changeHash: Indicates if location.hash has to be updated.
Page Hide and Show Events: Because jQuery Mobile page views can be included in a single HTML file and transitions between them do not trigger the regular page load events, jQuery Mobile provides special events for page navigation and transitions. Whenever a page transition takes place, these events are triggered and contain references to the event and user interface elements. These are:
- Before the transition begins, the page beforehide function fires on the page being transitioned from.
- Pagebeforeshow: Before the transition begins, the page to which the page is being moved fires.
- Pagehide: After a transition is complete, it fires on the page it is coming from.
- Following the completion of the transition, pageshow: Fires on the page being transitioned to.
Functioning as analogues to $(document).ready() for application page views, these events are helpful for controlling actions or content during navigation and transitions. jQuery.delegate(), jQuery.bind(), or jQuery.live() can be used to bind them.
Code Example:
Using jQuery Mobile, this example shows how to navigate using transitions both internally and externally using AJAX.
<!DOCTYPE html>
<html>
<head>
<title>Simple jQuery Mobile App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pageshow", "#home", function () {
$("#welcome-msg").text("Welcome to Page 1!");
});
$(document).on("pageshow", "#page2", function () {
$("#page2-msg").text("Now you’re on Page 2!");
});
</script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="home">
<div data-role="header"><h1>Page 1</h1></div>
<div data-role="content">
<p id="welcome-msg"></p>
<a href="#page2" data-role="button" data-transition="slide">Go to Page 2</a>
<a href="#popup-dialog" data-role="button" data-rel="dialog" data-transition="pop">Open Dialog</a>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div data-role="header"><h1>Page 2</h1></div>
<div data-role="content">
<p id="page2-msg"></p>
<a href="#home" data-role="button" data-direction="reverse" data-transition="slide">Back to Page 1</a>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<!-- Dialog -->
<div data-role="page" id="popup-dialog">
<div data-role="header"><h1>Dialog</h1></div>
<div data-role="content">
<p>This is a dialog box.</p>
<a href="#" data-role="button" data-rel="back">Close</a>
</div>
</div>
</body>
</html>Output:
Page 1
Welcome to Page 1!
Go to Page 2
Open Dialog
FooterTo run this example:
- As index.html, save the first piece of code.
- Put external.html in the same directory as index.html.
- Browse index.html. AJAX loading requires a web server like XAMPP or a rudimentary Python HTTP server to serve external.html files since browsers enforce same-origin policy for AJAX queries.
This configuration shows how jQuery Mobile automates intricate AJAX, animation, and history management processes, creating interactive, multi-page mobile web apps more efficiently.
Conclusion
To sum up, jQuery Mobile offers a strong framework that makes creating responsive and engaging mobile web apps easier. With the use of HTML5 data properties, CSS3 transitions, and integrated JavaScript capability, developers can create experiences that resemble apps right in the browser. The framework eliminates the need for intricate scripting by handling AJAX-based navigation and Transitions, animated page transitions, and browser history automatically.
Dynamic and seamless user interactions are made possible by internal and external page management, specialised page lifecycle events, and customisable navigation and transitions like slide, flip, and pop. All things considered, jQuery Mobile abstracts away a lot of the difficulties associated with developing mobile websites, providing a reliable, effective, and intuitive way to create multi-page mobile apps.