HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 40

jQuery Mobile: Part II

In this lesson, you will continue with the creation of a jQuery Mobile web application but shift your focus away from pages and navigation and toward mobile-specific UI components and mobile-based events. As mentioned in the previous lesson, mobile devices naturally lend themselves to different approaches from traditional desktops and laptops, and this can impact both the UI components used and the event listeners registered.

UI Components

Mobile phone platforms such as iOS and Android each support a toolkit of UI components (commonly referred to as widgets). Many of these, such as text fields, mirror HTML elements extremely closely. Several others, however, are intended to address the unique needs of mobile devices and do not match corresponding HTML elements.

In order to address this discrepancy, the jQuery Mobile library provides a wide variety of UI components that match those commonly found in native toolkits. You have already encountered several of these in the previous lesson: This included buttons, control groups, pages, tables, headers and footers, and you will continue looking at several others in this section.

The components you have seen so far have all been based on conventional HTML elements such as the table or select elements, but have been transformed into components by jQuery Mobile based on their data attributes and CSS classes.

In fact, in many cases you are using jQuery Mobile components even without realizing it. If you ...