Tabbed Panels

Description

The Spry Tabbed Panels is a disclosure widget that consists of a set of tabs at the top or side of the widget and a content panel for each tab. Clicking a tab will display its content panel.

Required Files

SpryTabbedPanels.js

SpryTabbedPanels.css

Reference File

SpryTabbedPanels.html

Sample Files

TabbedPanelsSample.html

TabbedPanelsSample2.html

 

Structure

The widget structure is as follows:

   <widget container- the window>
      <tab list>
         <tab>
         <tab>
     <tab content container>
         <tab content panel>
         <tab content panel>
   </widget container>

The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.

Using the provided files, the default mark up is:

<div class="TabbedPanels" id="TabbedPanels1">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"> Tab 1 Content</div>
    <div class="TabbedPanelsContent"> Tab 2 Content</div>
    <div class="TabbedPanelsContent"> Tab 3 Content</div>
  </div>
</div>

<script>
  var tp1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

Constructor

Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.

<script type="text/javascript">    
   var tp1 = new Spry.Widget.TabbedPanels("TabbedPanels1");   
</script>

Basic Constructor

A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.

<script type="text/javascript"> 
   var widgetname = new Spry.Widget.TabbedPanels("id of widget container");   
</script>

Constructor Options

Constructor options allow users to specify certain attributes of the widget.

Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:). 

 <script type="text/javascript"> 
   var widgetname = new Spry.Widget.TabbedPanels("id of widget container",{option1:value, option2:value, option3:"value"});   
 </script>
Option Values Default Description
defaultTab number 0 The number of the tab that should show when the page loads.
panelVisibleClass class name string null This class is applied to the visible content panel.. This will trump the .TabbedPanelsContentVisible class defined in the default style sheet.
You can also edit the .TabbedPanelsContentVisible in the default CSS file instead.
tabFocusedClass class name string null This class is applied to the currently focused tab. This will trump the .TabbedPanelsTabSelected class defined in the default style sheet.
You can also edit the .TabbedPanelsTabSelected in the default CSS file instead.
tabHoverClass class name string null This class is applied when hovering over a tab. This will trump the .TabbedPanelsTabHover class defined in the default style sheet.
You can also edit the .TabbedPanelsTabHover in the default CSS file instead.
tabSelectedClass class name string null This class is applied to the currently selected tab. 
 <script type="text/javascript"> 
   var tp1 = new Spry.Widget.TabbedPanels("myTabbedPanels",{defaultPanel:3, duration:200, tabHoverClass:'red'});   
 </script>

Recall that javascript is case sensitive.

Using Vertical Tabs

To use vertical tabs (tabs listed down the left side), simply change the class name on the widget container from 'TabbedPanels' to 'VTabbedPanels'.

<div class="VTabbedPanels" id="tp1">

Tabbed Panels Methods

getContentPanelGroup

Returns the content panel group container element for the widget.

If the markup example from the "Structure" section above was used to create the widget, calling this method would return the DOM element that represents the <div class="TabbedPanelsContentGroup"> element.

Format

widgetname.getContentPanelGroup();

Example

// Get the content panel group element and change
// its border color.

var ele = tp1.getContentPanelGroup();

ele.style.borderColor = "#CCC";

getContentPanels

Returns an array containing all of the content panel container elements inside the tabbed panels widget.

If the markup example from the "Structure" section above was used to create the widget, this method would return an array of DOM elements that represent the <div class="TabbedPanelsContent"> elements.

Format

widgetname.getContentPanels();

Example

// Get the 3rd content panel in the widget and set its content to
// "Hello World".

var contentPanelsArray = tp1.getContentPanels();

if (contentPanelsArray[2])
	contentPanelsArray[2].innerHTML = "<strong>Hello World!</strong>";

getCurrentTabIndex

Returns the panel index of the panel that is currently visible. Panel indexes refer to the order of the panels within the widget. Indexes are zero-based, so the first panel has an index of zero, the 2nd an index of 1, etc.

Format

widgetname.getCurrentTabIndex();

Example

var curIndex = tp1.getCurrentTabIndex();

if (curIndex == 2)
	alert("The 3rd panel is showing!");

getTabbedPanelCount

Returns the number of tabbed panels within the widget.

If there is a mismatch between the number of tab buttons and content panels within the widget, this method will return lesser count.

Format

widgetname.getTabbedPanelCount();

Example

// Make the panel, *after* the one currently showing,
// visible. If we are already showing the last panel,
// make the first panel visible.

var nextIndex = tp1.getCurrenTabIndex() + 1;
var numPanels = tp1.getTabbedPanelCount();

if (nextIndex == numPanels)
	nextIndex = 0;

tp1.showPanel(nextIndex);

getTabIndex

Returns the panel index of the specified tab or content container element. Panel indexes refer to the order of the panels within the widget. Indexes are zero-based, so the first panel has an index of zero, the 2nd an index of 1, etc.

Format

widgetname.getTabIndex(tabOrContentContainerElement);

Example

// The following example doesn't do anything useful, but it illustrates
// what types of elements the getTabIndex method can take.

var tabButtonsArray = tp1.getTabs();
var contentPanelsArray = tp1.getContentPanels();

var tab = tabButtonsArray[3];
var contentPanel = contentPanelsArray[1];

// The following example passes a tab button element to getPanelIndex
// to figure out the index of the panel it belongs to.

var panelIndex = tp1.getPanelIndex(tab); // panelIndex == 3


// The following example passes a content panel element to getPanelIndex
// to figure out the index of the panel it belongs to.

panelIndex = tp1.getPanelIndex(contentPanel); // panelIndex == 1

getTabGroup

Returns the tab button group container element for the widget.

If the markup example from the "Structure" section above was used to create the widget, this method would return the DOM element that represents the <ul class="TabbedPanelsTabGroup"> element.

Format

widgetname.getTabGroup();

Example

// Get the tab button group element and change
// its border color.

var ele = tp1.geTabGroup();

ele.style.borderColor = "#CCC";

getTabs

Returns an array containing all of the tab button elements inside the tabbed panels widget.

If the markup example from the "Structure" section above was used to create the widget, this method would return an array of DOM elements that represent the <li class="TabbedPanelsTab" tabindex="0"> elements.

Format

widgetname.getTabs();

Example

// Get the 3rd tab of the widget, if it has an id of "foo"
// make it the current tab.

var tabButtonsArray = tp1.getTabs();
var tabButton = tabButtonsArray[2];

if (tabButton && tabButton.id == "foo")
	tp1.showPanel(tabButton);

showPanel

Goes to the specified panel, using the panel number, tab or content container element, or the ID of the tab or content container element.

Format

widgetname.showPanel(panelIndexOrElementID);

Example

<a href="#" onclick="tp1.showPanel(3);">Tab 3</a> 
 or
<a href="#" onclick="tp1.showPanel('panel3');">Tab 3</a>

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.