O'Reilly logo

jQuery UI Cookbook by Adam Boduch

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

Giving tabs an icon

The tabs widget uses anchor elements, which when clicked, activate the various tab panels to reveal their content. This anchor element only displays text by default, which is good enough under the vast majority of circumstances. There are other times, however, where the tab link itself would benefit from an icon. For example, a house icon helps quickly cue what is in the panel content before actually activating it. Let's look at how we can extend the tab's capabilities to support using both an icon and text as the tab button.

How to do it...

We'll create a basic tabs div to support our widget that looks like the following:

<div id="tabs"> <ul> <li data-icon="ui-icon-home"> <a href="#home">Home</a> </li> <li data-icon="ui-icon-search"> ...

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