Introduction
jQuery Mobile, a user interface (UI) framework, lets you write a functional mobile web application without writing a single line of JavaScript code. In this article, learn about the features of this framework, including the basic pages, navigation toolbars, form controls, and transition effects.
To follow along with this article, you will need:
- Previous exposure to HTML
- Understanding of JavaScript fundamentals
- Basic knowledge of jQuery
jQuery Mobile
jQuery Mobile is a touch-friendly web UI development framework that lets you develop mobile web applications that work across smartphones and tablets. The jQuery Mobile framework builds on top of jQuery core and provides a number of facilities, including HTML and XML document object model (DOM) traversing and manipulation, handling events, performing server communication using Ajax, as well as animation and image effects for web pages. The mobile framework itself is a separate, additional download of around 12KB (minified and gzipped) from jQuery core, which is around 25KB when minified/gzipped. As with the rest of the jQuery framework, jQuery Mobile is a free, dual-licensed (MIT and GPL) library.
At the time of this writing, the jQuery Mobile framework is an Alpha 2 version (v1.0a2). The code is in draft form and is subject to change. Yet, the existing framework is pretty solid. With an impressive set of components available in the alpha release, jQuery Mobile promises to be a great framework and tool set for developing mobile web applications.
Basic features of jQuery Mobile include:
- General simplicity
- The framework is simple to use. You can develop pages mainly using markup driven with minimal or no JavaScript.
- Progressive enhancement and graceful degradation
- While jQuery Mobile leverages the latest HTML5, CSS3, and JavaScript, not all mobile devices provide such support. jQuery Mobile philosophy is to support both high-end and less capable devices, such as those without JavaScript support, and still provide the best possible experience.
- Accessibility
- jQuery Mobile is designed with accessibility in mind. It has support for Accessible Rich Internet Applications (WAI-ARIA) to help make web pages accessible for visitors with disabilities using assistive technologies.
- Small size
- The overall size of the jQuery Mobile framework is relatively small at 12KB for the JavaScript library, 6KB for the CSS, plus some icons.
- Theming
- The framework also provides a theme system that allows you to provide your own application styling.
Browser support
We've come a long way with mobile device browser support, but not all mobile devices provide support for HTML5, CSS 3, and JavaScript. This arena is where jQuery Mobile's progressive enhancement and graceful degradation support come into play. As stated, jQuery Mobile supports both high-end and less capable devices, such as those without JavaScript support. Progressive Enhancement consists of the following core principles (source: Wikipedia):
- All basic content should be accessible to all browsers.
- All basic functionality should be accessible to all browsers.
- Enhanced layout is provided by externally linked CSS.
- Enhanced behavior is provided by externally linked JavaScript.
- End user browser preferences are respected.
jQuery Mobile currently provides support for the following mobile platforms:
- Apple® iOS: iPhone, iPod Touch, iPad (all versions)
- Android™: all devices (all versions)
- Blackberry® Torch (version 6)
- Palm™ WebOS Pre, Pixi
- Nokia® N900 (in progress)
Summary of UI components
jQuery Mobile provides robust support for different kinds of UI elements. Figure 1 shows a summary of the currently supported UI components.
Figure 1. jQuery Mobile UI elements (as of August 2010)
$.mobile and supported methods and eventsThe JavaScript object
jQuery is also referred to as $. The jQuery Mobile framework extends jQuery core with mobile plug-ins, including the mobile, or $.mobile, which defines several events and methods. Some of the methods exposed by $.mobile are described below.Table 1. Methods exposed by
$.mobile| Method | Usage |
|---|---|
$.mobile.changePage | To programmatically change from one page to another. For example, to go to page weblog.php using a slide transition, use $.mobile.changePage("weblog.php", "slide"). |
$.mobile.pageLoading | To show or hide the page loading message. For example, to hide the message, use $.mobile.pageLoading(true). |
$.mobile.silentScroll | To scroll to a particular Y position without generating scroll events. For example, to scroll to Y position 50, use $.mobile.silentScroll(100). |
$.mobile.addResolutionBreakpoints | jQuery Mobile already defines some breakpoints for min/max classes. Call this method to add breakpoints. For example, to add min/max class for 800 pixel widths, use $.mobile.addResolutionBreakpoints(800). |
$.mobile.activePage | Refers to the currently active page. |
There are several events that you can bind using the
bind() or live() method, such as jQuery Mobile initialization, touch events, orientation change, scroll events, page show/hide events, page-initialization events, and animation events.For example, touch events include
tap, taphold, and various swipe events. Scroll events include scrollstart and scrollstop. Page events allow you to receive notifications: prior to a page creation, when a page is created, just before the page is shown or hidden, and when the page is shown and hidden.Listing 1 shows an example of binding a specific event when jQuery Mobile starts to execute.
Listing 1. Bind to the
mobileinit event$(document).bind("mobileinit", function(){
//apply overrides here
});
|
The event above lets you override default values when jQuery Mobile starts. Several settings can be overridden, such as:
LoadingMessage- Sets the default text that appears when a page is loading.defaultTransition- Sets the default transition for page changes that use Ajax.
You can also bind to other events that allow you to create dynamic applications based on
touch and page events.HTML5
data-* attributesjQuery Mobile relies on HTML5
data-* attributes to support the various UI elements, transitions, and page structure. They are silently discarded by browsers that don't support them. Table 2 shows how to use data-* attributes to create UI components.Table 2.
data-* attributes for UI components| Component | HTML5 data-* attribute |
|---|---|
| Header, Footer toolbars | <div data-role="header"> <div data-role="footer"> |
| Content body | <div data-role="content"> |
| Buttons | <a href="index.html" data-role="button" data-icon="info">Button</a> |
| Grouped buttons | <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a> </div> |
| Inline buttons | <div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div> |
| Form element (Select menu) | <div data-role="fieldcontain"> <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select> </div> |
| Basic List views | <ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li> </ul> |
| Dialogs | <a href="foo.html" data-rel="dialog">Open dialog</a> <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a> |
| Transitions | <a href="index.html" data-transition="pop" data-back="true"> |
The jQuery Mobile documentation has a complete list of supported
data-* syntax.Structure of a jQuery Mobile page
This section discusses the general structure of a jQuery Mobile page. jQuery Mobile has guidelines on the structure of pages themselves. In general, a page structure should have the following sections:
- Header bar
- Typically contains the page title and Back button
- Content
- The content of your application
- Footer bar
- Typically contains navigational elements, copyright information, or whatever you need to add to the footer
Figure 2. General structure of a jQuery Mobile web application
The definition of an HTML type of document itself is
!DOCTYPE html>, which defines an HTML5 document type.The HTML head section loads three important jQuery Mobile components:
- jQuery Core library — The core jQuery library
- jQuery Mobile library — The mobile-specific part of the jQuery framework
- jQuery Mobile CSS — The CSS that defines the core jQuery Mobile UI elements. It defines the transitions and different UI widgets, such as sliders and buttons, and makes heavy use of Webkit transforms and animations.
Listing 2. HTML head section
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
|
The next section of the HTML code defines the page itself; see the use of the
data-role="page" attribute. Listing 3 shows an example.Listing 3. Defining a page block
<body>
<div data-role="page" id="page1">
|
Listing 3 defines a page. The
id attribute is necessary only if local multiple page blocks reside on the same HTML file document, but it's good practice to define a unique ID.The next couple of code listings show how to define the different header, content, and footer sections of the page. The header bar typically consists of the page title and Back button, as shown in Listing 4.
Listing 4. Page header bar section
<div data-role="header">
<h1>Header Bar</h1>
</div><!-- /header -->
|
In this case, the header bar consists of only an H1 header title text. The bulk of your content goes after the header, as shown below. The example in Listing 5 shows only a simple paragraph, but this is where you would add lists, buttons, forms, and so on.
Listing 5. Page content section
<div data-role="content">
<p>Content Section</p>
</div><!-- /content -->
|
The footer bar is where you typically place navigational elements and copyright information, as shown in Listing 6.
Listing 6. Footer bar section
<div data-role="footer">
<h4>Footer Bar</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
|
The example footer section in Listing 6 is very simple. Adding a navigational bar to the footer bar is not very complicated, as shown in Listing 7.
Listing 7. Adding a nav bar to the footer section
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Today</a>
<a href="index.html" data-role="button">Tomorrow</a>
<a href="index.html" data-role="button">Week</a>
<a href="index.html" data-role="button">No date</a>
</div>
</div><!-- /footer -->
|
No comments:
Post a Comment