Skip to content

This script generates all of the code necessary to create a tabbed interface.

License

Notifications You must be signed in to change notification settings

Heydon/TabInterface.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

== TabInterface

TabInterface generates all of the code necessary to create an accessible tabbed interface in JavaScript.

== Current Version

1.3 (5 April 2011)

== Requirements

None.

== License

TabInterface is distributed under the liberal MIT License.

== Use

To use, simply include TabInterface.js (found in ./min) and then classify elements you want tabbed as "tabbed". Then add a new anonymous function to your load event (`window` or DOM). For example:

if( typeOf( TabInterface ) != 'undefined' &&
    document.getElementById &&
    document.getElementsByTagName &&
    document.createElement ){
  var cabinets = Array();
  /* using Jesse Skinner's addDOMLoadEvent()
     http://www.thefutureoftheweb.com/blog/adddomloadevent */
  addDOMLoadEvent( function(){
    var collection = document.getElementsByTagName( '*' );
    var cLen = collection.length;
    for( var i=0; i<cLen; i++ ){
      if( collection[i] &&
          /\s*tabbed\s*/.test( collection[i].className ) ){
        cabinets.push( new TabInterface( collection[i], i ) );
      }
    }
  } );
}

Many libraries, such as Prototype and jQuery, offer nicer-looking means of collecting elements by CLASS and and those could certainly be substituted for the brute force testing seen above.

Note: Tab labels will be either the header content or the heading's TITLE value.

== How it works

Content is split using the first heading level (H1-H6) or HEADING element encountered within the "tabbed" container.

== Demo

A demo is included in the ./demo directory.

About

This script generates all of the code necessary to create a tabbed interface.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%