Ta b s
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 inter-
face. 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 using the plugin out-of-the-box, which is the purpose of the following example
(Example 18-1 in the source code download materials at http://www.wrox.com/go/webdevwithjquery):<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Tabs Plugin</title>