Create Your First jQuery Mobile Application

August 14, 2011

View Demo
Download

jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile.

The best way to understand jQuery Mobile is to dive right in.

Basic HTML5 Page

Creating a simple HTML5 page and include the jQuery and jQuery Mobile libraries, this includes everything you need to start building a jQuery mobile application.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/> /* control layout on mobile browsers */
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js">
<title>Test Mobile Application</title>
</script>
</head>
<body>
</body>
</html>

Include Content

We need to include some content, we have access to all of the new tags like, header, nav, section, footer and more.

<section id="homePage">
<header>
<h1>Header</h1>
</header>
<div class="content">
<p>Homepage</p>
</div>
<footer>
<h1>Footer</h1>
</footer>
</section>

Attribute data-role

jQuery Mobile does need us to indicate the roles of the content areas.

jQuery Mobile uses a custom data- attribute:data-role.
Valid data-role values include page, header, content, and footer. Now we apply the data-roles attributes to our example.

<section id="homePage" data-role="page">
<header data-role="header">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>Homepage</p>
</div>
<footer data-role="footer">
<h1>Footer</h1>
</footer>
</section>

Positioning the Header and Footer

We can choose three different ways to dynamically position the header and footer toolbars, now apply in this example the data-position=”fixed” attributes to header and footer toolbars.

  1. Default
    In this mode, the headers and footer sit in the natural document flow, which ensures that they are visible on all devices.
  2. Fixed
    The header and footer will appear at the top and bottom of the viewport and remain there as the user scrolls.
  3. Fullscreen
    Works just like the fixed mode except that the toolbars aren’t shown at the top and bottom of the page and only appear when the page is clicked. 
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
/* content */
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>

Insert Multiple Internal Pages

A single HTML document can contain multiple pages that are loaded together by stacking multiple section with a data-role=”page” attributes.

Each page block needs a unique ID section id=”page1″ that will be used to link internally between pages href=”#page1″.

When a link is clicked, the framework will look for an internal page with the ID and create smooth page transitions.

<!-- Begin Homepage -->
<section id="homePage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>Homepage</p>
<p><a href="#aboutPage">Go to About Page</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End Homepage -->

<!-- Begin About Page -->
<section id="aboutPage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>This is About Page</p>
<p><a href="#portfolioPage">Go to Portfolio Page</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End About page -->

<!-- Begin Portfolio Page -->
<section id="portfolioPage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>This is Portfolio Page</p>
<p><a href="#homePage">Go back to Homepage</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End Portfolio page -->

Transitions

jQuery Mobile has several animated transitions that can be used when changing pages or displaying dialogs, to specify a transition, apply the data-transition property to the link.

  1. fade
    Simply fade the page or dialog in over the previous content.
  2. flip
    An animated page flip, rotating the current view out with the other view on the reverse side.
  3. pop
    The page springs into view from the center of the screen.
  4. slide
    Slide in from the left or right, pushing previous content out of the way.
  5. slidedown
    Slide down from the top, over the top of the current content.
  6. slideup
    Slide up to the top, revealing the next content below. 
<!-- Begin Homepage -->
<section id="homePage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>Homepage</p>
<p><a href="#aboutPage" data-transition="flip">Go to About Page</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End Homepage -->

<!-- Begin About Page -->
<section id="aboutPage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>This is About Page</p>
<p><a href="#portfolioPage" data-transition="fade">Go to Portfolio Page</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End About page -->

<!-- Begin Portfolio Page -->
<section id="portfolioPage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>This is Portfolio Page</p>
<p><a href="#homePage" data-transition="slide">Go back to Homepage</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End Portfolio page -->

Themes

We can easily use themes anything in jQuery Mobile with data-theme attributes. jQuery Mobile’s default Theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference.

The data-theme attribute can be applied to any enhanced element and will cascade down through child elements.

<!-- Begin Homepage -->
<section id="homePage" data-role="page" data-theme="a">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>Homepage</p>
<p><a href="#aboutPage">Go to About Page</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End Homepage -->

<!-- Begin About Page -->
<section id="aboutPage" data-role="page" data-theme="b">
<header data-role="header" data-position="fixed">
<h1>Header</h1>
</header>
<div class="content" data-role="content">
<p>This is About Page</p>
<p><a href="#portfolioPage">Go to Portfolio Page</a></p>
</div>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</section>
<!-- End About page -->

<!-- Begin Portfolio Page -->
<section id="portfolioPage" data-role="page" data-theme="a">
<header data-role="header" data-position="fixed" data-theme="d">
<h1>Header</h1>
</header>
<div class="content" data-role="content" data-theme="c">
<p>This is Portfolio Page</p>
<p><a href="#homePage">Go back to Homepage</a></p>
</div>
<footer data-role="footer" data-position="fixed" data-theme="d">
<h1>Footer</h1>
</footer>
</section>
<!-- End Portfolio page -->

Conclusion

These are the basics, do not forget to exercise, to understand this framework, for more detailed definitions see jQuery Mobile: Demos and Documentation.

Share On