jQuery Mobile - A Simple Example

It is getting much easier to build web applications targeting mobile devices, like smartphones and tablets.


There are a number of frameworks that exist in the market to help you do the heavy-lifting, like handling user interactions and screen transitions. jQuery Mobile is one of them.



jQuery Mobile

jQuery Mobile is an open-source project and is very easy to use. It provides a number of widgets that simulate existing behaviour of mobile devices, like Apple iOS, Android, Blackberry etc. The idea is to provide a unified user interface that works across all popular mobile devices. That means, you can develop a web application that works on all of the supported devices.


It utilizes the most advanced HTLM5 to construct widgets and simulate effects.


Setting up the environment

The first thing is to download the framework from the jQuery Mobile site. It comes with two favourites: uncompressed or minified. The uncompressed version is good for debugging, but not for production, as it has a bigger size. The minified version is for production deployment.


You also need to download the jQuery framework from the jQuery site, as the jQuery Mobile is built on top of the popular jQuery framework.


Constructing a web-page

Including the required files in the HTML header

Before doing anything, you must include the required files in your html header section - something like the following:

<link rel="stylesheet" href="/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="/jquery-1.6.1.min.js" />
<script type="text/javascript" src="/jquery.mobile-1.0rc1.min.js" />


Page structure

Each mobile web page is divided into three parts, i.e. header, body and footer. It uses a <div> tag and a special data-role attribute to inform the framework what it should be.


The structure of a page is something like:

<div data-role="page"> 
 <div data-role="header">...</div> 
 <div data-role="content">...</div> 
 <div data-role="footer">...</div> 


Here is an example of a simple page:

 <div data-role="page"> 
  <div data-role="header">
   <h1>The Header</h1>
  <div data-role="content">
   <h1>The Content</h1>
  <div data-role="footer">
   <h1>The Footer</h1>


Page content

It supports normal HTML elements, such and <h1>, <p>, <ul>, <li> and etc. Constructing a page content is very simple - similar to building a normal HTML page. Other than using the normal HTML elements, you can use jQuery Mobile specific data-transition attribute to achieve your preferred transition effect.


For example, the following links use the slide transition to shift a new page in from the right and shift it out to the right if the back button is pressed.

<div data-role="content"> 
 <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
  <li data-role="list-divider">Recent Articles</li>
  <li><a href='show_content.php?id=59' data-transition='slide'>Smartphone native-app vs web-app</a></li>
  <li><a href='show_content.php?id=58' data-transition='slide'>RESTful Clients in iPhone</a></li>



Putting it in action

At the time of writing, jQuery Mobile has just released 1.0 RC1. I have used it to turn my web site to be mobile friendly. You can access it through this URL - http://m.thekspace.com


If you are interested in this technology, free feel to check the http://jquerymobile.com/ site, and browse their documents and demo.