jQuery Mobile – Beginner Tutorial

February 8th, 2012 Leave a comment 1 comment
Like the article?
Using jQuery for Mobile Devices

Being able to reach your audience via a mobile page is becoming almost as important as having a page at all but getting started in mobile site development can be frustrating. The jQuery library provides many handy mobile features that you can use to get started making great mobile-friendly web sites. In this article I will discuss the jQuery mobile framework features and give you a little demo on how it works.

What is jQuery Mobile?

jQuery Mobile is a unified framework that is designed to work on all major mobile platforms. This allows us to save a lot of time in development since we no longer have to think about different platform problems or write separate pages for different devices. The framework was designed around the touch-screen concept and has many built-in tools to help you design touch-friendly interfaces. You can create themes for your site that are designed around various form-factors of the screen so your page will look just as great on a phone as it does on a tablet. This is an excellent breakthrough for developers that need to work in the mobile phone or tablet setting and ultimately saves a lot of time and frustration.

How to Get Started

Getting started writing jQuery Mobile applications is not really that different from writing jQuery for a traditional site. You can get a basic page template from the jQuery Mobile Quick Start Guide that can serve as a starting template for your page. Here is an example of the template page:

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Hello world</p>		
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

This template already contains the elements needed to serve your page for the particular screen width. There are several wrappers set up in the template that delineate between header and content sections. Although these wrappers are optional, they are nice to have and make creating the different areas of your page easier. These new data- attributes are part of HTML5 and transform the markup in the wrapper to a styled widget when rendered.

Once you have this basic template downloaded, you can begin editing to add the usual HTML elements you may need inside the content container. If you want to add custom layouts or addition styles you can add another stylesheet to the head section after the jQuery Mobile stylesheet. There are also many new jQuery Mobile controls that you can add to your page that will render nicely in your mobile environment. These controls include items such as buttons, sliders, lists, text areas, menus and switches. Here are some examples:

To create a text input field:

<input type="text" name="name" id="basic" value=""  />

This creates a basic text box that is 100% of the parent container. You can specify a particular width if needed as well as use the data-role attribute to group the text box with other form elements, like so:

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

When linking between pages using jQuery Mobile, you create the links between pages like you normally would with HTML, except the framework will automatically handle the page request using Ajax when possible. This creates a seamless page transition and a quicker response time for mobile devices that may be on limited bandwidth. If Ajax isn’t possible, such as an external-domain URL or if the request to the page fails, a normal HTTP request for the page will be issued. There are also some special features that go along with links such as forcing a page refresh, setting up “back” buttons, creating email links that launch the mail client using the mailto: protocol and telephone links that initiate a call using the tel: protocol. Here are some examples:

A regular internal link:

<a href="../index.html">Link in the same domain</a>

Forcing the page to refresh and prohibit AJAX:

<a href="index.html" data-ajax="false">Link with refresh the page</a>

A link to send an email

<a href="mailto:me@foo.com">Basic email link</a>

Phone link:

<a href="tel:5555555555">Call me!</a>

When setting up your links you can also think about page transitions. The jQuery Mobile framework provides six CSS-based transitions that can be used on your site to create a more professional and polished result. Setting up these transitions is easy since it only requires adding the data-transition attribute to your links:

This link will use the slide transition:

<a href="../index.html" data-transition="slide">Link in the same domain</a>

This link will use the pop transition:

<a href="../index.html" data-transition="pop">Link in the same domain</a>

It’s that simple! You would now have a custom-looking transition between your pages that only took a second to add.

There are many more features, controls, documentation and examples at the jQuery Mobile home page at:

You can also see examples of mobile sites that have been created using the framework if you need some inspiration. There are so many great reasons to use the jQuery Mobile framework and it is so easy to learn that you should get started today!

Article Source Files

DescriptionNameSizeDownload method
jQuery Mobile Demo Sourcejquery-mobile-demo.zip1KBHTTP
Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!
  1. Prodyot says:

    Great tutorial.
    Thanks

Comment