If you are interested in learning jQuery Mobile, you made the right choice. It is one of the top frameworks for development of mobile sites and applications. The framework has a comprehensive and well written documentation. This tutorial complements framework resources. Many people learn well by example and in this tutorial you will build a simple but fully functional mobile application.
The application allows you to maintain a list of your favorite website and share sites from the list with other mobile users through QR codes. While building the application you will cover framework features such as creation of pages, forms, lists, dialog boxes, style themes. You will also create dynamic pages and manage data using local storage.
The tutorial source code is available at https://github.com/rtekie/shareqr. To keep things simple you can test the code locally using a desktop Chrome or Safari browser. Testing using a mobile emulator is another option. You can also access working application at http://rtekie.herokuapp.com/shareqr.html and try it on your mobile phone.
Part I of the tutorial covers framework basics – creation of static pages. Part II introduces dynamic pages. In Part III you will add data management features – ability to add, store and delete records – and complete the application.
Part I – Static Pages
1.1 Your first page
jQuery Mobile provides a basic page template which can be used as a starting point. The template is very well documented so we will dive right into the source code:
Things to note are:
- jQuery Mobile relies on HTML5. Hence the HTML5 doctype declaration.
- jQuery Mobile requires jQuery and you need to include not only mobile framework files (jquery.mobile-1.2.0.min.js and jquery.mobile-1.2.0.min.css) but also the regular jQuery framework (jquery-1.7.2.min.js).
- Viewport meta tag is used to initialize page dimensions and zoom level.
- jQuery Mobile uses extensively HTML5 data- attributes to control page elements’ look and behavior. The first attribute introduced by this tutorial is data-role which is used to identify pages and page structure elements – header, content area and footer.
1.2 Adding a style
jQuery Mobile includes five pre-defined style themes. If no style is specified, the default theme is used. Let’s change header and footer color to blue. It is as simple as adding a
data-theme="b" attribute to the header and footer. Here is the updated code:
1.3 Adding a second page and page navigation
Web pages designed for desktop are typically displayed by loading their own, separate html files. In the mobile world, pages are typically small and connectivity slower and sometimes problematic. Hence there are advantages of packaging multiple pages into a single html file. A file is loaded once and all pages contained within the file can be displayed without any additional network requests.
Page packaging is one of the features of jQuery Mobile.
To add a second page, first insert the page code into the html file containing your first page. We will add About as the second page:
Next we will add page navigation. Links to pages rely on page id, which has to be unique for each page. Home page has id=”home” hence a link to the home page will use href=”#home”. Similarly the About page has id=”about” and a link to it will use href=”#about”.
Let’s add a link to the About page in the footer of both pages:
The link is automatically rendered as a button. It can be further improved by adding an icon. jQuery Mobile includes a number of icons you can choose from. We will use the info icon.
<a href="#about" data-icon="info">About</a>
By default footer does not have any padding around buttons. To include padding we’ll add
class="ui-bar"to the footer. We’ll also add
data-id="footer" to persist footer and keep it at fixed vertical position between page transitions. Here is the updated footer code:
<div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
You can find out more about jQuery Mobile footer features at the Footer configuration page.
Now let’s add a link to the Home page in the header of both pages:
<a href="#home" data-icon="home">Home</a>
This time we would like to see an icon only button, and to accomplish that we will add a
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
There is one more button to add – a Back button in the header of the About page:
<a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
Here we are using
data-rel="back" attribute to indicate that the button should mimic behavior of a browser Back button.
You can find out more about jQuery Mobile header features at the Header bars page.
The complete code for Part I of the tutorial is shown below:
This completes Part I. You can access work in progress application on your mobile phone at http://rtekie.herokuapp.com/shareqr1.3.html. Screen shots are shown below: