Web Development with jQuery

Chapter 18Tabs

This installment of my introduction to jQuery and jQuery UI presents how to work with the jQuery UI Tabs plugin, a plugin that makes it easier to implement tabbed functionality, in which you click a series of tabs that toggles the display of content that either already exists in the document or is loaded dynamically via an AJAX request.

jQuery UI provides all the functional aspects that you need to implement a tabbed user interface. For styling the interface, like Dialog and the Datepicker, you can either use a jQuery UI theme or create your own style sheet.

Implementing a tabbed user interface, like much of the plugin functionality that jQuery UI offers, is easy and straightforward. You need learn about only a few fundamentals, such as how to structure markup destined to become tabs and, of course, the various options that the Tabs plugin offers to allow tweaking the implementation to cover the variations in use as well as callback events.

This chapter covers how to implement and style a tabbed user interface and covers a few of the options offered by the Tabs plugin that you're most likely to be interested in using. Like the other jQuery UI plugins, a comprehensive reference of options, callback events, and arguments are covered in Appendix Q, “Tabs.”

Implementing Tabs

To start with your tabbed user interface implementation, here's a remedial demonstration of the jQuery UI Tabs plugin without any options or styling. The objective is to present where you stand ...