Scripts developed under the MooTools framework are useful to easily achieve complex menu displaying effects.
For instance MooTabs creates tabbed menu, like those used by the browser or the OS, from ordered and unordered lists. This could be a great option if dealing with small spaces in the page: when clicking one of the triggers, the content of the main box gets replaced, with custom styles and transitions.
The script class, originally built for earlier MooTools 1.11, has been completely upgraded in Fx.Tabs for the newest framework version, while Perspective Tabs offers an even more complex approach.
Similarly, MGFX.Tabs is driven to the same purpose, by crossfading the CSS opacity value instead of sliding the content.
So I’ve decided to combine and arrange the effects in a single javascript file:
window.addEvent('domready', function(){ if (Cookie.get('opentab')) { //check if there is a cookie with an openslide value var actif = Cookie.get('opentab'); //if yes, retrieves that value and set a var with its value } var yourTabs = $$('.tabs'); var tabToggler = $$('.tabtog'); yourTabs.each(function(el, i){ var Tabbula = new Fx.Slide(el, {duration: 600}); Tabbula.hide(); //hides all the sliders var tabFade = new Fx.Style(el, 'opacity', {wait: false, duration:600}); if (actif) { //if the var is set if (actif == i) { Tabbula.show(); } } tabToggler.each(function(elem, j){ if ( j == i ) elem.addEvent('click', function(e){ e = new Event(e).stop(); Tabbula.slideIn().chain(function() { tabFade.start(1); }); //tabFade.start(1); Cookie.set('opentab', i); }); if (j != i) elem.addEvent('click', function(e){ e = new Event(e).stop(); tabFade.start(0); Tabbula.slideOut(); }); }); }); });
Another declination of the Slide effect, developed by the MooTools community, manages the height property of any element, in order to expand or collapse it, according to the inner content, that could reside inline in the same page or in an Ajax request.
When MooTools framework is properly loaded, every anchor button tagged with class triggerLink should toggle its relative slide box, according to the following javascript code:
window.addEvent('domready', function(){ // for nested Fx.Slide effect function nestSlide(slider) { if (slider.parentNode.parentNode.hasClass('slide')) { if (slider.parentNode.parentNode.parentNode.getStyle('height') != '0px') { slider.parentNode.parentNode.parentNode.setStyle('height',''); if(window.ie6){slider.parentNode.parentNode.parentNode.setStyle('height','0px')}; } } } var yourSlides = $$('.slide'); var yourTriggers = $$('.triggerLink');//one more array for the road, the links yourSlides.each(function(el, i){ var SciVola = new Fx.Slide(el, { height: true, duration: 600, transition: Fx.Transitions.Cubic.easeOut }).hide(); var DiSSolvi = new Fx.Style(el, 'opacity', { wait: false, duration:800 }); var openSlide = el.id; yourTriggers.each(function(elem, j){ //here comes what you're looking for elem.addEvent('click', function(e){ new Event(e).stop(); //here you stop the default a event if( i == j ){ if (SciVola.wrapper.offsetHeight == 0) { var href = this.getProperty('href'); if (href == "#"+el.id) { SciVola.hide(); //empties the shelf el.setStyle('opacity', '0'); nestSlide(el); SciVola.slideIn().chain(function() { DiSSolvi.start(0,1); }); Cookie.set(el.id, 'inline'); } else { var AjaxUrl = this.getProperty('href'); el.empty(); //empties the shelf new Ajax (AjaxUrl, { //that's where you use the retrieved url method: 'get', update: el, onComplete: function() { el.setStyle('opacity', '0'); nestSlide(el); SciVola.slideIn().chain(function() { DiSSolvi.start(0,1); resetmbox(); }); Cookie.set(el.id, AjaxUrl); } }).request(); } } else { DiSSolvi.start(1,0).chain(function() { nestSlide(el); SciVola.slideOut(); }); //there you simply close the potentially opened other divs Cookie.set(el.id, 'off'); } } }); }); //that's all, now back to your script nestSlide(el); if (Cookie.get(openSlide)) { //check if there is a cookie with an openslide value if (Cookie.get(openSlide) != 'off') { if (Cookie.get(openSlide) == 'inline') { nestSlide(el); SciVola.show(); return; } var RemUrl = Cookie.get(openSlide) new Ajax (RemUrl, { method: 'get', //method update: $(openSlide), // element that will be updated with response onComplete: function() { SciVola.hide(); $(openSlide).setStyle('opacity', '0'); SciVola.toggle().chain(function() { nestSlide(el); DiSSolvi.start(0,1); resetmbox(); }); //toggles the shelf } }).request(); //sends the request } } }); });
The content does not necessarily come only from external pages, but also from the div’s inner HTML. In that case, the div ID has to be set as the .triggerLink HREF property, obviously with the # symbol like a normal text anchor.
Otherwise, when the link contains an URL, that link will be the source of the content displayed by an Ajax request.
The nestslide function is meant to operate multiple nested effects (commonly a trouble with MooTools Fx.Slide), but for now at early stage since it’s necessary everytime to specify the depth of recursions through the “parentNode” of the DOM.
Little hacks could alter the behavior pattern, for example to extend every box with a single click as the classic Accordion does, or conversely to toggle the same box with different buttons.
In addition, Ajax calls are easily pluggable with MooTabs as well, and both the effect classes could be merged in one script. These examples are tested and compatible with the two main MooTools versions:
English
Italiano 