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