click prelucrare eveniment înseamnă css

In ultimii ani am văzut o expansiune remarcabila de aplicatii web limbaje de client, în special HTML5 și CSS3.

remarcă

Tehnicile descrise aici nu sunt destinate să „viața reală.“ de materiale didactice ar trebui să fie luate în considerare ca bază pentru experimentare. Mai ales că unele metode susținute prost browsere. Scopul lecției - caracteristici tactile ale frontierelor CSS.

utilizați caseta de selectare

Cu siguranță ați întâlnit deja cu această metodă. Este cea mai populara metoda de a gestiona instrumentele CSS eveniment clic.

Metoda se bazează pe utilizarea o casetă de selectare. Acest element are un caracter binar și nu poate fi decât într-una din cele două state. Prin urmare, această metodă este foarte fiabil mod de a gestiona evenimentele clic în CSS.

Metoda se bazează pe utilizarea de pseudo-clasa: verificat și selectorul

Vă rugăm să rețineți că acesta va lucra cu selectorul +. Esența metodei constă în faptul că „în cazul în care caseta este bifată, următoarele elemente cu clasa .Pentru a-fi-modificat va fi de culoare roșie.“

Verificați caseta nu arata foarte atractiv. Dar puteți face un aspect mai interesant și ascunde eticheta caseta de selectare atașat la acesta. După ceva de genul:

Așa că ne-am ascunde caseta de selectare și de a folosi tag-ul pentru a răspunde la eveniment click:

Ne-am intors butonul, atunci când este împins, se schimbă culoarea textului într-un paragraf. Apăsarea butonului schimbă culoarea din spate.

(Rețineți că există mai multe metode pentru a ascunde o casetă de validare evident -. Afișa în aplicația :. Niciuna)

• Binare, există doar două stări - verificate sau neverificată
• Apăsarea conduce la restaurarea statului (acest element poate fi negativ)
• Vă permite să organizați procesarea evenimentelor legate de click (în cazul în care prima casetă de selectare este marcat, iar a doua casetă de selectare este bifată, apoi efectuează următoarele acțiuni)

• Elementele trebuie să aibă un strămoș comun
• Necesită markup HTML suplimentare (de intrare, eticheta, și așa mai departe)
• acțiuni suplimentare este necesară pentru a lucra pe browsere mobile

Mod de preparare: țintă

Există o altă metodă folosind un pseudo-clasă: țintă. Această pseudo-clasă este similar cu pseudo-clasa: hover care corespunde numai la anumite condiții.

Eveniment special pentru pseudo-clasa: țintă depinde de „identificatorul fragmentului“. Pune pur și simplu, această pseudo-clasă se referă la hashtag, care este situat la capătul unei adrese URL, și devine activă atunci când hashtag și ID-ul meciului.

Când faceți clic pe un link (href = "# id") a schimbat adresa URL și o tranziție de tag-ul #ID pe pagină. În prezent, identificator ID element poate fi alocat prin utilizarea pseudo-clasă: țintă.

• cod CSS simplu
• Mare pentru partiționarea

• Gunoi în istoria browser-ului
• Aceasta apare pagina de defilare
• Necesar link-uri tag sau tranzacții cu URL-ul pentru a include hashtagul
• Puteți lucra doar pe un singur element (ca ID-ul este unic)
• Nu există nici o modalitate de a reveni la starea inițială, fără a utiliza un alt hashtag, link-uri sau operațiuni de la o adresă URL

Mod de preparare: focus

Vom continua examinarea noastră din drum cu un alt pseudo-clasa -: focus. Ideea este aproape la fel ca în cazul precedent, cu excepția faptului că nu este de așteptat să se schimbe URL-ul. Aici ne bazăm pe focalizarea de intrare de pe un anumit element.

Când vă aflați pe o pagină, folosind tasta tab, puteți trece de la un element la altul. Această metodă este foarte utilă atunci când se lucrează cu formulare pentru tranziția între elementele fără ajutorul mouse-ului. De asemenea, metoda utilizată pentru persoanele cu deficiențe de vedere naviga pagina.

Este important ca unele elemente pot primi focus intrare, cum ar fi link-uri, paragrafe, câmpuri de intrare și multe altele. Trebuie doar să setați atributul tabindex pentru a le o valoare numerică pentru ei.

• Foarte simplu CSS si HTML
• navigare prin excelenta

• un element este necesar, cu un atribut focalizare sau tabindex
• Conformitatea apare numai în cazul în care focalizarea de intrare (prin apăsarea oriunde în altă parte a algoritmului încurcă pe pagina)

Metoda tranzițiilor

Probabil, această metodă este cel mai „murdar“ să se ocupe de eveniment clic în CSS.

Ideea este de a „magazin“, stilul CSS în CSS tranziție. Noi folosim o întârziere pseudo-infinit, pentru a preveni o revenire la starea inițială. Sună complicat, dar, de fapt, este foarte simplu să pună în aplicare.

Întârzierea este de aproximativ 116 zile. Nu este infinit, dar unele aparență de ea la condițiile noastre. Prin urmare, modificările sunt salvate, și nu există nici o întoarcere la starea inițială.

• Simplu și elegant
• starea salvată, chiar dacă tranziția nu este de peste

• slabul suport în browsere (nu IE9 și Opera Mini)
• Aceasta funcționează numai cu valori care pot fi utilizate cu tranziții
• Nu există nici o modalitate de a reveni la starea inițială
• Nu există nici o speranță reală infinit (în cazul în care proiectul implică așteptat mai mult de 116 de zile)

5 lecții coloana ultima „CSS“

un efect redus cu personaje de animație interactive.

Conceptul mic de sfaturi distracție, care sunt puse în aplicare pe SVG și anime.js. În plus față de stilul special în exemplul realizat animația și transformarea obiectelor grafice.

Experiment: animat litere SVG bazate pe anime.js bibliotecă.

afișare cool pagina web a experimentului pe care „first-person“ prin ochelari de soare.

Script-pilot drop-down de navigare.

Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!

Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!

Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!