jQuery Mobile: Up and Running

Chapter 3. UI Components

jQuery Mobile has a great set of UI components to use on our webapp. Remember that we can always use plain HTML and CSS for adding our own content and ideas. However, for cross compatibility purposes, we are going to give usage priority to framework’s components.

We can divide jQuery Mobile’s components into the following groups:

• Toolbar components

• Formatting components

• Button components

• List components

• Form components

In this chapter we will examine the first three categories, while saving list and form components for later.

Toolbars

Toolbars are optional areas in our webapp defining headers and/or footers. They are both optional, although headers are usually on every mobile webapp.

We have already talked about the header in the previous chapter: it’s the upper bar where the title and/or the back/close button are located. It is defined generally as a div with a role or header usually with an h1 title:

<div data-role="header">
   <h1>Page's title</h1>
</div>

The footer is a similar bar, located at the bottom of the webapp, with a more general purpose. It can include copyright information, a call action link, or a series of buttons such as a toolbar or a tab navigator area. It is usually a div with a footer role:

<div data-role="footer">

</div>

Positioning

Positioning toolbars seems easy: headers at the top, footers at the bottom. However, jQuery Mobile’s positioning system lets us define different behaviors for both toolbars.

Every toolbar (header or footer) can be positioned ...