Mascarea și verificați câmpul forma telefonului folosind jquery
Bună ziua dragi cititori!
marcarea forme
formele Styling
După cum puteți vedea, am emis aceeași etichetă înlocuitor. El a avut nevoie de doar face deoarece comportamentul normal al plugin-ul este aspectul de deghizare atunci când faceți clic pe teren atunci când câmpul pierde se concentreze, iar deghizarea dispare de asemenea, că acest lucru nu se întâmplă, am adăugat o etichetă înlocuitor. Aici nu am mai scris nimic supranatural, așa că merge mai departe și scrie un simplu script jQuery.
script jQuery
Înainte de a tag-ul corpului de închidere a conecta biblioteca jQuery, plugin intrare Mascat. Ei bine, scenariul nostru:
După cum ați putut observa din script-ul a adăugat o astfel de unitate:
Validarea browser-ul este foarte simplu, nu este nevoie să scrie orice script-uri, suficient pentru a specifica atributul de marcare necesar câmpul de formular care este necesar, standardul este după cum urmează:
Adică este de până la mici, este necesar să se organizeze un test în cazul în care utilizatorul este vizualizarea proiectului / site-ul dvs., acest lucru se poate face un alt plugin foarte mici jQuery care se numește is.mobile.js (este în folderul cu fișierul lecției), conectați-l în același loc în care celelalte scripturi:
Etapa finală
Că nu există conflicte, sub formă de aspect, vom scrie imediat pentru browsere mobile:
In forma de tot ceea ce este destul de simplu:
Aici și acolo, în cele din urmă am ajuns la punctul în care trebuie să aranjați în mod corespunzător script-ul, am citat fișier lista completă script.js:
După cum ați putut observa, vom adăuga o verificare în cazul în care (is_mobile ()!) - adică atunci când utilizatorul nu a vizitat site-ul de pe un dispozitiv mobil, următoarele modificări apar în markup: atributele titlu sunt eliminate. model. necesară. class rfield adăugat (caseta bifată).
concluzie
Codul de mai sus este un pic învechit, așa că am actualizat sursele de mai jos și posta listarea script-ul actualizat și markup (a se vedea stilurile din codul sursă, acestea nu sunt actualizate în mod special).
Despre modificări: script-ul este-mobile.js am dezactivat - un lucru inutil, de intrare mascat și funcționează pe dispozitive mobile (versiunea în codul sursă actualizat la 1.4.1), iar codul de script-ul a fost mai ușor de citit și de înțeles. De asemenea, schimbat atributul de model de aspect în input'ov am eliminat ca inutile.
Layout-ul actualizat
Script-ul actualizat
concluzia 2
Optimizarea conexiunii Google Maps, dezactivând fișierele inutile de stiluri și fonturi, făcând cartela actuală, în cazul prezenței containerului pe pagina
Astăzi voi împărtăși cu tine scenariul pe care am folosi pentru a verifica un simplu câmpurile de formular pentru a umple înainte de a le trimite la server folosind jQuery (script poate valida mai multe formulare de pe o pagină)
Mult timp, n-am scris nimic despre jQuery, cumva mâinile nu au ajuns. Noi rezolva problema de lucru cu linia de produse / servicii / articole, ascunde ultimul element rând atunci când modificați lățimea liniei cu elementele
Vreau să împărtășesc cu tine capul secțiuni HTML markup, pe care am folosi pentru aspectul site-uri
În această lecție ne vom uita la 5 cross-browser, soluții avansate CSS3 aspect foarte usor de proiecte complexe, creative. În special, vom înțelege cum să facă elemente de transparență, umbre, rotație, gradient și inversiune
În cele din urmă a căzut moment liber, și în funcție de solicitarea dvs., am scris un altul, un mic script pentru slider non-circulară, cu derulare pe orizontală, fără utilizarea de plug-in-uri
= = designul dinamic de design receptiv axiomă. Istoria minimă de dezvoltare de web design: calea lui de la fix la lichide și receptiv la (receptiv, adaptive, receptiv) de proiectare
Astăzi va crea o foarte simplu, se poate spune slider animat ciclic elementar cu derulare pe orizontală cu mâinile, fără utilizarea de plug-in-uri (puteți utiliza mai multe cursoare pe pagina)