Tabs Tutorial

API Reference - Advanced Features

There are two object classes/types that you may work with: Tab and TabSystem. I'll discuss the TabSystem object type first.

What Exactly is a TabSystem?

A TabSystem is an object class.

A TabSystem instance can be obtained with the following JavaScript code:

var ts = TabSystem.list[sElementId];

What Can I Do with a TabSystem?

A TabSystem instance has methods that allow you to many things:

• add and remove onchange and onbeforechange EventListeners (explanation | demo)

  Explanation

  It is useful to add an onbeforechange handler for multipart form validation.

  Example

  function tabBeforeChange() {
  // If the user clicks "no" or "cancel", return false to prevent 
  // prevent nextTab from being activated.
      return confirm("Really change to "+this.nextTab.id + "?");
  }
  
  function tabChanged(){
      alert("You just triggered the onchange method by clicking "
        + this.activeTab.id);
  }
  
  	// if no tabsytem declared, use 
  	// body for the tabsystem container.
  	var ts = TabSystem.list.body;
      ts.addEventListener("onBeforeChange", tabBeforeChange);
      ts.addEventListener("onchange", tabChanged);
  }
  				

  Discussion

  Event Handlers for onbeforechange are useful for form validation.

• change the event type to trigger tabs (explanation | demo)

  Explanation

  You can set the eventType for individual TabSystems.

  This makes it possible to have a TabSystem that uses mouseovers and another that uses clicks.

  Case Scenario

  Say you have 2 TabSystems on a page. One uses img tabs. The other uses a tabs. You want to allow the user to use keyboard triggers for the a tabs.

  The img tag cannot receive focus -- only a, label, and input elements can. Using onfocus would not work for img tabs, but it would work for a tabs.

  One way to solve this would be to set the eventType to "focus" for the TabSystem with a tabs.

  TabSystem.list["TabSystem1"].setEventType("focus");
  			

  When an a tab is focused, it will activate the content. Focus can occur as a result of pressing the element's accesskey or tabbing to the a element.

  In most cases, it is best to have the same event type because it can be counter-intuitive to the user.

• remove the tabs / undo removal of the tabs (explanation | demo)

  Explanation

  Case Scenario

  1. You want your users to be able to print the entire contents of the tabsystem.

  2. You want your users to be able to search the entire contents of the tabsystem using the browser's find feature.

  Solution

  Provide a gui button (img/link) that allows them to remove and undo removal of the tabs. Call removeTabs(tabSystem) in that element's onclick.

  <a href='' 
    onclick='toggleTabs("TabSystem1");return false;'
    >toggleTabs</a>
  

  function toggleTabs(tsId) {
  
  	var ts = TabSystem.list[tsId];
  	
  	if(!ts) 
  	    alert('Error: toggleTabs\n TabSystem.list["'
  	        +tsId
  	        +'"] does not exist.');
  	
  	if(ts.isTabsLayout) {
  		removeTabs(ts);
  		ts.isTabsLayout = false;
  	}
  	else {
  		undoRemoveTabs(ts);
  		ts.isTabsLayout = true;
  	}
  }
  

Properties and Methods

var ts = TabSystem.list[sElementId];

var activeTab  = ts.activeTab; // the currently active tab
var relatedTab = ts.relatedTab; // the last tab that was active
var nextTab    = ts.nextTab; // the tab that is about to activate
var tabEls     = ts.tabArray; // array of tab elements
var tabs       = ts.tabs; // array of Tab instances
var b          = (tabEls[0] == tabs[0].el); // true!
var tabParams  = ts.tabParams;


// the this keyword refers to the TabSystem instance.
ts.addEventListener("onbeforechange", function(){ alert(this.nextTab.id);} );
ts.addEventListener("onchange", function(){ alert(this.activeTab.id);} );

What is a Tab?

Tab is an object class. A Tab instance is tied to a TabSystem instance. You can get a reference to a Tab instance two ways:

1. Through a reference to its TabSystem like this:

   // First get a TabSystem.
   var ts = TabSystem.list[sElementId];
   
   // Get all the Tab instances for this TabSystem.
   var tabs = ts.tabs;
   
   // Alert each Tab instance for this TabSystem.
   for(var i = 0, len = tabs.length; i < len; i++)
      alert(tabs[i]);
   		

2. Or directly, like this:

   var tab = Tabs.list[sElementId];
   

What Can I Do With a Tab?

You can get a reference to the Tab's element, to the Tab's content element, and to the Tab's enclosing TabSystem instance. You can add Event Listeners to the tab.

A Tab instance has three properties. The example illustrates:

// The first tab instance for this TabSystem.
var tab = Tab.list[sElementId];
var el = tab.el; // the tab HTML element. 
var content = tab.content; // The tab's content HTML Element. 
var parentTabSystem = tab.ts; // The TabSystem instance that the tab belongs to. 

A Tab instance has two methods. The example illustrates:

var tabId = tab.toString(); // The tab's unique id. 
tab.addEventListener("onactivate", function() { alert(this); });

You can add any ant type of intrinsic event listener ("onmouseover", "onclick", et c) to a tab instance. You can also add an onactivate listener, as shown.

Next in this tutorial: Frequently Asked Questions