O'Reilly logo

Beginning JavaScript® and CSS Development with jQuery by Richard York

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

Chapter 16. Tabs

In this, the final installment of my introduction to jQuery and jQuery UI, I present how to work with the jQuery UI Tabs plugin, a plugin that makes it easier to implement tabbed functionality, in which you click on a series of tabs that toggles the display of content that either already exists in the document or is loaded via an AJAX Request.

jQuery UI provides all the functional aspects that you would need to implement a tabbed user interface, but does not provide any of the presentational aspects — you are expected to BYOSS ("Bring Your Own Style Sheet").

Implementing tabbed user interface, like many of the plugin functionality that jQuery UI offers, is very easy. You need only learn about 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.

In this chapter, I cover how to implement and style a tabbed user interface, and I cover a few of the options offered by the Tabs plugin that you're most likely to use.

Implementing Tabs

To get started, I present a barebones implementation of the jQuery UI Tabs plugin, which is the purpose of the following document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='content-language' content='en-us' ...

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