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' ...
Get Beginning JavaScript® and CSS Development with jQuery now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
