I controlli offerti da
ASP.NET per la costruzione di tabelle per la rappresentazione di dati (i più usati
Repeater, DataGrid, DataList) sono molto avanzati a livello architetturale ma poi è lasciato allo sviluppatore il compito di estenderli ulteriormente per adattarli alle esigenze dei vari progetti.
Visto che i browser si sono nel tempo evoluti e man mano allineati a livello di features offerte (
Firefox, Internet Explorer, Opera) è ora possibile con poca difficoltà creare effetti grafici efficaci nelle pagine Web ASP.NET ma più in genere pagine HTML in modo da aumentare l'interattività dell'utente con le nostre applicazioni.
Uno degli effetti che utilizzo più spesso è il
mouseover (passaggio del mouse) sulle righe di una tabella in modo che si colorino diversamente durante il passaggio. E' possibile realizzare questa funzionalità sia utilizzando i
CSS che in
Javascript. Mostreremo in questo caso la soluzione con
Javascript utilizzando solo parzialmente i
CSS e il
DOM.
Quello di cui abbiamo bisogno è una semplice tabella in HTML:
<table width="100%" border="1">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>Diciamo subito che durante il passaggio sulle varie righe (rows) della tabella scattano due eventi che sono:
- onmouseover (quando il mouse entra nella riga e si muove)
- onmouseout (quando il mouse esce dalla riga)
Noi andiamo a gestire questi eventi, modifichiamo intanto la tabella come segue:
<table width="100%" border="1">
<tr onmouseover="javascript:Color(this)" onmouseout="javascript:Decolor(this)"><td>1</td></tr>
<tr onmouseover="javascript:Color(this)" onmouseout="javascript:Decolor(this)"><td>2</td></tr>
<tr onmouseover="javascript:Color(this)" onmouseout="javascript:Decolor(this)"><td>3</td></tr>
</table>Siamo andati infatti a gestire i due eventi per ogni riga. Ora è necessario sviluppare il codice delle funzioni Javascript
Color e
Decolor. La parola
this è un puntatore alla riga corrente ossia la riga su cui è posizionato il mouse.
<script language="Javascript">
function Color(t)
{t.style.background='Gray';
}
function Decolor(t)
{t.style.background='White';
}
</script>Il codice qui sopra è molto banale e non fa altro che impostare lo stile background a Gray (grigio) durante il mouseover e a White (Bianco) durante il mouseout. Aprendo la pagina noterete ora che al passaggio del mouse sulle righe si coloreranno di grigio come previsto.