7 – griglia dinamica di immagini
creare una tabella con una riga che ha id = lista
<table id="tabella"> <tr id="lista"></tr> </table>
creiamo una cartella img e mettiamo delle immagini, poi creiamo una select che contenga come option gli animali
<select id="elencoImg"> <option value="img/cane.png"> Cagnolino </option> <option value="img/oca.png"> Oca </option> <option value="img/uccello.png"> Uccelo </option> <option value="img/gatto.png"> Gatto </option> <option value="img/cervo.png"> Cervo </option> <option value="img/koala.png"> Koala </option> </select>
Importante anche qui assegnare un id alla select (elencoImg). Poi siccome anche l’occhio vuole la sua parte ho inserito qualche regola di stile.
<style type="text/css"> body {background: lightblue;} table {border-collapse: collapse;} select, option {background: yellow;} </style>
l’attributo border-collapse: collapse, permette di non avere spazio tra le celle.
L’intento è di creare una funzione jquery che alla scelata di un’opzione va ad inserire un’immagine nella tabella. Iniziamo col creare una funzione che stampa un alert e poi selezionare le option della select cambiando l’attributo al click col lancio della funzione
$('#elencoImg option').attr('onclick','aggiungi()'); function aggiungi() { alert("AGGIUNGO!"); }
Il selettore jQuery dice prendimi le option che fanno parte dell’id elencoImg e cambia il loro attributo onclick con la funzione aggiungi() . Interessante è che nell’html non vi è alcuna modifica al codice, abbiamo modificato la struttura dinamica memorizzata nella ram del browser, cioè la struttura della DOM. A noi però interessa sapere qual è la voce scelta, su cui è stato fatto click. Quello che contraddistingue una option da un altra è il value. Potrebbe essere conveniente passare il riferimento alla select:
$('#elencoImg option').attr('onclick','aggiungi(this)');
Quindi quando chiamo la funzione aggiungi() metto come parametro il riferimento speciale this , che significa l’oggetto per il quale sta scattando il click, cioè la select, in pratica il this è un puntatore alla select. Ora alla funzione aggiungi() inserisco un parametro e ne verifico il value con l’allert
function aggiungi(voceScelta) { alert(voceScelta.value); }
a questo punto scegliendo una option deve scattare fuori una scritta che indica il value di quella option scelta.
Siamo ora pronti a compilare l’unica riga della tabella. Inizio col crearmi una variabile inizializzata a zero
aggiunti = 0; function aggiungi(voceScelta) { }
ora incremento il valore della variabile ogni volta che richiamo la funzione aggiungi()
aggiunti = 0; () function aggiungi(voceScelta) { aggiunti++; }
ora nella funzione dovrò inserire in html un <td> con dentro le immagini, conviene scriversi come modello dell’html da ottenere, per poi cancellarlo, al fine di avere un riferimento, in quanto è facile confondersi con i segni delimitatori virgolette ” o virgola ‘
<td id='img1'><img src='img/oca.png' /> <br /></td>
adentro alla funzione aggiungi(voceScelta) inserisco la stringa
nuovoTd=""
chiudiamo sempre le virgolette dopo averle aperte
nuovoTd="<td id='img"
Questa prima parte è abbastanza semplice perché ricalca la parte html uguale, ora inizio a concatenare
nuovoTd="<td id='img" + aggiunti + "'> <img src=' "
dopo il valore aggiunti (che mi crea img1, img2, img3…) concateno la virgola ‘ di chiusura con i doppi apici, apro poi il secondo tag html img fino alla prima apertura del singolo apice, dopo src
nuovoTd="<td id='img" + aggiunti + "'> <img src=' " + voceScelta.value + "' /> <br /></td>";
concateno il value doceScelta , concateno la chiusura del singolo apice per completare src e continuo inserendo le restanti parti dell’html in maniera liscia. Faccio poi un alert di nuovoTd per verificare il corretto inserimento del codice
alert(nuovoTd);
Ricordiamoci di eliminare la riga / modello dell’html e facciamo la prova nel browser se viene stampata l’img corrispondente a quella selezionata. Ecco la funzione intera
function aggiungi(voceScelta) { aggiunti++; nuovoTd="<td id='img" + aggiunti + "'> <img src=' " + voceScelta.value + "' /> <br /></td>"; alert(nuovoTd); }
Controllato l’allert che riporti il codice html corretto, possiamo inserire un immagine, agganciando il selettore riga <tr> con id lista e aggiungendo (appendendo) il codice creato con nuovoTd con il metodo append() .
$('#lista').append(nuovoTd);
il pezzo di html creato con nuovoTd verrà aggiunto al <tr>. Possiamo eliminare l’alert. Vediamo tutto lo script completo:
<script> $('#elencoImg option').attr('onclick','aggiungi(this)'); aggiunti = 0; function aggiungi(voceScelta) { aggiunti++; nuovoTd="<td id='img" + aggiunti + "'> <img src=' " + voceScelta.value + "' /> <br /></td>"; $('#lista').append(nuovoTd); } </script>
Questo approccio risulta meno efficiente a livello di codice perché aggiunge un collegamento dinamico a ogni option scelta, lanciando uno script per ogni selezione. Si può ottenere lo stesso risultato andando ad agganciare direttamente la select sapendo tranquillamente quale sua option è stata scelta, conseguentemente posso estrarne il suo vaule. Vediamo questa strada più facile ed efficiente. Innanzitutto aggiungiamo a select l’opzione onchange (al cambio di valore)
<select id="elencoImg" onchange="aggiungi(this)">
al cambio di selezione lancia la funzione aggiungi restituendomi il value dell’opzione scelta. Ovviamente si può commentare la prima riga dello script
//$('#elencoImg option').attr('onclick','aggiungi(this)');
Inoltre oltre alla creazione dell’html memorizzata in nuovoTd potrei usare jQuery per creare i vari elementi, in questo modo
$(document.createElement('td'))
con il metodo createElement, creo un nuvo <td> e in automatico lo seleziono dandolo al motore di jQuery (creato e agganciato al volo)
.attr('id','img'+aggiunti)
attribuisco all’ id img e il valore del contatore aggiunti
.appendTo($('#lista'))
Uso il metodo appendTo (aggancia a) alla riga della tabella con id = lista, quindi ho inserito in <tr id=lista> il <td id=’img1′> <td>
.append($(document.createElement('img')).attr('src',voceScelta.value) )
a questo td creato appendo un nuovo elemento img al quale appendo al suo interno il src = al value ricavato da voceScelta .
Inserisco infine il <br /> finale dentro il<td> e chiudo il comando col punto e virgola
.append('<br />');
ecco lo script completo
<script> aggiunti = 0; function aggiungi(voceScelta) { aggiunti++; $(document.createElement('td')) .attr('id','img'+aggiunti) .appendTo($('#lista')) .append($(document.createElement('img')).attr('src',voceScelta.value) ) .append('<br />'); } </script>
In questo caso risulta maggiormente chiara e maggiormente spendibile l’unica riga precedente dove creo il codice html con nuovoTd, Quest’ultimo esempio va bene per fare pratica con jQuery, ma sicuramente non è più efficiente.
Adesso creiamo i bottoni (è per questo che ho aggiunto il <br />) li inseriamo in delle variabili usando la tecnica di generazione html.
bottoneElimina = "<button style='color: red' onclick=" +'"' + "elimina('img"+ aggiunti +"')" + '"> X </button>'; bottoneSx = "<botton style= 'color: blue' onclick=" +'"' + "spostaSx('img"+ aggiunti +"')" + '"> <- </button>'; bottoneDx = "<botton style= 'color: blue' onclick=" +'"' + "spostaDx('img"+ aggiunti +"')" + '"> <- </button>';
Per creare il codice conviene sempre segnarsi come modello temporaneo il codice html che si vuole ottenere
<button style='color: red' onclick="elimina('img1')"> X </botton>
Inserisco i 3 bottoni
$("#img"+aggiunti).css('background','yellow').append(bottoneElimina).append(bottoneSx).append(bottoneDx);
Aggancio nuovoTd che ha id img e concateno il valore del contatore aggiunti. applico un po’ di stile css, appendo (aggiungo) i 3 bottoni.
Creiamo ora la funzione che ci permette di visualizzare o meno i bottoni destro e sinistro a seconda della posizione dell’immagine
function sistemaBottoni() { var numeroBottoni = $('td button').length; }
inizializzo una variabile locale numeroBottoni (per non entrare in conflitto con codice esterno) e gli associo il numero (lenght) di tutti i bottoni dentro i td (se ho un’immagine ne avrò 3, con 2 ne avrò 6, 3 – 9 …). dentro la funzione sistemaBottoni inserisco:
$('td button').each(function (i) { })
l’insieme dei bottoni del td col metodo each() , tante volte quanti sono i bottoni restituiti dal selettore $(‘td button’), esegui una funzione in linea o anonima. Il parametro i della funzione anonima è un indice corrispondente alla posizione nell’insieme del bottone che sto considerando, quindi la prima volta, quando viene considerato il primo elemento varrà zero, quando considero il secondo varrà 1 e così via fino al raggiungimento del valore di lenght (se lenght vale 10, i andrà da 0 a 9).
b
a
b
a
b
a