Jquery mobile: the basics

Basic page structure:

<div data-role=”page”>

<div data-role=”header”></div>

<div data-role=”content”></div>

<div data-role=”footer”></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:


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>


You can specify them via the data-theme attribute:

<header data-role=”header” data-theme=”b”>

The barebones template here: