Developer Network Home - Help

Yahoo! UI Library: TabView

Yahoo! UI Library: TabView

The TabView component is designed to enable developers to create navigable tabbed views of content.

Getting Started

To use the TabView component, include the following source code in your web page:

Next, apply the yui-skin-sam class name to an element that is a parent of the element in which the TabView Control lives. You can usually accomplish this simply by putting the class on the <body> tag:

For more information on skinning YUI components and making use of default skins, see our Understanding YUI Skins article here on the website.

YUI dependency configurator.

YUI Dependency Configurator:

Instead of copying and pasting the filepaths above, try letting the YUI dependency Configurator determine the optimal file list for your desired components; the Configurator uses YUI Loader write out the full HTML for including the precise files you need for your implementation.

Note: If you wish to include this component via the YUI Loader, its module name is tabview. (Click here for the full list of module names for YUI Loader.)

Where these files come from: The files included using the text above will be served from Yahoo! servers; see "Serving YUI Files from Yahoo!" for important information about this service. JavaScript files are minified, meaning that comments and white space have been removed to make them more efficient to download. To use the full, commented versions or the -debug versions of YUI JavaScript files, please download the library distribution and host the files on your own server.

Order matters: As is the case generally with JavaScript and CSS, order matters; these files should be included in the order specified above. If you include files in the wrong order, errors may result.

Basic Setup

TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (<li>). The root element of the TabView is a <div> element.

The TabView control is defined by YAHOO.widget.TabView. To create a TabView from existing markup you can simply pass the id (or object reference) for the HTMLElement that will become the TabView. If you follow the default markup pattern outlined below, the tabs will be constructed automatically. The list item with class="selected" becomes the active tab.

In the next example, the TabView is generated entirely through JavaScript. Here the TabView's DOM structure will be assembled in a new element and appended to the existing document.body.

Using TabView and Tab

This section describes several common uses and customizations of TabView and Tab instances and contains these subsections:

Handling Events

All of the the events for TabView and Tab (including DOM-based events such as "mouseover" or "click") can be listened for via addListener (or on for short).

Note: If you want to listen for DOM-based events you should always use the provided event interface rather than attaching handlers directly to a Tab or Tabview DOM elements.

The event object is passed to the handler function as the first argument. For DOM events, this is the actual event object.

For TabView-specific events (ie, non-DOM events), the first argument passed to your handler is an object containing relevant event information. For change events, this includes prevValue (the previous value of the attribute) and newValue (the new value of the attribute).

Additionally, attribute changes done via the set interface (e.g. tab0.set('content', 'foo');) can be cancelled by returning false from the beforeChange event.

Event listeners can be removed using removeListener.

Configuration Attributes

Configuration attributes are accessible at runtime through the Tab and TabView get and set methods. For example:

See the reference table below as well as the API documentation for TabView and Tab for a complete list of configuration attributes.

Reference Tables

The following tables contain information about configuration attributes and CSS classes for the TabView and Tab classes. These tables include:

TabView Configuration Attributes

Name Type Default Description
See the API documentation for a complete list of methods and properties.
activeIndex Int null Integer indicating the index of the Tab that is currently active in the TabView.
activeTab YAHOO.widget.Tab null The Tab instance representing the currently active Tab in the TabView.
element HTMLElement null The HTMLElement that the TabView is bound to.
orientation String "top" How the Tabs should be oriented relative to the TabView.
tabs Array [] A read only reference to all of the Tabs belonging to the TabView.

Tab Configuration Attributes

Name Type Default Description
See the API documentation for a complete list of methods and properties.
active Boolean false Boolean indicating whether or not the Tab is currently active.
cacheData Boolean false Whether or not Tab data should be cached when data is being loaded dynamically (only applicable when dataSrc is provided).
content String null The content displayed by the activeTab.
contentEl HTMLElement null The element that contains the Tab's content.
dataLoaded Boolean false Whether or not dynamic data has been loaded yet (only applicable when dataSrc is provided).
dataSrc String null If set, tab data is loaded dynamically from this url when tab is activated; requires Connection Manager.
dataTimeout Int null Number of milliseconds to wait before aborting XHR connection and firing failure handler (only applicable when dataSrc is provided).
disabled Boolean false If set, Tab cannot be activated.
label String null The Tab's label text (or innerHTML).
labelEl HTMLElement null The element that contains the Tab's label.
loadMethod String "GET" The method to use for the data request (only applicable when dataSrc is provided).

CSS Classes

Name Description
yui-navset Applied to a TabView's <div> element.
yui-nav Applied to a TabView's <ul> element.
yui-content Applied to a TabView's content-containing <div> element.
disabled Applied to disabled Tab (<li>) elements.
selected Applied to active Tab <li> elements.
loading Applied to a TabView's content container (yui-content) element while data is being loaded from dataSrc.

YUI on Mobile: Using TabView Control with "A-Grade" Mobile Browsers

About this Section: YUI generally works well with mobile browsers that are based on A-Grade browser foundations. For example, Nokia's N-series phones, including the N95, use a browser based on Webkit — the same foundation shared by Apple's Safari browser, which is found on the iPhone. The fundamental challenges in developing for this emerging class of full, A-Grade-derived browsers on handheld devices are:

  • Screen size: You have a much smaller canvas;
  • Input devices: Mobile devices generally do not have mouse input, and therefore are missing some or all mouse events (like mouseover);
  • Processor power: Mobile devices have slower processors that can more easily be saturated by JavaScript and DOM interactions — and processor usage affects things like battery life in ways that don't have analogues in desktop browsers;
  • Latency: Most mobile devices have a much higher latency on the network than do terrestrially networked PCs; this can make pages with many script, css or other types of external files load much more slowly.

There are other considerations, many of them device/browser specific (for example, current versions of the iPhone's Safari browser do not support Flash). The goal of these sections on YUI User's Guides is to provide you some preliminary insights about how specific components perform on this emerging class of mobile devices. Although we have not done exhaustive testing, and although these browsers are revving quickly and present a moving target, our goal is to provide some early, provisional advice to help you get started as you contemplate how your YUI-based application will render in the mobile world.

More Information:

In our experience, the YUI TabView Control works well on A-Grade-based mobile devices; our expectation is that you will find TabView a useful widget when trying to get the most out of your mobile interface. When designing for mobile, especially touch screen interfaces, you will likely want to style the Tabs to have a larger clickable region. You can do this by setting padding on the inner element (<em>) of the Tab item (for example, .yui-navset .yui-nav li em {}).

Support & Community

The YUI Library and related topics are discussed on the on the ydn-javascript mailing list.

In addition, please visit the YUIBlog for updates and articles about the YUI Library written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are located on the YUI SourceForge project site. Before filing new feature requests or bug reports, please review our reporting guidelines.

TabView Control Cheat Sheet:

Cheat Sheet for the TabView Control.

Download full set of cheat sheets.

TabView Control Examples:

Other YUI Examples That Make Use of the TabView Control:

YUI TabView on del.icio.us:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings