Listy łatwe do odczytania w innym kolorze i efekt mouseover

W tym artykule zobaczymy, jak utworzyć prosty list, które są czytelne dla użytkownika.
W tym celu będziemy używać dwóch prostych środków:

• na przemian kolory dla różnych wierszy z listy;
• Zaznacz wybrany wiersz po najechaniu myszą.

Zróbmy przykład i powiedzieć możemy pokazać użytkownikowi listę produktów dostępnych w naszym e-commerce. Poniżej wynik, że osiągniemy:

Jak widać stosowanie kolorów na przemian w różnych liniach łatwiejsze do odczytania różnych wpisów na liście, a markerem obecności na myszy czyni go jeszcze bardziej bezpośrednio związany z przedmiotem linii naszego zainteresowania.

Aby nasza lista, użyliśmy prostej tabeli HTML, kilka instrukcji i trochę CSS DHTML ożywić go. Ale bądźmy stopni.

Zacznijmy CSS i patrz poniżej treści naszego arkusza stylów:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 background: # 808080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

To co zrobiliśmy jest bardzo prosta: najpierw stylizowane tabeli poprzez nadanie klasy jako całości ("tbElenco"), potem stylizowane i <td> <th> całości, a następnie stworzyliśmy trzy różne klasy odpowiadające trzem Stan naszych różnych linii: normalny, alternatywne i wyróżnione.

Pójdźmy dalej kodu naszej tabeli:

 <br cellspacing="0" cellpadding="2" class="tbElenco">







 <tr>







 <th> produktu </ th>







 Ilość <th> </ th>







 <th> Cena </ th>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> Camera </ td>







 <td> 3 </ td>







 <td> 100,00 Euro </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> 20-calowy telewizor LCD </ td>







 <td> 1 </ td>







 <td> 220,00 Euro </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> MP3 Player </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> odtwarzacz DVD </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Konsole </ td>







 <td> 1 </ td>







 <td> 200,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 Mini-DVD Kamery <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Euro </ td>







 </ Tr>







 </ Table>

Jak widać jest to banalne tabeli HTML, w którym zadbaliśmy, aby przypisać do różnych linii (<tr>) klasy "normalne" i "AC".

Stymulowanie wyglądu wiersza na linii myszy kojarzy nam się element (<tr>) onmouseover i onmouseout zdarzenia, które stanowią odpowiednio dynamicznego przypisywania do klasy "zaznacz" po najechaniu i powrót do klasy rozpocząć, gdy kursor myszki opuszcza rząd.