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.
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.
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>
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).
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.
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.
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:
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.
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.