JavaScript  »  Articoli  »  MooTools 

External handlers and Events

Nella seconda demo ho voluto mostrare una delle caratteristiche a mio avviso più interessanti delle interfacce Accordion, talvolta sottovalutate: gli handler esterni. È possibile infatti azionare l'Accordion tramite specifici handler esterni all'interfaccia stessa, oltre che ovviamente ai toggler interni a quest'ultima. Prendiamo ad esempio il caso in cui si abbiano delle sezioni molto lunghe: l'utente sarebbe costretto ogni volta a scorrere la pagina per ricercare il toggler specifico della sezione desiderata.

Avvalendoci degli handler esterni possiamo aumentare di molto l'usabilità della nostra applicazione creando un menu che permette di navigare all'interno dell'Accordion con molta facilità, indipendemente dalle sue dimensioni.

Sempre in questa demo ho inserito un interssante utilizzo degli eventi della classe Accordion: quando selezioniamo una determinata sezione, essa assumerà un colore decisamente più intenso, mentre le altre torneranno allo stato "normale".

Ecco il codice della demo:

window.addEvent('domready', function() {

	// istanza di Accordion
	var acc = new Accordion('h3.handle', 'div.sect');
	
	// aggiungiamo gli eventi
	acc.addEvents({
		'active': function(hdl, el) {
			$$('div.sect').setStyle('background-color', '#99FFCC');
			el.setStyle('background-color', '#33CCCC');
		},
		
		'backgorund': function(hdl, el) {
			$$('div.sect').setStyle('background-color', '#99FFCC');
			el.setStyle('background-color', '#33CCCC');
		}
	});
	
	// Handlers esterni
	$$('span.hdl').each(function(hdl, i) {
		hdl.addEvent('click', function() {
			acc.display(i);
		});
	});

});

Come è possibile notare, tramite il metodo display della classe Accordion, andiamo a selezionare le sezioni relative all'handler desiderato basandoci sulle loro posizioni.

La relativa parte HTML è molto semplice, basta creare i nostri handler esterni (nel mio caso ho scelto gli elementi span con classe 'hdl') prima del contenitore principale della nostra Accordion:

<span id="home" class="hdl">Home</span> |
<span id="home" class="hdl">Links</span> |
<span id="home" class="hdl">Products</span> |
<span id="home" class="hdl">Related</span>

<div id="acc">
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
	<h3 class="handle">...</h3>
	<div class="sect">...</div>
</div>

Gli esempi sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter