Basic page structure:
<div data-role=”page”>
<div data-role=”header”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>
Since links are internal (load a different part of your template), in order to call real external links, you need:
Rel=”external” or data-ajax=”false”
To implement a back button, you do:
data-rel=”back”
To implement dialogs (modals) instead of opening the page:
data-rel=”dialog”, data-rel="back" (to close it)
To load an external page:
$.mobile.loadPage(pageurl); // Be careful with this one: you have limited resources in the mobile platform!
Flipping through pages:
$.mobile.changePage(to, transition, back, changeHash)
to = the destination page
changeHash = the new URL once you go to the new page
Example of implementation:
<a href=”javascript:toAbout()”>About</a>
function toAbout() {
$.mobile.changePage( “about.html”, { transition: “pop”} );
}
You can also change pages via buttons:
<a data-role=”button” href=”#page2″>Page Navigation</a>
Where #page2 points to the page you defined in as <div data-role=”page” id=”page2″>Page content here</div>
<a data-role=”button” href=”#dialog1″ data-rel=”dialog” data-transition=”pop”>Open Dialog </a>
Themes:
You can specify them via the data-theme attribute:
<header data-role=”header” data-theme=”b”>
The barebones template here:
http://jquerymobile.onsubject.com/