samedi 15 mai 2010

Mootools jQuery like Exposé

The jQuery like Exposé in mootools is out.

more infos and download on the mootools forge | fork it on github.

Building Mootools on windows with Packager

In the case you miss it, mootools 1.3beta1 is out. if you are using windows and you want to build it, the qucikest way to achieve it is to use packager.

  • grab mootools 1.3b1, and packager
  • extract mootools in a folder, lets say "c:\mootools\"
  • extract packager in your local web server.
  • create a php file and put these lines of code

require 'packager.php';

$pkg = new Packager('c:\\mootools\\');

//the first parameter is the mootools.js build
$pkg->write_from_components('c:\\mootools\\mootools.js', $pkg->get_all_files());


now you run your php script in your web browser to create your mootools build.

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


<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>  


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


  • 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.



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


Fired when the active panel is changed.
onChange(newPanel, curPanel, index, current)  
  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.