December
11
2008

Tutorial Jquery manipolare css in modo dinamico in base a scelte di una select

Tutorial->Programmazione-tutorial->Jquery

In questo esempio scaricabile vedremo:

  1. cambiare css ad un div in modo dinamico
  2. creare un evento in ascolto sul cambio di un elemento di una select
  3. usare lo switch in Javascript in modo da condizionare il colore e lo stile in base ad una scelta
  4. la function $(document).ready() che entra in azione non appena viene caricato il Dom

Analizziamo il codice

  1.  
  2.       $(document).ready(
  3.      
  4.           function()
  5.          
  6.           {
  7.            
  8.            
  9.             $('#itemsControl').change(ChangeBorder);
  10.           }
  11.      
  12.       );
  13.  
  14.  

In questo caso la funzione ready prepara l'ascolto sulla select con id #itemsControl, quindi non appena si cambia il valore alla select parte la funzione ChangeBorder:

  1. function ChangeBorder() {
  2.      
  3.       var colore = $(this).val() ;
  4.           //alert(colore);
  5.           switch(colore )
  6.           {
  7.           case '1':
  8.           //verde
  9.           $("#msg").css("border","3px solid green");
  10.           break;
  11.          
  12.           case '2':
  13.           $("#msg").css("border","3px solid red");
  14.           break;
  15.          
  16.           case '3':
  17.           $("#msg").css("border","3px solid yellow");
  18.           break;
  19.          
  20.           }
  21.        
  22.          
  23.       }

Vedete che in base al valore della select cambio il lo stile al div msg.

Esempio Dimostrazione





Pagina 0 di 1
Ordina per Nome Data

0 Commenti per Tutorial Jquery manipolare css in modo dinamico in base a scelte di una select

Link importanti
Tuscan villas pool Lerisorse.com è in vendita contattare programmo@gmail.com
Novità
Varie
Segui il sito con i feed RSS