Quello che sto per iniziare a scrivere non è nulla che non possiate trovare nei tutorial su jQuery o in giro in rete; solo che questi li ho usati per scopi personali :-)
Primo esempio: Tabella con righe colorate in maniera alternata.
Createvi una tabella di questo tipo:
<table id="operators" class="contentTable">
<thead>
<tr>
<th><b>Begins With</b></th>
<th><b>Begins with a Given Text Value</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><b>Contains</b></td>
<td>Contains a given text value</td>
</tr>
<tr>
<td><b>Eq</b></td>
<td>Equal to</td>
</tr>
<tr>
<td><b>Geq</b></td>
<td>Greater than or equal to</td>
</tr>
<tr>
<td><b>Gt</b></td>
<td>Greater than</td>
</tr>
aggiungete uno script jQuery di questo tipo:
jQuery(document).ready(function() {
$("#operators tbody tr").hover(function()
{
$(this).addClass("trhighlight")
},function()
{
$(this).removeClass("trhighlight")
}).filter(":even").addClass("even");
});
createvi anche un css così:
.trhighlight
{
background-color: Yellow;
color: Black;
}
.even
{
background-color: #0066CC;
}
Cosa otterrete?
Quanto segue in stato normale:
Se provate a passar sopra con il cursore:
Avete creato una tabella con le righe alternate e con un effetto highlight quando si passa sopra con il mouse.
Cosa fa jQuery?
Con questa riga jQuery attende che tutta la struttura DOM venga carica
jQuery(document).ready(function()
Mentre con le seguenti righe:
$("#operators tbody tr").hover(function()
{
$(this).addClass("trhighlight")
},function()
{
$(this).removeClass("trhighlight")
})
jQuery parserà la struttura DOM, troverà l'elemento con l'identificativo #operators e applicherà l'effetto hover.
Questo effetto accetta due funzioni, la prima da applicare quando il cursore è sopra l'elemento e la seconda funzione per quando il cursore non sarà più sopra l'elemento.
Per concludere diciamo a jQuery tramite riga:
.filter(":even").addClass("even");
. -> l'oggetto trovato in precedenza
filter -> prendi solamente gli oggetti pari
addClass -> e setta la classe css even all'oggetto
così facendo riusciamo ad ottenere una riga colorata ed una no nella nostra tabella.
I tipi di effetti ottenibili sono migliaia.
Vi rimando alla pagina di jQuery che li tratta in maniera ottima.
La tabella dove vorrete lavorare potrebbe essere una GridView o un altro componente di ASP.NET, così facendo potreste riscontrare problemi con l'id che ASP.NET associa al controllo se utilizzate MasterPage o WebUserControl etc.
Se, ad esempio, ho una GridView che si chiama gvResult e si trova dentro una pagina che utilizza una MasterPage, l'id risultante potrebbe essere qualcosa simile a: ctl00_nomeContent_gvResult