jQuery Mobile

Contact Us or call 1-877-932-8228
jQuery Mobile

jQuery Mobile

jQuery Mobile is the jQuery UI equivalent for mobile devices like smartphones, tablets, e-readers, and the like. More so than jQuery UI, jQuery Mobile expects that the page's markup - your HTML code - to which it is applied conform to its conventions. You can set configuration options to get around this, but it is usually easier to markup a "page", for example, as a div with attribute data-role="page". As you'll see, getting jQuery Mobile to work effectively mostly means marking up your pages with the appropriate DOM elements with the appropriate attributes.

Here are some of the more common data- attributes used by jQuery Mobile:

jQuery Mobile Data Attributes
Attribute Explanation
data-theme Values are swatch letter (a - z)
data-role Tells jQuery Mobile what type of element this is; values include content, header, footer, button, collapsible, etc.
data-mini A value of true specifies that this element should be displayed in compact-sized version
data-icon Specify which of jQuery Mobile's pre-built icons to be used, or reference custom icon
data-iconpos Values left, right, top, bottom determine placement of icon for elements like buttons, collapsibles, navbar, etc.

To use jQuery Mobile, first include the jQuery library (either from code hosted on your own site or via a CDN) and then include the jQuery Mobile JavaScript file.

jQuery Mobile is themed. You will want to either include the default jQuery Mobile CSS file or, if you create a custom theme, include a custom-theme CSS file. You can create custom themes by using jQuery Mobile's ThemeRoller, a what-you-see-is-what-you-get visual designing tool, or by hand crafting CSS yourself.

Covering all of jQuery Mobile in detail is outside the scope of this course; we will introduce the basics through an demo example. Open up jqy-mobile-ui/Demos/jquery-mobile-pages.html in a browser, preferably from a mobile device (though it will work from a desktop browser), and in a code editor to view the source. On first load, the page looks like this:

jQuery Mobile pages

Code Sample:

jqy-mobile-ui/Demos/jquery-mobile-pages.html
<!DOCTYPE html> 
<html>
<head>
	<title>jQuery Mobile Pages</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

	<!-- link to jQuery and jQuery Mobile JavaScript libraries: -->
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>

<!-- the div below is a page - the home page -->
<div data-role="page" id="home">

	<!-- the div below is the home page's header -->
	<div data-role="header">
		<h1>Home</h1>
		<div data-role="navbar">
	        <ul>
	            <li><a href="#home" class="ui-btn-active ui-state-persist" data-icon="home">Home</a></li>
	            <li><a href="#about" data-icon="star">About</a></li>
	            <li><a href="#contact" data-icon="info">Contact</a></li>
	        </ul>
	    </div>
	</div>

	<!-- the div below is the home page's main content -->
	<div data-role="content">
		<p>homepage content homepage content</p>
		<p>homepage content homepage content</p>
	</div>

	<!-- the div below is the home page's footer -->
	<div data-role="footer">
		<h4>123 Fake St. Anywhere USA</h4>
	</div>
</div>

<!-- the div below is a page - the about page -->
<div data-role="page" id="about">
	<div data-role="header">
		<h1>About</h1>
		<div data-role="navbar">
	        <ul>
	            <li><a href="#home" data-icon="home">Home</a></li>
	            <li><a href="#about" class="ui-btn-active ui-state-persist" data-icon="star">About</a></li>
	            <li><a href="#contact" data-icon="info">Contact</a></li>
	        </ul>
	    </div>
	</div>
	<div data-role="content">
		<p>about content about content</p>
		<p>about content about content</p>
	</div>
	<div data-role="footer" data-theme="e">
		<h4>123 Fake St. Anywhere USA</h4>
	</div>
</div>

<!-- the div below is a page - the contact page -->
<div data-role="page" id="contact">
	<div data-role="header">
		<h1>Contact</h1>
		<div data-role="navbar">
	        <ul>
	            <li><a href="#home" data-icon="home">Home</a></li>
	            <li><a href="#about" data-icon="star">About</a></li>
	            <li><a href="#contact" class="ui-btn-active ui-state-persist" data-icon="info">Contact</a></li>
	        </ul>
	    </div>
	</div>
	<div data-role="content">
		<p>contact content contact content</p>
		<p>contact content contact content</p>
	</div>
	<div data-role="footer">
		<h4>123 Fake St. Anywhere USA</h4>
	</div>
</div>
<script>
	//handle for orientation-change event:
	$(window).on('orientationchange', function(event) {
		alert(event.orientation);
	});
</script>
</body>
</html>

First off, notice that the page is marked up as valid HTML5; jQuery mobile makes extensive use of HTML5 data- attributes to render various elements. We use the viewport meta tag to scale the width of the page to the width of the user's device's viewing pane. We include (from the code.jquery.com CDN) jQuery Mobile's CSS file, the jQuery library, and the jQuery Mobile library. You must include jQuery before jQuery Mobile.

The basic unit of jQuery Mobile sites are "pages" - but notice that our one html file includes three pages, each denoted by <div data-role="page">. With jQuery Mobile sites, pages can all live in one physical file or in multiple files; regardless, only one page will show in the user's browser at a time. We give each page (each <div data-role="page">) a unique id and use that <div data-role="page"> to link between pages.

Typically, you will divide each page into a header, content area, and footer: each is a div with the appropriate value for the data-role attribute. Here, we use an h1 tag in the header to show each page's title and add some sample content to each page's content area and footer.

One of the great features of jQuery Mobile is the set of widgets and UI elements that you can use on your page. Each form element, collapsible content widget, navbar, dialog, or other element is optimized for mobile viewing - tested across many different devices and designed for conserving valuable screen real estate on small screens. Here is a summary of the more common elements; note the extensive use of data- attributes:

Button

Create a button, usually from a link:

<a href="#home" data-role="button">Home</a>

Collapsible

Create a collapsible block of content: any (H1-H6) header element serves as the displayed title of the collapsible which, when clicked, toggles the initially-hidden content:

<div data-role="collapsible">
<h3>Header Title</h3>
	<p>The collapsible's content</p>
</div>

Dialog

Link to another page as a modal dialog by adding data-rel="dialog":

<a href="#about" data-rel="dialog">Open Dialog</a>

Navbar

Display up to five navigation buttons, with optional icons:

<div data-role="navbar">
	<ul>
		<li><a href="#home">Home</a></li>
		<li><a href="#about">About</a></li>
	</ul>

Slider

Display horizontal control to allow users to select from set range of numeric values:

<input type="range" name="sl" id="sl" value="40" min="0" max="100">

Visit the jQuery Mobile website for a full list of examples and code.

In our example, we use a navbar on each page - a div with attribute data-role="navbar". Note that each contains an unordered list, that we mark which element should be "active" (i.e. representing the current page) with class="ui-btn-active ui-state-persist", and that we set an icon for each with the data-icon attribute. See the jQuery Mobile website for a list of built-in icons; you can also design your own.

As mentioned above, jQuery Mobile ships with an extensive theming framework. You can apply any of the six stock themes (deriving from the CSS file we included) by adding the attribute, for example, data-theme="e" to an element. We have done this for the footer on the "about" page (note that it shows in yellow). Letters "a" through "e" represent the stock themes.

Since jQuery Mobile is built on jQuery, we can apply custom jQuery code to our mobile pages just as we might to our desktop pages. jQuery Mobile extends jQuery to the mobile environment; perhaps most interestingly, we can handle orientation-change events (when the user tilts the phone from portrait to landscape orientation) with the orientationchange event handler. In our example, we popup a JavaScript alert when the device changes orientation with code at the very bottom of the file:

jQuery Mobile orientation change

The jQuery Mobile website has a well-written set of examples, sample code, and API docs - we encourage you to visit to learn more. The exercise below will ask you to test out some of the concepts we covered above, but feel free to add other elements of jQuery Mobile.

Next