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

Simplifying the tab theme

Sometimes, the context of our tabs widget has important theme implications. The default visual components of the tabs widget work best when the widget is near the top of the document, that is, the majority of the page content is nested within the tab panels. In contrast, there may be preexisting page elements that could benefit from being organized by a tabs widget. And therein lies the challenge—stuffing a top-level widget such as tabs into a smaller block can look awkward at best, unless we can figure out a way to strip down some unnecessary theme components from the tabs.

How to do it...

Let's first create ourselves some markup to base the tabs widget on. It should look something like the following:

<div id="tabs-container"> ...

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