jQuery ci permette di associare dei dati agli eventi. Usando tali dati possiamo creare elementi della UI basati sugli eventi, come ad esempio un accordion.
I dati degli eventi
I dati degli eventi vengono associati direttamente all'oggetto event sotto forma di oggetti. Esempio:
$('#test').bind('click', {property: 'Test'}, function(event) {
var str = event.data.property; // 'Test'
$(this).text(str);
});
Questi oggetti possono anche contenere riferimenti ad elementi jQuery.
Eventi personalizzati
Gli eventi personalizzati vengono creati per espletare funzioni particolari. La sintassi è la stessa di quella usata per gli eventi tradizionali:
$('#test').bind('inviewport', function(event) {
//...
});
Questi eventi possono essere invocati con i metodi trigger() e triggerHandler().
Come funziona un accordion
Quando si clicca su un'intestazione di un accordion accadono tre azioni:
- Se il contenuto è nascosto, si usa
slideDown() - Se il contenuto è visibile, si usa
slideUp() - I restanti contenuti devono essere nascosti eccetto quello corrente.
Solitamente si usa questo approccio procedurale:
$('h3', 'div.accordion').each(function() {
var $header = $(this);
var $content = $header.next();
$header.click(function() {
$('div.accordion-content').slideUp(600);
if($content.is(':hidden')) {
$content.slideDown(600);
} else {
$content.slideUp(600);
}
});
});
Il problema di questo approccio è che non è né flessibile né riutilizzabile.
L'oggetto Accordion
Ecco un'implementazione OO basata sugli eventi:
var Accordion = {
Elements: {
titles: $('h3', 'div.accordion')
},
Events: {
open: function(evt) {
if (evt.data.element.is(':hidden')) {
evt.data.element.slideDown(600);
} else {
this.close();
}
},
close: function(evt) {
if (evt.data.element.is(':visible')) {
evt.data.element.slideUp(600);
} else {
this.open();
}
},
bind: function() {
Accordion.Elements.titles.each(function() {
var $header = $(this);
var $content = $header.next();
$header.bind('open', {
element: $content
}, Accordion.Events.open);
$header.bind('close', {
element: $content
}, Accordion.Events.close);
});
}
},
fn: {
attachEvents: function() {
Accordion.Events.bind();
Accordion.Elements.titles.on('click', function() {
$('div.accordion-content').slideUp(600);
$(this).trigger('open');
});
}
},
init: function() {
Accordion.fn.attachEvents();
}
};
Accordion.init();
Abbiamo memorizzato i contenuti di ciascun blocco nell'oggetto event di ciascuna intestazione. In questo modo gli elementi sono messi in cache e pronti all'uso.
Abbiamo inoltre creato due metodi helper per lo sliding dei contenuti utilizzando i dati degli eventi. Il risultato finale è una robusta implementazione che può essere adattata a differenti casi d'uso.