Plugin based on original tab pane by akaIDIOT. Its functionally is enhanced for accessible use (keyboard navigation and screen reader support).
Simple Tab Pane is a very simple MooTools class that allows you to create a tab pane from a single element. All it needs is a selector for the tabs (the headers, so to say) and a selector for the corresponding contents.
Because all the tab switching is based on delegated events, no effort is needed to add tabs: simply add elements with the correct class names (or tag names if you specified your selector as such) and you're done!
Styling is left completely up to the user. Whether you want an inline list as the tab headers or a series of links, you're the boss.
Implementation note: because of the way event delegation works, event propagation doesn't work properly when dealing with delegations. Sadly, this handicaps the removing of tabs via items inside the tab header a bit. See the included demo for an implementation of this.
A demo is included in the download package.
All you'll need to create a tab pane on your page is instantiate a new TabPane and supply it the container (or its id) in which your tabs and corresponding contents reside:
var myTabPane = new TabPane('tabs');
Default, it uses the selector '.tab' for a the tab headers and '.content' for the corresponding content sections and adds the css class 'active' to the selected tab header. These values are customizable in the constructor. Should you for example want to select all li elements as tab headers with p elements as the contents, your call to the constructor would look as such:
var myTabPane = new TabPane('tabs', { tabSelector: 'li', contentSelector: 'p' });
var myTabPane = new TabPane(container[, options]);
Allows closing of a certain tab and its corresponding content element from the container.
myTabPane.closeTab(index);
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus