forma e sostanza della comunicazione

menu
moo skin
http://www.flickr.com/photos/[email protected]/3766840922/
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


Nessun commento

Lascia un commento


  • diario di sviluppo