Icon sneak peek

While it is not specifically a header toolbar feature, one interesting feature available to all buttons in jQuery Mobile is the ability to specify an icon. A set of simple, easily recognizable icons ship with jQuery Mobile and are available to use immediately. These icons will be discussed further in Chapter 6, Working with Forms and jQuery Mobile. But as a quick preview, the following code snippet shows a header with two customized icons:

Listing 3-3: header_test3.html
<div data-role="header">
  <a href="index.html" data-icon="home">Home</a>
  <h1>My Header</h1>
  <a href="contact.html" data-icon="info">Contact</a>
</div>

Notice the new attribute, data-icon. When viewed in the browser, you will get what is shown in the following screenshot:

The specific icons displayed were based on the values passed to the data-icon attributes. Again, this will be discussed more in depth later...