Implementarea modelului de formular pentru etichete plutitoare

Pentru a ajuta la înțelegerea și mentenabilitatea codului, prefixăm clasele pe care le adăugăm sau le eliminăm cu JavaScript cu 'js-'. Să adăugăm acea clasă la foaia de stil și să o folosim pentru a ascunde toți descendenții eticheta elemente din vedere. Amintiți-vă cum am fost de gând să folosim opacitate regulă? Aici îl folosim pentru a ascunde elemente:

 .jc-ascunde eticheta etichetă opacity: 0; top: 1.5em

Notă: opacitate proprietatea este susținută în toate browserele moderne. IE8 nu o va recunoaște, dar asta e bine deoarece IE8 nu suportă atribute de substituent, deci nu executăm de fapt JavaScript pentru a aplica clasa în IE8. Win-win!

O notă privind tranzițiile

Dacă observați îndeaproape, designul de interacțiune al lui Matt arată că etichetele câmpului de formă nu apar doar și dispar, ci fac o mișcare mică în sus și în jos. Deoarece elementele noastre de etichetare sunt poziționate absolut, atunci când adăugăm o clasă care își schimbă poziția de top (sau stânga, dreapta sau jos), browserul poate trece la acest efect. Tot ce trebuie să facem este să adăugăm o proprietate de tranziție la eticheta în sine.

Să ne întoarcem la noi eticheta element în CSS și adăugați o proprietate de tranziție pentru top și opacitate proprietăţi:

 etichetă -webkit-tranziție: .333s ușurință în sus, .333s ușurința opacitate; tranziție: .333s ușurință în sus, .333 ușurează opacitatea; 

Acest lucru permite ca etichetele să nu apară și să dispară ușor, ci să bobbleze în sus și în jos atunci când devin complet opace sau transparente, cum ar fi:

Ar trebui să aveți acum ceva de genul acesta atunci când încărcați pagina (într-un browser modern desigur).

Eliminarea culorii evidențierii

Așa cum am menționat mai sus, adăugăm și eliminăm clase din

 .JS-etichetă cu etichetă neîntreruptă culoare: # 999

Adăugarea ascultătorilor de evenimente

Acum avem un formular care este progresiv îmbunătățit și pregătit pentru o anumită interacțiune cu JavaScript (în browserele moderne) atunci când utilizatorul începe să interacționeze cu formularul.

În interiorul substituentului dacă declarația pe care am scris-o mai sus, să începem să adăugăm și să eliminăm js- clase la momentul potrivit. În primul rând, vom selecta elementele formularului nostru și vom adăuga un ascultător al evenimentului pe estompa, concentra, și keyup evenimente (folosim keyup Decat Tasta în jos sau keypress deoarece aceste evenimente se vor declanșa prematur):

 $ (', formarea') pe ('keyup blur focus', funcția (e) // Cache-ul nostru selector var $ this = $ (this), $ parent = $ this .Parent (); // Adăugați sau eliminați clase dacă (e.type == 'keyup') // tastați codul aici altceva dacă (e.type == 'blur') // blur cod aici altceva dacă (e.type == 'focus') / / codul de foc aici);

Iată o scurtă explicație a ceea ce facem aici:

• Selectăm toate elementele listate care fac parte din formularul nostru $ (formular li). Apoi, în interiorul acelei selecții găsim totul și </code> câmpuri <code>.găsi ('input, textarea')</code>. Acest lucru asigură faptul că ultima intrare din marcajul nostru (butonul de trimitere) nu este inclusă în selecția noastră.</li> <li>Am stocat selectorii pe care intenționăm să le folosim. Aceasta este o practică bună de performanță. De asemenea, prefixarea numelui variabilei cu '$' ne permite să știm că acea variabilă specifică este un obiect jQuery.</li> <li>Am combinat <code>estompa</code>, <code>concentra</code>, și <code>keyup</code> evenimente și pur și simplu verificați tipul de eveniment folosind <code>e.type</code> pentru a determina ce clase vom adăuga sau elimina la anumite momente.</li> </ul> <h3>Codificarea <code>keyup</code> </h3> <p>Conform regulilor de interacțiune pe care le-am stabilit la început care corespund designului lui Matt, atunci când un utilizator începe să introducă textul (<strong>nu</strong> când se concentrează pe câmp) vrem să prezentăm eticheta.</p> <p>Deci, folosind <code>keyup</code> eveniment, de fiecare dată când utilizatorul introduce un caracter, putem verifica dacă câmpul de intrare este necompletat (acest cod intră <code>dacă (e.type == 'keyup')</code>:</p> <pre> dacă $ this.val () == ") $ parent.addClass ('js-hide-label'); altceva $ parent.removeClass ('js-hide-label'</pre> <p>Observați că logica noastră funcționează astfel:</p> <ul> <li>Dacă valoarea de intrare <strong>este necompletat</strong>, ascundeți eticheta adăugând clasa "js-hide-label".</li> <li>În caz contrar (valoarea de intrare <strong>nu este necompletat</strong>), afișați eticheta eliminând clasa "js-hide-label".</li> </ul> <p>Ar trebui să aveți acum ceva care funcționează astfel, atunci când introduceți sau ștergeți text dintr-un câmp de introducere:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_2.gif"><br> <h3>Codificarea <code>estompa</code> </h3> <p>Acum, conform regulilor noastre de interacțiune (din nou), știm că atunci când un utilizator mișcă focalizarea de la un câmp de introducere la altul (<code>estompa</code> eveniment), ar trebui să de-accentuăm culoarea <code><label></code> element în funcție de faptul că utilizatorul a introdus efectiv ceva în câmp.</p> <p>În interiorul <code>altfel dacă (e.type == 'blur')</code>, vom adăuga următorul cod:</p> <pre> dacă $ this.val () == ") $ parent.addClass ('js-hide-label'); altceva $ parent.removeClass ('js-hide-label' -eticheta'); </pre> <p>Observați că logica noastră funcționează astfel:</p> <ul> <li>Dacă valoarea de intrare <strong>a fost necompletat</strong> când utilizatorul a eliminat focalizarea, ascundeți eticheta aplicând <code>js-ascunde-etichetă</code> clasă.</li> <li>În caz contrar (valoarea de intrare <strong>nu a fost gol</strong> când utilizatorul a eliminat focalizarea) arăta eticheta prin eliminarea clasei <code>js-ascunde-etichetă</code> și de-accentua culoarea etichetei prin adăugarea clasei "js-unhighlight-label".</li> </ul> <p>Ar trebui să aveți acum ceva care de-accentuează culoarea etichetei atunci când eliminați focalizarea, după cum urmează:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_3.gif"><br> <h3>Codificarea <code>concentra</code> </h3> <p>În sfârșit, trebuie să adăugăm o mică logică atunci când un utilizator se concentrează pe o intrare. În conformitate cu regulile noastre de interacțiune, să folosim următorul cod JavaScript în interiorul <code>altfel dacă (e.type == 'focus')</code> secțiune:</p> <pre> dacă ($ this.val ()! == ") $ parent.removeClass ('js-unhighlight-label');</pre> <p>Logica noastră funcționează astfel:</p> <ul> <li>Dacă valoarea de intrare <strong>nu este necompletat</strong>, eliminați clasa "js-unhighlight-label" a părintelui.</li> </ul> <p>Acum, atunci când un utilizator se concentrează pe un câmp de formular, dacă nu este gol, eticheta va fi subliniată cu culoarea evidențiată, după cum urmează:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_4.gif"><br> <hr> <h2>Puncte bonus</h2> <p>Există mult mai multe posibilități pentru acest formular, inclusiv adăugarea validării de la client și server. De asemenea, am putea crea mai multe clase pentru a modela valori valide și nevalide ale câmpului. De exemplu, am putea adăuga stiluri unei clase de "js-error" care ar merge pe părinte <code><li></code> atunci când valoarea de intrare este nevalidă, după cum urmează:</p> <pre> .js-error limita-culoare: # f13b3b! important; / * suprascrie toate cazurile * / .js-error + li border-top-color: # f13b3b; .js-eroare etichetă culoare: # f13b3b; </pre> <p>Aceste tipuri de stiluri de validare ar putea face ca formularul nostru să arate mai mult ca acesta:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_10.png"><br> <p>Cu toate acestea, acest tutorial a fost menit să arate modul în care am putea crea o formă accesibilă, progresiv îmbunătățită, care să imite designul lui Matt. Și, trebuie să spun, cred că am făcut destul de bine.</p> <p>Simțiți-vă liber să copiați, să modificați sau să îmbunătățiți acest formular în oricum văd că este potrivit în proiectele proprii!</p> <hr> <h2>Link-uri utile</h2> <ul> <li>http://floatlabel.com</li> <li> @floatlabel pe Twitter; exemple în sălbăticie</li> <li>Gândurile lui Brad Frost pe modelul de etichete plutitoare </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ți și arhivați dvs. Tweets cu 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">Implementarea legii UE Cookie în site-ul dvs. 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la 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="Căutare..."> <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>