Getting started with jQuery Mobile
Feb 10, 2012
Most companies have already an established website, but are lacking a very important aspect. The number of smartphones and tablets on the market currently only continues to increase; this means that everyday more and more people are trying access your content on these devices. However, with such an increase in mobile visitors, there has not been as great of an increase in mobile-optimized sites, therefore, most web pages are just not meant to be viewed on smaller resolutions.
This is where jQuery Mobile kicks in! jQuery Mobile is a JavaScript framework that is touch-optimized, allowing developers to create a mobile version of a website in less time as well as presenting the complete functionality to the end user.
This tutorial will show you how to start using jQuery Mobile in just a few, easy steps.
Requirements
To start using this powerful framework, you will need the following files:
- jquery.mobile-1.0.1.min.css
- jquery-1.6.4.min.js
- jquery.mobile-1.0.1.min.js
The first file sets the basic styles for your website (I will show you how to customize the look and feel of your app using ThemeRoller in a future post).
The second file is the jQuery framework, this is the base of the mobile framework and it will need it to run properly.
The third and last one is the Mobile library. It contains all the necessary JavaScript for a great mobile experience.
You can download these files and host them yourself or add the recommended snippet that points to the files on the jQuery servers:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>Declaration
For this example I'm going to be hosting the files myself.
So, let's start with the document declaration, it's basically an HTML5 declaration with a <meta> tag that will control the layout and rendering for mobile devices, recognizing the device's width and using it to rescale the display.
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>oshyn.com</title>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.min.css" />
<link rel="stylesheet" href="css/oshyn.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
</head>You'll see that I've added my own stylesheet to tweak the look of the site a bit.
Structure
One big advantage to exploit is that you can have several pages on one HTML document. This comes very handy for navigation purposes; you can have your entire navigation structure in a single HTML document and only create separate documents for content pages.
Technically you could build your entire site on one document, but I don't recommend it because it could result in a heavy site to load the first time.
Here's an example of two pages on the same document:
<body>
<!---------------------------------------------------------------------->
<!---------------------------Home Page---------------------------------->
<!---------------------------------------------------------------------->
<div data-role="page" data-theme="a" data-add-back-btn="true">
<div data-role="header" data-theme="a">
<h1><a href="index.html"><img src="images/logo.png" alt="oshyn.com" /></a></h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
<li data-role="list-divider">home</li>
<li><a href="expertise.html" data-transition="slide">expertise</a></li>
<li><a href="#solutions" data-transition="slide">solutions</a></li>
<li><a href="#work" data-transition="slide">work</a></li>
<li><a href="#resources" data-transition="slide">resources</a></li>
<li><a href="#partners" data-transition="slide">partners</a></li>
<li><a href="#company" data-transition="slide">company</a></li>
</ul>
<br /><br />
<ul data-role="listview" data-theme="b" data-dividertheme="a">
<li><a href="contact.html" data-transition="slide">Contact Us</a></li>
<li><a href="contact.html" data-transition="slide">Privacy Policy</a></li>
<li><a href="contact.html" data-transition="slide">Terms of Use</a></li>
</ul>
</div>
<div data-role="footer">
<h1>©oshyn.com</h1>
</div>
</div>
<!---------------------------------------------------------------------->
<!-----------------------------solutions--------------------------------->
<!---------------------------------------------------------------------->
<div data-role="page" data-theme="a" id="solutions" data-add-back-btn="true">
<div data-role="header" data-theme="a">
<h1><a href="index.html"><img src="images/logo.png" alt="oshyn.com" /></a></h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
<li data-role="list-divider">Solutions</li>
<li><a href="sample.html" data-transition="slideup">Overview</a></li>
<li><a href="sample.html" data-transition="slidedown">Content Management</a></li>
<li><a href="sample.html" data-transition="pop">E-Commerce</a></li>
<li><a href="sample.html" data-transition="flip">SOA</a></li>
<li><a href="sample.html" data-transition="slideup">Portals & Collaboration</a></li>
<li><a href="sample.html" data-transition="slidedown">Web Strategy</a></li>
<li><a href="sample.html" data-transition="pop">Mobile Platforms</a></li>
<li><a href="sample.html" data-transition="flip">Social Media</a></li>
</ul>
<br /><br />
<ul data-role="listview" data-theme="b" data-dividertheme="a">
<li><a href="contact.html" data-transition="slide">Contact Us</a></li>
<li><a href="contact.html" data-transition="slide">Privacy Policy</a></li>
<li><a href="contact.html" data-transition="slide">Terms of Use</a></li>
</ul>
</div>
<div data-role="footer">
<h1>©oshyn.com</h1>
</div>
</div>
</body>Attributes
Here are some of the most important attributes you'll use:
data-role
Notice that setting the data-role attribute to “page”, it automatically defines that piece of HTML as a separate page, and it can have it's own header, content and footer.
This way you can access the different “pages” only using the page id.
If you set it to “listview” on a
<ul>it will generate the typical navigation you find in mobile apps.data-add-back-btn
Another attribute that is extremely useful is the “data-add-back-btn”; if set to true will automatically place a back button when needed.
data-theme
The “data-theme” attribute changes the theme of that specific piece of markup, there are several themes defined by default, just try changing the letters to a,b,c to change the colors.
data-transition
This attribute defines the effect that will be shown when changing from one page to another, the values can be: slide, slideup, slidedown, pop, fade and flip.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.