TabInterface

TabInterface is an unobtrusive JavaScript object that generates an accessible tabbed interface based on heading levels.

Current Version

1.5 (14 Oct 2019)

Requirements

None.

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) that looks for these elements and passes them to a new instance of TabInterface. For example, using jQuery, you could say:

if( typeOf( TabInterface ) != 'undefined' &&
      document.getElementById &&
      document.getElementsByTagName &&
      document.createElement ){
    $(document).ready(function(){
      $('.tabbed').each(function(i){
        new TabInterface( this, i );
      });
    });
  }

Note: Tab labels will be either the header content or the heading's title attribute.

How it works

Content is split using the first heading level (h1-h6) encountered within the "tabbed" container.

Demo

Download

Using Git: git clone git://github.com/easy-designs/tabinterface.js.git

Tagged Releases

License

TabInterface is distributed under the liberal MIT License.