I selettori CSS di jQuery non fanno tutti parte delle specifiche CSS. Alcuni di essi, infatti, sono selettori personalizzati (o custom). Esempi di tali selettori sono :hidden, :visible e :input. La cosa interessante è che jQuery ci consente di creare nuovi selettori personalizzati. Vediamo come.
La sintassi di base da cui partire è la seguente:
$.extend($.expr[':'], {
selettore: function (elemento) {
// imposta un valore booleano da restituire oppure
return false;
}
});
L'espressione è costituita dal nome del selettore e da una funzione che ha come argomento l'elemento corrente e che restituisce un valore booleano indicante se la selezione ha avuto successo o meno.
Per esempio, immaginiamo di voler creare un selettore che selezioni un elemento solo se questo è effettivamente presente e visibile nella finestra del browser. Ecco come possiamo fare:
$.extend($.expr[':'], {
inviewport: function (element) {
var $element = $(element),
$window = $(window),
top = $element.offset().top,
height = $element.outerHeight(true),
windowTop = $window.scrollTop(),
windowScroll = windowTop - height,
windowHeight = windowTop + height + $window.height();
return (top > windowScroll && top < windowHeight);
}
});
Esempio d'uso:
$('h2:inviewport').each(function() {
// ...
});