Working with Exposed Methods in jQuery Mobile
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The jQuery Mobile framework offers an API that can provide an extra level of control using global options, interaction events, and exposed methods. The framework includes an object named $.mobile that includes a number of methods and properties that have been exposed. With these methods and properties, it’s possible to connect with core functionality to create custom functionality.
This article focuses on two specific exposed methods, which will provide the capability to preload and change pages programmatically. You can download the source code for this article.
Preloading Pages
Although jQuery Mobile offers multi-page template functionality to use one single web page to store multiple single-page templates, you should store your content in separate web pages, especially in larger sites with many pages. This will minimize the size of the DOM for the main web page, which could speed up your website. The only issue that can arise from splitting your web pages into separate single-page templates is that you have to load pages on demand; for this reason, preloading pages is invaluable. jQuery Mobile offers a way to do this via the $.mobile object’s loadPage method. Internally, this method is used to load external pages and enhance the pages content before adding it to the DOM. It is called by jQuery Mobile’s changePage method, which is used to change pages programmatically. Having the ability to tap into this exposed method provides a useful way to preload pages. Preloading pages allows them to display quicker, as they will not need to be loaded at the time when the user clicks a link.
Although the functionality is powerful, the code needed to load a page behind the scenes is actually pretty simple. First, the document needs to be ready, and then you can call the loadPage event to preload one or many pages.
$(document).ready(function() {
$.mobile.loadPage("preloaded-page.html");
});
This code can be included in an HTML document to preload a web page. By default, the page will be loaded via Ajax, and the existing page will be unaffected. The following example shows how to integrate this JavaScript into a web page to preload any number of pages on page load:
<!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>jQuery Mobile: Preloading Pages</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css " />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.mobile.loadPage("preloaded-page.html");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Page Header</h1></div>
<div data-role="content">
<p>Suspendisse potenti. Maecenas semper imperdiet tortor,
vitae pharetra sapien posuere sed. Vivamus mauris ipsum,
sodales et vulputate eu, condimentum quis arcu. Quisque vel
tellus massa, eu porttitor tellus. Vivamus ac dui at lectus
laoreet euismod. Donec eros magna, lacinia nec hendrerit pellentesque,
adipiscing lobortis ipsum. Curabitur in ultricies massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec mollis dignissim ultricies.</p>
<p>Suspendisse odio nunc, gravida vel blandit pulvinar, malesuada
vel leo. Nam eu ligula semper augue tincidunt dictum. Aliquam dictum
luctus dui, nec volutpat est aliquam eget. Quisque massa velit,
bibendum sit amet mattis id, malesuada quis purus. In id metus elit.
Phasellus rutrum magna et sem tempor iaculis. Maecenas condimentum,
dui eget vestibulum mattis, est eros commodo nisi, ac scelerisque elit
ante a tellus. Donec eget enim nisi, at hendrerit risus. Sed augue purus,
dapibus sed mattis a, rhoncus a elit. Etiam congue arcu quis erat
semper vel bibendum risus ultrices.</p>
</div>
<div data-role="footer">Copyright</div>
</div>
</body>
</html>
As mentioned previously, when the main web page loads, it will run the loadPage method and preload the page in the background using Ajax. Figure 1 shows an example of this request in the Google Chrome console.
)
Another benefit to preloading the page is that the default jQuery Mobile loading message will not be displayed when the user clicks an associated link. This message only appears during the time that a page is being loaded. The loadPage method also offers a number of properties for extended functionality; these include:
- data: This property can be used to send data to the page that is being loaded.
- loadMsgDelay: The loading message that is used during page loads can be delayed for a number of milliseconds to give the page time to be loaded from cache before showing the message.
- pageContainer: A container element can be specified to hold the page after it has been loaded.
- reloadPage: This property forces a page refresh.
- role: This property is used to specify a data-role on the page once it has been loaded.
- showLoadMsg: This property is used to determine whether to show the loading message.
- type: This property is used to specify whether the page is loaded via a GET or POST.
This functionality should be used wisely; for example, it’s not a good idea to preload every page within your website. Additional HTTP requests are created by this method; therefore, it is wise to use it in situations that make sense. For example, if you had a sequence of web pages that were linked together and it was highly likely that the user would be viewing the next page in the sequence, you could preload the next page each time a new page is loaded.