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:
In this chapter we will examine the first three categories, while saving list and form components for later.
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
header usually with
<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 data-role="footer"> </div>
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 ...