MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.
As of version 1.2, you can also set tab content via an Ajax request. See the documentation below for more info!

Dependencies

MooTabs 1.2 will only work with MooTools 1.1.
Click here to get a list of the dependencies! Also, it is recommended to grab Window.DomReady, to declare the mootabs object after the DOM is ready obviously.
See the demo link below.
As you can see, the look of MooTabs is very easy to modify. Just start from the basic CSS file, or from one of the example style (You can download the CSS file used in each examples) and go from there to create your very unique MooTabs that suites your needs!

The big change in version 1.2 is the new Ajax Tabs option! You can now retrive tab content via Ajax. Check out the documentation below to learn more about it!
Also, there are 2 new methods, mootabs.getNext() and mootabs.getPrevious(), again, check out the docs below! Although it’s pretty self-explanatory!

Some differences to note in the parameters:
-”height” and “width” options has been changed from Integer to String so you can use width like “300px” or “50%” depending on what you need.
-new option: “duration”, an integer that consists of the duration of the animation on tab switch.
-new option: “activateOnLoad”, a string, can be set to ‘first’, ‘none’ or any tab’s title, this is the tab that will be activated on first load.
-new parameter to the “mootabs.activate()” method, called “skipAnim”. It’s an optional parameter and the default is set to false. As you might have guessed, if set to true, there will be no animation on tab switching.

Documentation
What to include

MooTabs is very easy to use, all you have to do is to include MooTools 1.1 as you usually do, next, include mootabs1.2.js and finally, load the CSS file you want to use.

For Example:

<link rel="stylesheet" href="mootabs1.2.css" type="text/css" media="screen" title="no title" charset="utf-8" />

      <script src="mootools.v1.1.js" type="text/javascript" charset="utf-8"></script>

      <script src="mootabs1.2.js" type="text/javascript" charset="utf-8"></script>

he HTML part

Now comes the html markup. Again, it’s pretty straight forward. The tabs consist of:
1) A main DIV (ID can be anything, but remember it!)
2) An unordered list (Class has to be set to “mootabs_title”)
3) A set of DIV that will become the Tab Panels (Class has to be set to “mootabs_panel”)

Here’s a concrete example, I will go into details about each part after.

  <div id="myTabs">

      <ul>

      <li title="Tab1">Tab 1 Label</li>

      <li title="Tab2">Tab 2 Label</li>

      <li title="Tab3">Tab 3 Label</li>

     </ul>

      <div id="Tab1">

      Tab 1 Content

      </div>

      <div id="Tab2">

      Tab 2 Content

      </div>

      <div id="Tab3">

      Tab 3 Content

      </div>

      </div>

1) The main DIV is the container of the whole tab interface, nothing really fancy here, as long as you remember the ID you gave it. (Line 1 in the example)

2) The unordered list consist of the Tabs themselves (i.e. NOT the panels, but the clickable tabs). To associate a Tab with it’s Panel, you have to define the “title” attribute of the list item (

      <script type="text/javascript" charset="utf-8">

      window.addEvent('domready', init);

      function init() {

      myTabs1 = new mootabs('id_of_container', {options});

      }

      </script>

Related Listings:

1. Sliding Tabs using Moo Tools Plugin The script relies on width and height of tabs and...
2. Tabs with Moo tools plugin This is MooTabs! Using a slightly modified CSS file and...
3. Ajax Based Tab Script When user clicks a tab the Ajax will communicate with...
4. Sliding Tabs using Mootools Sliding Tabs is a mootools 1.11 plugin which adds a...
5. MOOdalBox – A modal box (inline popup) MOOdalBox: A modal box (inline popup), used to display remote...

Do you like this post?

Email: