Toolbars
The jQuery Mobile framework includes headers and footers as its standard toolbars; however, toolbars can also be used to display navigation, as with navbar. The default use of the header in jQuery Mobile is to serve as a page title that anchors to the top of the web page; the footer is most often the final element in a web page and includes content such as copyright information, additional hyperlinks, and so on.
Creating a header or footer is as easy as adding a data-role attribute to an HTML element. Listing 1 shows how easy it is to create a Header and Footer toolbar.
<div data-role="header"> <h1>My Page Title</h1> </div> <!-- Some page content... --> <div data-role="footer"> <p>Copyright notice</p> </div>
You can customize headers and footers using CSS, or you can use some of the available data- attributes, such as data-position, which sets the positioning behavior of a toolbar. The default value for this attribute is inline, but you can also set its value to fixed to keep a toolbar, such as the header, in a specific location, even when the web page is scrolled. Another position worth mentioning is fullscreen. The fullscreen mode is the same as fixed, but the toolbars do not appear on the web page until the user begins interacting with the page. When a user interacts with a web page, the toolbars appear, allowing the user to interact with them, and then disappear when the user stops interacting with the page (Listing 2). This option is useful when displaying a video player, photo gallery, or the like.
<div data-role="header" data-position="fullscreen"> <h1>My Page Title</h1> </div> <!-- Some page content... --> <div data-role="footer" data-position="fullscreen"> <p>Copyright notice</p> </div>
The navbar is used to display up to five buttons or navigation items within a header or footer. Depending on how many buttons you add to thenavbar, it evenly distributes them so that they are all the same size. To create a navbar you can simply add a data-role attribute to an element that surrounds a list and set its value to navbar (Listing 3). The list is dynamically converted into a horizontal navigation bar with hover, static, and active states, which can all be customized using the jQuery Mobile theme framework.
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li><a href="#">Nav item 1</a></li>
<li><a href="#">Nav item 2</a></li>
</ul>
</div>
</div>
Another nice feature of the navbar is that you can include custom icons within each button. The jQuery Mobile framework includes a set of standard mobile icons that can be used via the data-icon attribute, or you can use any custom icons you create or purchase.
