What is jQuery Mobile?

jQuery Mobile Framework

jQuery Mobile is a framework that allows developers to build mobile websites in the same way that they would build websites for desktop browsers. It allows us to write code that works consistently across the most frequently used smart phone and tablet browsers. To ensure cross-browser/-device compatibility, jQuery Mobile is built on clean, semantic HTML.

Key Features

• Familiar and consistent jQuery syntax – minimal learning curve
• Compatible with all major mobile platforms – Apple iOS (3.1-4.2), Android (1.6-2.3), Blackberry 6, Palm WebOS (1.4), Opera Mobile (10.1), Opera Mini (5.02), Firefox Mobile (beta)
• Lightweight size – small file sizes and minimal image dependencies
• HTML5 markup – fast development and minimal scripting required
• Progressive enhancement approach – brings core content and functionality to all platforms and a rich, application-like experience on newer mobile platforms
• Automatic initialization – automatically initializes all jQuery Mobile widgets on a page
• Accessibility features – ensures that pages work for screen readers and other assistive technologies
• New events – streamlines touch, mouse, and cursor events with a simple API
• New plugins – enhances native controls with touch-optimized, themable controls
• Powerful theming framework – makes it easy to build highly branded experiences

Supported Platforms

Although the supported platforms offer a solid mobile experience, there are many enhancements to be made and bugs to be fixed before the 2011 stable release. By that time, developers hope to also support Blackberry 5, Nokia/Symbian, and Windows Phone 7. In addition, since jQuery Mobile is built on jQuery, all pages should also work well on desktop browsers like Safari, Firefox, Chrome, and Internet Explorer.

Mobile Page Structure

Below is the standard structure of a web page using jQuery Mobile. Each page is just a div with the attribute data-role=”page”. Any valid HTML markup can be used within a page, but divs with data-roles of “header”, “content”, and “footer” are used most often. An HTML file can also contain multiple pages that are loaded together by stacking multiple divs with data-role=”page”.

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

Auto Initialization

jQuery Mobile automatically applies many enhancements, such as creating custom inputs for a more touch-friendly experience, immediately upon execution. However, these enhancements can be easily overwritten to suit your needs (e.g. using default input styles instead of custom ones).

Page Linking

jQuery Mobile uses Ajax to automate the process of loading web pages, which creates a rich, app-like experience that can’t be achieved with standard HTTP requests. When you click on an external link, the framework sends an Ajax request and either adds the new content and animates it into view or displays an error message popup if the Ajax request fails.

Media Query Helper Classes

jQuery Mobile adds classes to a web page that mimic browser orientation and common min-/max-width CSS media queries. These classes are updated on load, resize, and orientation change, allowing you to create responsive layouts in your CSS.

Theming

The default jQuery Mobile theme includes 5 swatches (a-e). The appearance of these swatches can be altered using CSS; you can also create your own swatches for endless styling options.

Some cool things about theming:

• Rounded corners, shadows, and gradients are automatically applied to certain elements without the use of images, so files are very light and fewer server requests are needed.
• When a button or form is added to a container, it is automatically assigned a theme that matches its parent container to visually integrate the element.
• The framework includes a set of icons most often needed for mobile apps. To minimize download size, a single sprite of white icons is included and a semi- transparent black circle is added behind the icon to ensure contrast on any background.

Form Elements

All form elements begin with standard HTML controls that are enhanced to make them more attractive and easy-to-use. Browsers that don’t support the custom controls will still offer a usable experience because they are all based on native form elements.

Conclusions

Aside from a learning curve, jQuery Mobile takes on so much of the functionality for which we’ve been creating custom code. With conventional jQuery, developing a mobile website often means handwriting code to load pages using Ajax, creating animations to style elements and make the site feel more like a native app, and using a lot of images to achieve the desired look and feel – not to mention making sure that it works consistently across all major mobile devices. This framework is worth taking a deeper look at because it can save time, code, and overhead.