While 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:
code 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 get what is shown in the following screenshot:
The specific ...