JQuery Mobile is a client-side framework that creates a mobile experience on the web. JQuery Mobile uses a combination of CSS and custom HTML 5 data attributes to create a special appearance for a view. JQuery Mobile defines a page object, which is a portion of the current view to show to the user. For instance, a single HTML file can contain one page, or multiple pages. A page is represented by the following markup:
To create a multi-page template, we simply create multiple pages:
<div id=”Page1″ data-role=”page”>..</div>
<div id=”Page2″ data-role=”page”>..</div>
<div id=”Page3″ data-role=”page”>..</div>
A page can have a header and footer, which can be defined as the following:
JQuery mobile styles the header and footer to look like the header and footer of a mobile application.
When you have multiple pages, only one page appears at a time (the first one). You can switch between views either programmably or using a hyperlink, which looks like the following:
<a href=”#Page2″ data-role=”button”>Page 2</a>
A data-role=”button” attribute styles the hyperlink as a button, and loads the next view using AJAX. The above hyperlink links to another page; however, if you want to link to an external page, use a button that points to the external page as in the following:
<a href=”Pages-Multi.html” data-role=”button”>See Multi-Page Template</a>
Here JQuery will redirect to another page or external link; however, for external links, add a rel=”external” attribute. This tells JQuery to handle the request specially. JQuery also has the ability to change the page via script, using the $.mobile.changePage function. This function takes the URL to show (#Page or about.html) or a JQuery reference to an element. See the API documentation for more information.
As changes between pages occur, JQuery supports using animations. By adding to a button a data-transition attribute, the redirect to another page will use an animation. For a demo of animations, see the following link.
For more information on pages, see the documentation at: http://jquerymobile.com/demos/1.2.0/docs/pages/index.html