jQuery esempi 2

Lista a scomparsa.

Ipotizzando che nella nostra pagina ASPX abbiamo una lista di questo tipo:

    <dl id="list">                                                                                  
        <dt>Panino con la milza</dt>                                                                
        <dd>                                                                                        
            Tipica specialità palermitana, il panino con la milza nasce nel periodo ...</dd>        
        <dt>Panino crocché e panelle</dt>                                                           
        <dd>                                                                                        
            Il panino con le crocché di patate e le panelle con farina di ceci è l'unione di due    
            tipici prodotti del palermitano ...</dd>                                                
        <dt>Stigghiola</dt>                                                                         
        <dd>                                                                                        
            Le stigghiola è uno dei "piatti" più grassi palermitani.                                
            Le stigghiola sono il budello di capretto, pulito e condito ...</dd>                    
    </dl>                                                                                           

Per ottenere un effetto hide/show di questa lista tramite jQuery, inseriremo il seguente codice (i numeri servono per la spiegazione):

1 -- jQuery(document).ready(function() {                     
2 --     $("#list dd").hide();                               
3 --     $("#list dt").click(function()                      
4 --     {                                                   
5 --         $(this).next("dd:visible").slideUp("slow");     
6 --         $(this).next("dd:hidden").slideDown("slow");    
7 --     });                                                 
8 -- });                                                     

La riga di codice 1 serve per far partire l'effetto solamente dopo che tutto il DOM è stato caricato.
La riga specifica che tutti gli elementi dd dell'elemento identificato come list devono essere nascosti.
Con la riga specifichiamo un evento di tipo click su tutti gli elementi di tipo dt dell'elemento list. Quando l'evento si verificherà, tutti gli elementi dd sotto l'elemento dt appena cliccato verranno controllati.
Se l'elemento dd è visibile, dd:visible, allora lo nasconderemo con slideUp con velocità slow, viceversa se sarà nascosto, dd:hidden, allora lo mostreremo con slideDown.

Enjoy

 

Tags:

jQuery esempi

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:

operators_alternate

Se provate a passar sopra con il cursore:

operators_alternate_highlight

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

Tags: