Pecciola

Lezioncina decisamente poco impegnativa, ma importante perché potreste sfruttarla non poco. Infatti, non potevo non parlarvi di come poter facilmente gestire, leggere e modificare proprietà css con jQuery.

jQuery rende estremamente facile assegnare un valore o modificarlo in una proprietà css rispetto a uno o più elementi. Anche se JQuery offre tutta una serie di funzioni (cross- browser) che provvedono a lavorare con i CSS, vediamo le due più importanti.

La prima è la semplice css(nome) che restituisce il valore della proprietà CSS specificata per il primo elemento corrispondente.

La seconda è css(proprietà, valore) e imposta una singola proprietà su un determinato valore su tutti gli elementi corrispondenti.

Vediamo un esempio che, come al solito, chiarisce molto più delle chiacchiere teoriche.

Supponiamo, senza scrivere tutto l’html, di avere una tabella con varie righe (<tr>) che elencano automobili inserita in un div con identificatore <div id=”auto”>

Vediamo come ottenere il valore di una proprietà css relativa ad un elemento specifico.

$(document).ready(functions() {

var fontSize = $(‘#auto tr:first’).css(‘font-size’)

}

Il codice é banale quanto esplicativo. Abbiamo, dopo aver atteso il caricamento degli elementi della pagina, salvato in una variabile il valore della proprietà css ‘font-size’ relativa solo al primo elemento individuato dal selettore composto (#auto tr).

Passiamo, ora, a modificare un valore.

$(document).ready(functions() {

$(‘#auto tr:even’).css(‘background-color’,‘#dddddd’)

}

In questo caso, il filtro even() e l’azione css consentono di impostare un nuovo colore di sfondo solo alle righe dispari presenti nel div con identificatore #auto

Qualora volessimo, come può tranquillamente accadere, settare più di una proprietà, il Javascript, e di conseguenza anche jQuery, consentono di farlo in modo abbastanza snello evitando di ripetere inutilmente alcune istruzioni :

$(document).ready(functions() {

$(‘#auto tr:even’).css(

‘background-color’ : ‘#dddddd’, ‘color’ : ‘#666666’, ‘font-size’ : ‘10pt’)

}

Resta il fatto che, per realizzare quanto appena visto, é sempre conveniente mettere il codice css in una classe specifica centralizzata ed utilizzare il metodo addClass(‘class_name’) di cui abbiamo parlato nella lezione precedente dedicata proprio ad attributi e classi in jQuery.

Tanto per non annoiare chi legge, ho deciso di alternare articoli con esempi pratici (come l’ultimo relativo a come creare un menu di navigazione jQuery) ad articoli teorici come questo.

Si parla di attributi e classi, decisamente importanti in jQuery per realizzare anche gli effetti più semplici.

Gestire metodi e attributi in jQuery

Tra i tanti metodi importanti di jQuery, quelli relativi agli attributi meritano un’attenzione particolare per ovvii motivi. Vediamo, quindi, le 3 situazioni base del metodo attr() in relazione agli argomenti passati.

Passando al metodo suddetto un argomento di tipo stringa verrà restituito il valore dell’attributo :

$(“a#myLink”).attr(“href”); //restituirà semplicemente il valore di href

Passando, invece, 2 argomenti di tipo stringa al metodo suddetto viene impostato l’attributo :

$(“a#myLink”).attr(“href”, “http://pecciola.com”); //imposta il valore di href

In quest’ultimo caso, va precisato che volendo impostare attributi multipli, é possibile farlo semplicemente passando più coppie ‘attributo’ : ‘valore’ (ad esempio per impostare href e target).

Passando, infine, un attributo stringa e una funzione, verrà impostato l’attributo in base alla funzione passata :

$(“a#myLink”).attr(“href”,function () { … }); //imposta il valore di href in base al risultato della funzione

Per concludere il discorso, vi illustro come, nel caso occorresse, eliminare un attributo in jQuery usando il metodo removeAttr().

Supponiamo di avere un elenco ordinato di link. Ecco come rimuovere da tutti quelli con identificatore mymenu l’attributo ‘target’ :

$(“#mymenu li a”).removeAttr(“target”);

Gestire classi in jQuery

Collegandoci a quanto appena detto, gestire gli attributi in jQuery significa anche e soprattutto gestire le classi ovvero poterle eliminare in modo preciso e puntuale dai vari attributi laddove occorre.

Nella maggior parte degli esempi presenti nelle lezioni precedenti, se ci avete fatto caso, alcuni dei metodi che sto per elencarvi hanno già fatto la loro comparsa.

E’ arrivato il momento di conoscerli bene anche perché vi torneranno utili tantissime volte :

.hasClass() : metodo che controlla, restituendo un booleano, se un elemento ha una specifica classe

.addClass() : lo abbiamo incontrato più volte ed è un metodo che, banalmente, aggiunge una classe ad un elemento

removeClass() : come sopra, ma con lo scopo di rimuovere una classe.

.toggleClass() : come già spiegato in modo preciso qui, aggiunge una classe ad elemento se non già presente, altrimenti la rimuove.

Va sottolineato che per tutti e 4 i metodi appena elencati, oltre ad una singola classe, é possibile indicare anche due o più classi separate da una spazio ( “myClass1 myClass2”)

Lezioncina semplice e snella direi….prossimo articolo altro esempietto, vi aspetto!

Come promesso, lasciamo per un attimo la teoria e passiamo alla pratica. In questa lezione, cercando di applicare un minimo quanto visto nelle lezioni precedenti, vi mostro come, con poche righe jQuery, sia possibile creare un menu di navigazione con drop down ed animazione.

Come ben saprete, jQuery fornisce un vasto set di funzioni capaci di realizzare effetti di animazione variegati con poche righe di codice. Iniziamo, però, con un pò di codice html evitando di ripetere la parte di codice html degli esempi precedenti in cui si includeva jQuery ecc

La parte html sarà composta solo da una lista, ancora non ordinata, di menu e sottomenu di navigazione.

<ul class="dropmenu">
<li class="nav"><a href="#">Sport</a>
<ul class="subnav">
<li><a href="#">Calcio</a></li>
<li><a href="#">Basket</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Tennis</a></li>
</ul>
</li>
<li class="nav"><a href="#">Cultura</a>
<ul class="subnav">
<li><a href="#">Libri</a></li>
<li><a href="#">Cinema</a></li>
<li><a href="#">Teatro</a></li>
<li><a href="#">Arte</a></li>
</ul>
</li>
<li class="nav"><a href="#">Musica</a>
<ul class="subnav">
<li><a href="#">Rock</a></li>
<li><a href="#">Classica</a></li>
<li><a href="#">Lirica</a></li>
<li><a href="#">Pop</a></li>
</ul>
</li>
</ul>

Non servono ulteriori spiegazioni per il codice html appena visto e possiamo passare alla parte relativa al css.

In questo caso, colori e sfondi a parte, occorre aggiungere alcuni stili per nascondere la navigazione di secondo livello fino a che non si verifichi l’evento di mouseover.

ul.dropmenu{
color:#CCCCCC;
float:left;
font-size:11px;
padding:0;
width:560px;
}
ul.dropmenu li{
background:none repeat scroll 0 0 #333333;
border:2px solid #000000;
display:block;
float:left;
height:15px;
list-style:none outside none;
margin:0 5px;
padding:5px 0px;
text-align:center;
text-shadow:0 1px 1px #000000;
text-transform:uppercase;
width:130px;
position:relative;
}

ul.dropmenu li a{
color:#CCCCCC;
}

ul.dropmenu li ul{
background:none repeat scroll 0 0 #333;
border-bottom:3px solid #DE93C3;
float:left;
padding:20px 5px 0;
display: none;
position:absolute;
left:-50%;
width:250px;
margin-top:15px
}

ul.dropmenu li ul li{
border:none;
border-bottom:1px solid #ccc;
padding:5px;
float:left;
width:100px;
overflow:hidden
}

Da notare alcune cosette. Come avrete notato, abbiamo agito su tutti i selettori e identificatori e anche sugli elementi link (ul.dropmenu li a)

Inoltre, sfruttando la proprietà overflow:hidden riesco a nascondere l’elemento di sottomenu fino a che non si registra il passaggio del mouse sul blocco che contiene il sottomenu stesso.

Infine, come noterete, abbiamo usato, oltre alla proprietà overflow:hidden anche la display:none. Esiste una differenza fra le due. Con display:none un elemento non verrà proprio considerato e reso e quindi non occuperà alcuno spazio nell’economia della pagina. Con visibility:hidden un elemento non verrà mostrato, ma occuperà lo spazio di pagina proprio come se fosse visibile.

Infine, tanto perché un ripassino non fa mail male, ridate una bella letta all’articolo che parla di posizione statica, assoluta e relativa nei css considerando che nel codice appena visto se ne fa menzione.

Passiamo ora alla parte jQuery responsabile dell’animazione del menu con drop down.

$(document).ready(function() {

//mouseover su menu di primo livello
$("ul.dropmenu li.nav").mouseover(function(){

$(this).find('.subnav').stop().animate({height: '60px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutBounce'})
});

//quando si verifica il mouse out ...
$("ul.dropmenu li.nav").mouseout(function(){

$(this).find('.subnav').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutBounce'})
});

//animazione con background color su ogni menu item
$("li").hover(function() {
$(this).stop().animate({ backgroundColor: "#C13D93"}, 600);},
function() {
$(this).stop().animate({ backgroundColor: "#333333" }, 600);
});
});

Come avrete intuito, per creare un menu del genere dobbiamo gestire due eventi ben precisi. Il primo si attua quando il puntatore del mouse arriva su uno dei blocchi di menu cosiddetti di primo livello (Sport, Cultura, Musica) cioè quelli con classe pari a nav.

Il secondo evento, logicamente, si rivela invece, quando il puntatore del mouse si allontana da uno dei blocchi di menu suddetti.

Riguardo al primo evento, si applica a tutti gli elementi con classe subnav, dapprima la funzione stop() (per fermare un eventuale accumulo coda di animazione qualora si sia ripetutamente mosso il mouse avanti e indietro sulla voce di menu) e,in seguito, la funzione animate(…) responsabile dell’effetto vero e proprio. Trovate qui la sintassi completa della funzione che riassumo essendo decisamente importante nell’economia di jQuery :

.animate( properties, [ duration ], [ easing ], [ complete ] )

La funzione prevede, come noterete, come primo parametro tutta una serie di proprietà css (opacity,height,backgroundColor, margin, border ecc), come secondo il tempo di durata dell’effetto (può essere una stringa o un numero) e come terzo il valore di easing. Tale parametro indica la velocità alla quale l’animazione deve avanzare nei diversi punti diversi e anche la modalità. Vi lascio questo link per vedere in azione solo alcuni dei possibili easing su jQuery. Infine, quarto parametro non obbligatorio, ovvero complete, può richiamare un’ulteriore funzione che si scatenerebbe ad animazione completata. Non é, comunque, il nostro caso.

Passando al secondo evento (mouse che si allontana), tutto é simile a quanto appena visto con la differenza che l’effetto é annullato poiché si pone : height:’0px’, opacity:’0′

Infine, l’effetto hover applicato su tutti gli item di meni che, come avrete notato, prevede una funzione relativa all’evento mouse in e una relativa all’evento mouse out

Eccovi una demo di quanto appena descritto. Grazie a devsnippet per lo spunto di esempio

Quasi tutte le lezioni precedenti hanno avuto come scopo quello di poter selezionare, in jQuery e con i vari filtri del caso, un elemento della pagina (o meglio del DOM).

Ora, direi, é il caso di capire e conoscere quali sono i metodi di base che jQuery ci mette a disposizione per manipolare un elemento o un attributo. In questo articolo, mi limito ad elencarvi (con qualche riga di esempio) i metodi più importanti ed utilizzati su jQuery anche se i metodi messi a disposizione, come potete ben intuire, son moltissimi e adatti alle più disparate esigenze.

Dimensione di una selezione

Possiamo conoscere velocemente quanti elementi sono stati trovati tramite una selezione sfruttando sia il metodo size() oppure tramite la proprietà length() (classica degli array) :

<ul id=”menu”>

var size2 = $(“li”).length;

ed utilizzarla, ad esempio, per eseguire del codice solo se la selezione ha dato come risultato un certo numero di elementi :

if (size2 > 2 ) {

}

Estrazione di elementi

Dopo aver selezionato alcuni elementi, potremmo voler lavorare direttamente solo su alcuni di essi. Tra i metodi che potrebbero interessarci, di sicuro, il più interessante é il metodo get() che fornisce una collezione di elementi su cui possiamo agire come desideriamo :

var lista = $(“#menu li”).get();

Qualora, invece, fossimo interessati solo ad uno specifico elemento, occorre solo passare al metodo get() uno specifico indice per selezionare un particolare elemento del DOM:

var lista = $(“#menu li”).get(0); //solo il primo elemento della lista, cioè Mela

Restando in tema di elementi e posizioni, vi indico il metodo index() capace di restituire l’indice di un elemento rispetto a quelli selezionati. Logicamente, in tal caso, occorre specificare il riferimento preciso ad un elemento del DOM:

$(“#menu li”).index( $(“#arancio”) ); // ritorna 1 iniziando a contare da 0 (elemento Mela)

Ciclare gli elementi

Come nella stragrande maggioranza dei linguaggi, anche in jQuery risulta utilissimo conoscere il metodo che consente di ciclare gli elementi.

In jQuery, non potete fare a meno di usare each(), che consente, appunto, di applicare metodi e funzioni specifiche su ogni elemento della collezione :

$(“#menu li”).each(function () {

});

Noterete che nella sintassi compare anche this che rappresenta l’elemento specifico.

Aggiungere o rimuovere classi agli elementi selezionati

Un metodo che ci servirà in molte occasioni é a mio avviso quello che sto per presentarvi. Si chiama toggleClass(class, switch) ed aggiunge una classe all’elemento selezionato, se questo già non l’ha assegnata, altrimenti la rimuove.

La sintassi prevede un argomento obbligatorio, class, che rappresenta la classe che deve essere aggiunta oppure tolta e uno facoltativo, ovvero switch, che se valorizzato a TRUE aggiunge sempre la classe, nel caso di FALSE la rimuove sempre.

L’esempio é presto fatto soprattutto se avete seguito anche le lezioni precedenti di questo tutorial. Infatti, riprendendo l’articolo che trattava del metodo toggle, possiamo migliorare decisamente la parte di codice jQuery.

Quindi, prendendo la parte di codice jQuery dell’esempio relativo al metodo toggle :

$(document).ready(function(){

$("#ITCitta").toggle(function() {
$("#cittait").addClass("nascondi");

},
function() {
$("#cittait").removeClass("nascondi");

});

$("#STCitta").toggle(function() {
$("#cittast").addClass("nascondi");

},
function() {
$("#cittast").removeClass("nascondi");

});

});

questa, sfruttando toggleClass() diventerà, banalmente :

$(document).ready(function(){

$("#ITCitta").click(function() {
$("#cittait").toggleClass("nascondi");

});

$("#STCitta").click(function() {
$("#cittast").toggleClass("nascondi");

});

});

L’effetto che potete verificare qui resterà il medesimo poiché, come detto, il toggleClass aggiunge la classe ‘nascondi’ all’elemento selezionato, se questo già non l’ha assegnata, altrimenti la rimuove.

Nella prossima lezione, interrompiamo per un attimo la sequenza di argomenti e proporremo qualche primo esempietto simpatico e utile basandoci sui temi trattati finora.

L’articolo precedente aveva affrontato l’argomento relativo alle due principali tipologie si selettori in jQuery. Continuiamo il tema con questo secondo articolo che rappresenta una sorta di continuo del precedente perché ci aiuta a capire come poter filtrare precisamente le nostre selezioni di elementi all’interno del DOM.

I filtri del motore di selezione, similmente a quanto visto per gli pseudoselettori CSS, sono semplicemente preceduti dai due punti “:“.

Vediamo alcuni esempi di sintassi relativa a questi selettori speciali con cui potremo filtrare la selezione degli elementi e,soprattutto, raggruppare elementi specifici.

Qualora, ad esempio, volessimo agire su particolari elementi figli di una lista con id pari a list, potremo scrivere : 

$(“#list li:first-child”);
$(“#list li:last-child”);

per selezionare rispettivamente solo il primo e l’ultimo elemento della lista. Oppure :

$(“#list li:only-child”);

per selezionare solo gli elementi singoli.

Filtri di elementi e form

Passiamo ora a vedere alcuni esempi di filtri su elementi della pagine in base ad alcuni criteri o a specifiche proprietà.

$(“div:hidden”);  si propone di selezionare tutti i tag div nascosti

$(“a:not(.external)”); si propone, tramite negazione not, di selezionare tutti i link tranne quelli con classe external

oppure passando ai form :

$(“input[type='text']“); seleziona tutti i form di tipo testo, mentre

$(“:checked”); seleziona tutti i checkbox selezionati dall’utente

Senza scomodarmi a scrivere un esempio, direi che questo é decisamente molto esplicativo e completo.

Terminata la panoramica relativa a selezioni di elementi e filtri annessi, dalla prossima puntata si può cominciare a veder qualcosa di interessante con i metodi di base.