Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera.
In questo post vedremo come evidenziare il campo di testo selezionato dall’utente, in modo da aiutarlo a non perdere di vista il punto di lettura della pagina, e vedremo come diversificare lo stile di due textarea senza ricorrere alle classi (risparmiando in termini di peso della pagina e mantenendo più pulito il codice).
Infine vedremo come realizzare lo stesso con jQuery, un framework di javascript.
:enabled
e :disabled
invece si può , come accennato prima, gestire il comportamento degli elementi abilitati al riempimento o meno. L’esempio non funzionerà su IE8 e precedenti.
Come esempio, poniamo il caso di avere un form con due campi textarea, uno per l’invio del messaggio ed un’altro che contiene il testo della policy. Per differenziarli utilizzeremo le pseudo-classi invece di attribuire ad esse due classi distinte:
<!-- inserire nell'HTML --> <form> <div id="contenitore2"> <h4>Semplice esempio di blocco. </h4> <label for="messaggio">Esempio di Text AREA : </label> <br /> <textarea id="messaggio" name="messaggio"></textarea> <label for="privacy">Esempio di Text AREA : </label> <br /> <textarea id="privacy" name="privacy" disabled="disabled"> Testo Privacy ... </textarea> </div> </form>
/* inserire nel CSS */ #contenitore2 label {width: 175px;} #contenitore2 textarea, #contenitore2 input { background:#e0eee0; color:#666; border:1px solid #999; width: 175px; } #contenitore2 input:focus, #contenitore2 textarea:focus { border:1px solid #3C3; background:#D9FFFF; } #contenitore2 textarea:disabled, #contenitore2 input:disabled { background:#D9FFFF; color:#666; border:1px solid #999; }
Se prendiamo il primo esempio e inseriamo una casella di accettazione della privacy, potremmo abilitare un campo tutti i campi input (come nel seguente esempio live) solo se la casella venisse spuntata[vedere il tab HTML], aggiungeremo anche il pulsante per l’invio di dati.
Il foglio di stile rimane come quello di sopra, cambiando solo il nome dell’ID [vedere il tab CSS].
Invece, per quanto riguarda il codice javascript creeremo una funzione chiamandola
toggleStatus
che si occuperà di controllare se la casella è stata spuntata per abilitare i nostri campi. Questa funzione s’invocherà la prima volta quando il DOM è caricato attraverso la funzione $(document).ready(function() {});
e successivamente quando cambia lo stato della casella per l’intervento dell’utente.”Live

Zend ⊚
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …

JQuery ⊚
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
Python ⊚
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
Css ⊚
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …
Css ⊚
Cercando di ottenere siti web CSS-based con lo stesso aspetto in tutti i browser spesso può essere difficile. Molti dei problemi invece si trovano con Internet Explorer che implementa dei comandi CSS diversamente da altri,…
Aggiungi un commento