YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI 2: TabView

YUI 2: 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:

  1. <!-- Sam Skin CSS for TabView -->
  2. <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/tabview/assets/skins/sam/tabview.css">
  3.  
  4. <!-- JavaScript Dependencies for Tabview: -->
  5. <script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  6. <script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
  7.  
  8. <!-- OPTIONAL: Connection (required for dynamic loading of data) -->
  9. <script src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
  10.  
  11. <!-- Source file for TabView -->
  12. <script src="http://yui.yahooapis.com/2.9.0/build/tabview/tabview-min.js"></script>
  13.  
<!-- Sam Skin CSS for TabView -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/tabview/assets/skins/sam/tabview.css">
 
<!-- JavaScript Dependencies for Tabview: -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
 
<!-- OPTIONAL: Connection (required for dynamic loading of data) -->
<script src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
 
<!-- Source file for TabView -->
<script src="http://yui.yahooapis.com/2.9.0/build/tabview/tabview-min.js"></script>
 
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:

  1. <body class="yui-skin-sam">
  2.  
<body class="yui-skin-sam">
 

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 to 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. 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.

  1. var myTabs = new YAHOO.widget.TabView("demo");
  2.  
var myTabs = new YAHOO.widget.TabView("demo");
 
  1. <div id="demo" class="yui-navset">
  2.     <ul class="yui-nav">
  3.         <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
  4.         <li><a href="#tab2"><em>Tab Two Label</em></a></li>
  5.         <li><a href="#tab3"><em>Tab Three Label</em></a></li>
  6.     </ul>            
  7.     <div class="yui-content">
  8.         <div><p>Tab One Content</p></div>
  9.         <div><p>Tab Two Content</p></div>
  10.         <div><p>Tab Three Content</p></div>
  11.     </div>
  12. </div>
  13.  
<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
        <li><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>
    <div class="yui-content">
        <div><p>Tab One Content</p></div>
        <div><p>Tab Two Content</p></div>
        <div><p>Tab Three Content</p></div>
    </div>
</div>
 

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.

  1. var myTabs = new YAHOO.widget.TabView("demo");
  2.  
  3. myTabs.addTab( new YAHOO.widget.Tab({
  4.     label: 'Tab One Label',
  5.     content: '<p>Tab One Content</p>',
  6.     active: true
  7. }));
  8.  
  9. myTabs.addTab( new YAHOO.widget.Tab({
  10.     label: 'Tab Two Label',
  11.     content: '<p>Tab Two Content</p>'
  12. }));
  13.  
  14. myTabs.addTab( new YAHOO.widget.Tab({
  15.     label: 'Tab Three Label',
  16.     content: '<p>Tab Three Content</p>'
  17. }));
  18.  
  19. myTabs.appendTo(document.body);
  20.  
var myTabs = new YAHOO.widget.TabView("demo");
 
myTabs.addTab( new YAHOO.widget.Tab({
    label: 'Tab One Label',
    content: '<p>Tab One Content</p>',
    active: true
}));
 
myTabs.addTab( new YAHOO.widget.Tab({
    label: 'Tab Two Label',
    content: '<p>Tab Two Content</p>'
}));
 
myTabs.addTab( new YAHOO.widget.Tab({
    label: 'Tab Three Label',
    content: '<p>Tab Three Content</p>'
}));
 
myTabs.appendTo(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.

  1. var myTabs = new YAHOO.widget.TabView('demo');
  2. var tab0 = myTabs.getTab(0);
  3.  
  4. function handleClick(e) {  
  5.     alert(e.target);
  6. }
  7.  
  8. tab0.addListener('click', handleClick);
  9.  
var myTabs = new YAHOO.widget.TabView('demo');
var tab0 = myTabs.getTab(0);
 
function handleClick(e) {
    alert(e.target);
}
 
tab0.addListener('click', handleClick);
 

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).

  1. var myTabs = new YAHOO.widget.TabView('demo');
  2. var tab0 = myTabs.getTab(0);
  3.  
  4. function handleContentChange(e) {  
  5.     alert(e.prevValue);
  6. }
  7.  
  8. tab0.addListener('contentChange', handleContentChange);
  9. tab0.set('content', '<p>Updated tab content.</p>');
  10.  
var myTabs = new YAHOO.widget.TabView('demo');
var tab0 = myTabs.getTab(0);
 
function handleContentChange(e) {
    alert(e.prevValue);
}
 
tab0.addListener('contentChange', handleContentChange);
tab0.set('content', '<p>Updated tab content.</p>');
 

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

  1. var myTabs = new YAHOO.widget.TabView('demo');
  2. var tab0 = myTabs.getTab(0);
  3.  
  4. function suppressChange(e) {  
  5.     return false; // prevents content change
  6. }
  7.  
  8. tab0.addListener('beforeContentChange', suppressChange);
  9. tab0.set('content', '<p>Updated tab content.</p>';
  10.  
var myTabs = new YAHOO.widget.TabView('demo');
var tab0 = myTabs.getTab(0);
 
function suppressChange(e) {
    return false; // prevents content change
}
 
tab0.addListener('beforeContentChange', suppressChange);
tab0.set('content', '<p>Updated tab content.</p>';
 

Event listeners can be removed using removeListener.

  1. var myTabs = new YAHOO.widget.TabView('demo');
  2. var tab0 = myTabs.get(tab0);
  3.  
  4. function suppressChange(e) {  
  5.     return false; // prevents content change
  6. }
  7.  
  8. tab0.addListener('beforeContentChange', suppressChange);
  9. tab0.set('content', '<p>Updated tab content.</p>'; /* not changed */
  10.  
  11. tab0.removeListener('beforeContentChange', suppressChange);
  12. tab0.set('content', '<p>Updated tab content.</p>'; /* change applied */
  13.  
var myTabs = new YAHOO.widget.TabView('demo');
var tab0 = myTabs.get(tab0);
 
function suppressChange(e) {
    return false; // prevents content change
}
 
tab0.addListener('beforeContentChange', suppressChange);
tab0.set('content', '<p>Updated tab content.</p>'; /* not changed */
 
tab0.removeListener('beforeContentChange', suppressChange);
tab0.set('content', '<p>Updated tab content.</p>'; /* change applied */
 

Configuration Attributes

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

  1. var myTabs = new YAHOO.widget.TabView('demo', { activeIndex: 1 } ); // make tab at position 1 active
  2. alert(myTabs.get('activeIndex'));  // alerts 1
  3. myTabs.set('activeIndex', 0); // make tab at index 0 active
  4. alert(myTabs.get('activeIndex'));  // alerts 0
  5.  
var myTabs = new YAHOO.widget.TabView('demo', { activeIndex: 1 } ); // make tab at position 1 active
alert(myTabs.get('activeIndex'));  // alerts 1
myTabs.set('activeIndex', 0); // make tab at index 0 active
alert(myTabs.get('activeIndex'));  // alerts 0
 

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-hidden Applied to a TabView's content container (yui-content) element when the tab is not selected.

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 YUILibrary.com forums.

Also be sure to check out 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 YUILibrary.com 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 © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings