Implementazione del modello di modulo etichetta mobile

Per facilitare la comprensione e la manutenibilità del codice, stiamo anteponendo le classi che aggiungiamo o rimuoviamo con JavaScript con 'js-'. Aggiungiamo quella classe al nostro foglio di stile e usiamola per nascondere tutti i discendenti etichetta elementi dalla vista. Ricorda come avremmo usato il opacità regola? Questo è dove lo usiamo per nascondere il elementi:

 .etichetta js-hide-label opacity: 0; inizio: 1.5em

Nota: Il opacità la proprietà è supportata in tutti i browser moderni. IE8 non lo riconoscerà, ma va bene perché IE8 non supporta gli attributi segnaposto, quindi non stiamo eseguendo JavaScript per applicare la classe in IE8. Win-win!

Una nota sulle transizioni

Se osservi da vicino, il design dell'interazione di Matt mostra le etichette dei campi dei moduli non solo apparendo e scomparendo, ma facendo così un piccolo movimento su e giù. Poiché i nostri elementi dell'etichetta sono posizionati in modo assoluto, quando aggiungiamo una classe che modifica il suo posizionamento in alto (o sinistra, destra o in basso) il browser può passare a quell'effetto. Tutto quello che dobbiamo fare è aggiungere una proprietà di transizione all'etichetta stessa.

Torniamo al nostro etichetta elemento nel CSS e aggiungere una proprietà di transizione per il superiore e opacità proprietà:

 label -webkit-transition: .333s eas top, .333s facilitano l'opacità; transizione: .333s facilità top, .333s facilità opacità; 

Ciò consente alle etichette non solo di apparire e scomparire senza problemi, ma di ruzzolare su e giù quando diventano completamente opache o trasparenti, in questo modo:

Ora dovresti avere qualcosa di simile quando carichi la pagina (ovviamente in un browser moderno).

Rimozione del colore di evidenziazione

Come accennato in precedenza, stiamo aggiungendo e rimuovendo classi dal

 .etichetta js-unhighlight-label color: # 999

Aggiunta di ascoltatori di eventi

Ora abbiamo un modulo che è progressivamente migliorato e pronto per alcune interazioni JavaScript (nei browser moderni) quando l'utente inizia a interagire con il modulo.

All'interno del segnaposto Se dichiarazione che abbiamo scritto sopra, iniziamo ad aggiungere e rimuovere il nostro js- classi al momento giusto. In primo luogo, selezioneremo i nostri elementi del modulo e aggiungeremo un listener di eventi sul sfocatura, messa a fuoco, e keyup eventi (noi usiamo keyup piuttosto che keydown o pressione di un tasto poiché tali eventi spareranno prematuramente):

 $ ('. form li'). find ('input, textarea'). on ('keyup blur focus', function (e) // Cache i nostri selettori var $ this = $ (this), $ parent = $ this .parent (); // Aggiungi o rimuovi classi if (e.type == 'keyup') // codice keyup qui else else (e.type == 'blur') // sfoca codice qui else if (e.type == 'focus') // codice focus qui);

Ecco una breve spiegazione di ciò che stiamo facendo qui:

• Selezioniamo tutti gli elementi della lista che fanno parte del nostro modulo $ ('. form li'). Quindi, all'interno di quella selezione, troviamo tutto e </code> i campi <code>.trova ('input, textarea')</code>. Questo assicura che l'ultimo input nel nostro markup (il pulsante di invio) non sia incluso nella nostra selezione.</li> <li>Abbiamo messo in cache i selettori che intendiamo utilizzare. Questa è una buona pratica di esibizione. Inoltre, il prefisso del nome della variabile con '$' ci fa sapere che quella variabile specifica è un oggetto jQuery.</li> <li>Abbiamo combinato il <code>sfocatura</code>, <code>messa a fuoco</code>, e <code>keyup</code> eventi e semplicemente controllare il tipo di evento usando <code>tipo e</code> per determinare quali classi aggiungere o rimuovere in momenti specifici.</li> </ul> <h3>Coding on <code>keyup</code> </h3> <p>In base alle regole di interazione stabilite all'inizio che corrispondono al design di Matt, quando un utente inizia a inserire il testo (<strong>non</strong> quando si concentrano sul campo) vogliamo mostrare l'etichetta.</p> <p>Quindi, usando il <code>keyup</code> evento, ogni volta che l'utente inserisce un carattere, possiamo verificare se il campo di input è vuoto (questo codice va all'interno <code>if (e.type == 'keyup')</code>:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); else $ parent.removeClass ('js-hide-label');</pre> <p>Notate che la nostra logica funziona così:</p> <ul> <li>Se il valore dell'input <strong>è vuoto</strong>, nascondi l'etichetta aggiungendo la classe 'js-hide-label'.</li> <li>Altrimenti (il valore dell'input <strong>non è vuoto</strong>), mostra l'etichetta rimuovendo la classe 'js-hide-label'.</li> </ul> <p>Ora dovresti avere qualcosa che funzioni in questo modo quando inserisci o cancelli del testo da un campo di input:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_2.gif"><br> <h3>Coding on <code>sfocatura</code> </h3> <p>Ora, secondo le nostre regole di interazione (di nuovo), sappiamo che quando un utente sposta lo stato attivo da un campo di input a quello successivo (<code>sfocatura</code> evento), dovremmo de-enfatizzare il colore del <code><label></code> elemento a seconda che l'utente abbia effettivamente inserito qualcosa nel campo.</p> <p>Dentro il <code>else if (e.type == 'blur')</code>, aggiungeremo il seguente codice:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); else $ parent.removeClass ('js-hide-label'). addClass ('js-unhighlight -label ');</pre> <p>Notate che la nostra logica funziona così:</p> <ul> <li>Se il valore dell'input <strong>era vuoto</strong> quando l'utente ha rimosso lo stato attivo, nascondi l'etichetta applicando il <code>js-nasconde-label</code> classe.</li> <li>Altrimenti (il valore dell'input <strong>non era vuoto</strong> quando l'utente ha rimosso lo stato attivo) mostra l'etichetta rimuovendo la classe <code>js-nasconde-label</code> e de-enfatizzare il colore dell'etichetta aggiungendo la classe 'js-unhighlight-label'.</li> </ul> <p>Ora dovresti avere qualcosa che de-enfatizza il colore dell'etichetta quando rimuovi lo stato attivo, in questo modo:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_3.gif"><br> <h3>Coding on <code>messa a fuoco</code> </h3> <p>Infine, dobbiamo aggiungere una piccola logica per quando un utente si concentra su un input. Seguendo le nostre regole di interazione, utilizziamo il seguente codice JavaScript all'interno di <code>altrimenti se (e.type == 'focus')</code> sezione:</p> <pre> if ($ this.val ()! == ") $ parent.removeClass ('js-unhighlight-label');</pre> <p>La nostra logica funziona così:</p> <ul> <li>Se il valore dell'input <strong>non è vuoto</strong>, rimuovi la classe 'js-unhighlight-label' del genitore.</li> </ul> <p>Ora, quando un utente si concentra su un campo modulo, se non è vuoto, l'etichetta sarà enfatizzata con il colore di evidenziazione, in questo modo:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_4.gif"><br> <hr> <h2>Punti bonus</h2> <p>C'è molto di più che potremmo fare in questo modulo, inclusa l'aggiunta di validazione lato client e lato server. Potremmo anche creare altre classi per lo styling di valori di campi validi e non validi. Ad esempio, potremmo aggiungere stili a una classe di 'js-error' che andrebbe sul genitore <code><li></code> elemento quando il valore dell'input non è valido, in questo modo:</p> <pre> .js-error border-color: # f13b3b! important; / * sovrascrive tutti i casi * / .js-error + li border-top-color: # f13b3b; .js-error label color: # f13b3b; </pre> <p>Questi tipi di stili di convalida potrebbero rendere la nostra forma un aspetto più simile a questo:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_10.png"><br> <p>Tuttavia, questo tutorial intendeva mostrare come creare una forma accessibile e progressivamente migliorata che imitasse il design di Matt. E, devo dire, penso che abbiamo fatto abbastanza bene.</p> <p>Sentiti libero di copiare, modificare o migliorare questo modulo in qualsiasi modo tu ritenga opportuno nei tuoi progetti!</p> <hr> <h2>link utili</h2> <ul> <li>http://floatlabel.com</li> <li> @floatlabel su Twitter; esempi in natura</li> <li>I pensieri di Brad Frost sul pattern Float Label </li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web design</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/import-and-archive-your-tweets-with-wordpress.html">Importa e archivia i tuoi tweet con WordPress</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/import-and-archive-your-tweets-with-wordpress_15.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/implementing-the-eu-cookie-law-into-your-wordpress-site.html">Implementazione della legge sui cookie dell'UE nel tuo sito WordPress</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/implementing-the-eu-cookie-law-into-your-wordpress-site_4.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Ricerca..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>