Book Image

jQuery Mobile First Look

Book Image

jQuery Mobile First Look

Overview of this book

Table of Contents (17 chapters)
jQuery Mobile First Look
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Different types of bars


Being the great framework it is, jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios: header bars, footer bars, and navigation bars.

Header bars

The Header bar serves as the page title, is usually the first element inside each mobile page, and typically contains a page title and up to two buttons.

We can place buttons on the left or right of the page title element, which is a heading. All heading levels from H1 through H6 are allowed to represent the page title and are treated and styled the same, provided they are inside a div whose data-role is set to 'header'.

Note

It's common practice to include a header element at the top of each page, though it is not required. Pages can also consist of the content portion exclusively.

Creating a header

Creating a header is really, really simple. Here's how:

  1. Inside the page div, but before the content container, add a div with a data-role='header' attribute:

    <div data-role="header"&gt...