O'Reilly logo

jQuery Mobile Web Development Essentials Second Edition by Andy Matthews, Raymond Camden

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Icon sneak peak

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required