21 marzo 2010
ajax slide e tabs con mootools
Tra le tante applicazioni disponibili per la libreria MooTools, ho trovato spesso utilissime quelle che intervengono sulla visualizzazione dei menu.
Ad esempio MooTabs genera, a partire da liste ordinate e non, un menu di navigazione a schede simile a quello usato nei browser o nei sistemi operativi, una soluzione adatta agli spazi ristretti: il contenuto del riquadro principale viene sostituito quando si attiva uno degli appositi selettori, e il tutto può assumere uno stile personalizzato, transizioni comprese. La classe, originariamente sviluppata sulla vecchia versione 1.11 di MooTools, è stata completamente convertita in Fx.Tabs per le nuove versioni della libreria, mentre Perspective Tabs è un’altra variante più complessa.
Analogamente, MGFX.Tabs ottiene lo stesso risultato con la differenza che il contenuto, anziché scivolare, sfuma in dissolvenza incrociata modificando il valore CSS della propria opacità.
In questo caso, mi sono limitato a combinare gli effetti incorporandoli in un solo javascript:
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();
});
});
});
});
Un’altra applicazione dell’effetto Slide, elaborata a suo tempo dalla comunità degli sviluppatori di MooTools, consente di attivare a piacimento l’espansione e la contrazione di un riquadro. Il contenuto può trovarsi nella stessa pagina oppure essere caricato dinamicamente tramite Ajax.
Dopo avere richiamato in modo opportuno le librerie MooTools, assegnando le classi di stile triggerLink ai bottoni e slide ai rispettivi riquadri, il codice javascript necessario è:
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
}
}
});
});
Il contenuto visualizzato può corrispondere a quello già presente nel riquadro, e in questo caso sarà sufficiente assegnare il nome (o meglio, l’ID) del riquadro come destinazione del link HREF al pulsante .triggerLink, preceduto dal simbolo # proprio come fosse un’ancora di testo.
Quando viene invece specificato un qualsiasi indirizzo, il contenuto della pagina di destinazione sarà caricato e mostrato da una chiamata Ajax.
Grazie alla funzione nestslide, il codice è predisposto per gestire anche più riquadri “a matrioska”, con l’unico inconveniente che al momento occorre specificare di volta in volta la profondità degli annidamenti, nelle iterazioni dei “parentNode” attraverso il DOM.
Con qualche piccola modifica al codice si può alterare il comportamento degli interruttori, per espandere ad esempio tutti i riquadri con un solo clic, come il classico Accordion o viceversa attivare lo stesso riquadro con bottoni diversi. Inoltre, le chiamate Ajax sono integrabili anche in MooTabs e le due classi di effetti possono ovviamente essere accorpate in un solo script. Gli esempi sono compatibili con le diverse principali versioni di MooTools:
tabberslide111.js
tabberslide124.js
