dimanche 25 avril 2010

Mootools Tab: A simple yet powerful mootools slideshow plugin

Mootools Tab is a complete rewrite of an old script I wrote for mootools 1.11. I dropped all extra functionality such as cookie reminder and automatic slide. It currently has 5 customizable plugins that can produce awesome effects including, MooStack, the barack slideshow or jQuery nivoslider.



How to use
It is quite simple to use. what you need first is

HTML:

<div id="slide">  <div class="ctab"><img src="images/slide1.jpg" width="400" height="300" /></div>      <div class="ctab hidden"><img src="images/slide2.jpg" width="400" height="300" /></div>      <div class="ctab hidden"><img src="images/slide3.jpg" width="400" height="300" /></div>      <div class="ctab hidden"><img src="images/slide4.jpg" width="400" height="300" /></div>    </div>    //the tabs   <div class="tabs"><a href="#0">1</a><a href="#1">2</a><a href="#2">3</a><a href="#3">4</a></div>  

Javascript:

var swapper = new Tab({        container: 'slide',      tabs: 'div.tabs a',      onChange: function () {            //do something      }  });  

Options:

  • container - (mixed) the element that contains the panels.
  • selector - (string, optional) only container children that match the selector will be grabbed.
  • animation - (string, optional) the transition plugin to use for swapping. default to None
  • params - (object, optional) parameters specific to the transition plugin.
  • fx - (object, optional) parameters for the animation. this can be any of the Fx parameters.
  • current - (int, optional) index of the panel that is displayed first. default to 0
  • tabs - (mixed, optional) when a tab is clicked, the corresponding panel is shown. anything you can pass to $$ is accepted.
  • activeClass - (string, optional) style applied to the selected tab.
  • inactiveClass - (string, optional) style applied to every unselected tab.

Events:

create

Fired right after the tabs has been setup.
Signature:
onCreate(newPanel, index)  
Arguments:
  1. newPanel - (element) the active panel.
  2. index - (int) the index of the active panel.

change

Fired when the active panel is changed.
Signature:
onChange(newPanel, curPanel, index, current)  
Arguments:
  1. newPanel - (element) the active panel.
  2. oldPanel - (element) the previously selected panel.
  3. index - (int) the index of the active panel.
  4. current - (int) index of the previously selected panel.