The Data Attribute and jQuery Mobile

HTML5 introduced the data attribute. The data attribute allows you to store custom bits of data in your HTML for use with Javascript. It's a wonderfully simple way to keeps bits of information stored together and related. The data attribute consists of two parts:

Attribute name: Use the "data-" prefix with a word at least one letter long and no capital letters.

Attribute value: Like all attribute values in HTML, just put the value in quote marks.

For example, we could store the URL and caption of an enlargement with the thumbnail for a gallery application like this:

<img src="assets/thumbnail.jpg" alt="Pretty Picture" data-enlargement="assets/enlargement.jpg" data-caption="My Summer Vacation">

Using Javascript, you can extract the path for the enlargement and the caption, and display it when you click on the thumbnail. The custom data attributes do not display and are completely ignored until Javascript steps in and calls them out.

Custom data attributes are simple and enormously useful. You can use them to store all kinds of information, like the start health or wealth of a character in a Javascript game, or for final x /y coordinates for an animation, subtitles for a video, email addresses or phone numbers for a dynamic contact page, and much more.

jQuery Mobile uses them to make creating touch-optimized web applications a snap.

Introducing jQuery Mobile

The alpha of jQuery Mobile went live in October of 2010. It is a new framework built on top of jQuery and still very much under development. jQuery Mobile extends jQuery goodness to a host of mobile devices. jQuery Mobile follows jQuery's cross-platform/cross-browser philosophy into the complex mobile ecosystem. Mobile browsers are graded and grouped according to their capabilities. jQuery Mobile provides dynamic interfaces to the different OSS, based on their capabilities and graceful degrades. The "A" grade browsers were the focus of the alpha release. Support has been expanded in subsequent releases.

jQuery Mobile provides a nifty collection of components, widgets, and custom events, all optimized for touch-enabled devices.

Components:

• Pages, dialog boxes, and transitions: You can create and link pages from either a single file or from dynamically injected pages using Ajax loading. There is a host of nice page transitions featuring slides, flips, pops, fades, and more.
• Toolbars: You can create headers, footers, nav bars, and more.
• Buttons: Any link can be converted into a button complete with icon. Buttons can live in line or be grouped.
• Content formatting: You can pour your content into columned layout grids, collapsible content blocks, or accordions.
• Form elements optimized for touch devices: jQuery Mobile takes standard HTML form controls and optimizes them for touch-enabled devices. In addition, there are sweet controls that have no simple alternatives without the use of Javascript like sliders, flip toggle switches, and search inputs.
• List views: Lists are a natural interface for mobile devices. The increased importance gets a dress treatment from jQuery Mobile. jQuery Mobile provides formatting solutions for the most common design patterns -- think of it as lists on steroids.

Custom Events:

• Touch events: Includes support for events like tap, taphold, swipe, swipeleft, and swiperight.
• Change in orientation: Triggers when the device is moved from landscape to portrait and back again. It holds a single property that can be leveraged by the CSS.
• Scroll events: Tracks both scrollstart and scrollstop.
• Page show/hide events: Triggered when pages are shown or hidden. Aids in the transitions.
• Page initialization event.
• Virtual mouse events: These virtual mouse events normalize mouse events and touch events. This registers the correct event listeners behind the scenes and fires them in the fastest possible way for each specific device. It retains the order of traditional events that would be fired from a mouse.

There is much, much more.

jQuery Mobile presents a full set of features:

• Progressive enhancement: jQuery Mobile takes the basic, fully functional website you have built and layers additional Javascript functionality over the top based on the browser's abilities. This means your site/web app will work in more browsers, even those that don't support Javascript.
• Graceful degradation: Experience is enhanced in browsers that can support it but lesser browsers still receive the best possible experience they can handle.
• Accessibility: jQuery Mobile components are navigable by keyboard.
• Simplicity: jQuery Mobile is ridiculously easy to get started with.
• Theming: Like its cousin jQuery UI, jQuery Mobile is fully theme-able. It's easy to customize the look and feel of your web site/app.