Face un simplu comutator stiluri

O modalitate de a îmbunătăți interacțiunea utilizatorilor cu site-ul dvs. - pentru a le permite pentru a personaliza anumite aspecte ale acesteia. Acesta poate fi orice - de la simplu pentru a schimba dimensiunea fontului pentru a selecta limba sau locale corespunzătoare. Ca dezvoltator, văd în această dublă provocare. Ai nevoie de ambele pentru a oferi utilizatorului posibilitatea de a personaliza ceva, și ai nevoie de undeva pentru a stoca rezultatul setărilor de utilizator la intrarea următoare, el nu a pierdut rezultatele muncii lor. În acest tutorial vă voi arăta cum să creați un simplu comutator stiluri, precum și pentru a stoca setările de utilizator în magazin local.

Primul lucru pe care avem nevoie de o pagină HTML cu o cantitate mică de conținut și stiluri. Am adăugat, de asemenea, o listă drop-down în cazul în care utilizatorul va selecta stilul dorit să-l. Un exemplu ar putea arăta această pagină, este prezentată mai jos:

Reacție la evenimente

Deoarece meniul vertical este utilizat pentru a schimba stiluri, adauga eveniment ascultător la un element select. care va răspunde în mod corespunzător de fiecare dată când utilizatorul va selecta un stil nou din listă. Conform modelului condus de un eveniment al doilea nivel al W3C DOM. modalitate standard de înregistrare tratare a evenimentului este următoarea intrare:

Semnificația fiecărui argument:

• eveniment-name - un șir de caractere care reprezintă numele sau tipul de eveniment pentru care doriți să adăugați un ascultător
• apel invers - Funcția de apel invers (apel invers), care va fi numit atunci când evenimentul este declanșat
• utilizare de captare - o valoare booleană care determină dacă un apel invers pentru a fi invocate atunci când evenimentul este în faza de interceptare, adică, atunci când evenimentul se scurge din rădăcina documentului la țintă.

Din păcate, IE8 și predecesorii săi nu urmează acest model. In schimb, IE oferă o metodă alternativă attachEvent () în același scop. Indiferent dacă alegeți să sprijine sau nu suporta versiuni mai vechi ale IE, depinde de tine, sau de la un public pe care le furnizați resursa. Trebuie să cântărească costul de suport pentru browsere mai vechi, precum și beneficiile pe care pot oferi acest sprijin. În cazul nostru, este o chestiune de a folosi un simplu funcții de ambalaj, astfel încât suportul IE8 nu este prea dificil. Acest exemplu arată modul în care evenimentul de schimbare este procesat pentru a selecta elementul cross-browser.

În cazul switchStyles () funcția trebuie remarcat faptul că această variabilă se referă la elementul care a cauzat evenimentul (în acest caz - selectați elementul). Prin urmare, this.options ne oferă acces la opțiunile de elementul select. și this.options [this.selectedIndex] oferă Accesarea unui element selectat. Din aceasta doar pentru a obține valoarea atributului valoarea elementului din listă selectată.

schimbarea stiluri

Acum, să adăugați câteva stiluri care ar fi mai târziu posibilitatea de a trece de utilizator. Creați următorul CSS-fișier în proiect:

Când utilizatorul selectează un stil diferit din lista drop-down, am aplicat elementului corpului corespunzător clasei, iar restul se va elimina:

În această etapă, avem un full-featured stiluri de comutator prezentate în exemplul următor:

Lucrăm la nivel de fișier CSS

clase de comutare a lucrat bine pentru demo-ul nostru. Dar, dacă lucrați cu o gamă largă de stiluri, ar fi mult mai convenabil pentru a le menține în fișiere separate. Mai târziu, puteți comuta fișierele de stil corespunzătoare, mai degrabă decât pentru a comuta clase. Acest cod se conectează foaia de stil la pagina:

Amintiți-vă alegerea utilizatorului

La etapa actuală, avem deja un comutator de stiluri. Din păcate, atunci când reporniți din nou pagina, utilizatorul va acorda o valoare implicită. Pentru a rezolva această problemă, clientul va utiliza magazia pentru a salva setările. Pe fiecare pagină de reîncărcare, vom restabili aceste setări din magazia.

Există o serie de tehnologii de stocare a datelor pe partea de client. Pentru acest caz, vom folosi de stocare locală. Stocarea locală deja susținută de browsere moderne, și oferă până la 5 MB de spațiu disponibil pentru stocarea de date. Și, spre deosebire, cookie-urile au, informații nu este niciodată trimis la server de la magazin local. Dacă aveți nevoie pentru a sprijini browsere mai vechi (cum mă simt rău pentru tine), pentru aceste scopuri, există soluții. De asemenea, rețineți că unele browsere, cum ar fi, de exemplu, IE8, nu sprijină stocarea locală pe fișierul: // protocol.

Sintaxa de bază funcționează cu stocare locală:

Pentru a aplica această pagina noastră, valoarea selectată de către utilizator este necesar pentru a menține un element din listă de fiecare dată când schimbați elementul select:

De asemenea, este necesar să se verifice valoarea acestei chei atunci când se încarcă pagina, iar în cazul în care unul este găsit - pentru a seta clasa corespunzătoare a corpului elementului. Acest lucru se poate face în cazul în care prima încercare de a obține un cuplu de „cheie / valoare“ de la magazin:

În cazul în care un element este în magazin, puteți parcurge articolele din listă și să le compare cu valorile pe care am scos de la magazin local. Dacă este găsită o potrivire - se poate observa modul în care elementul selectat din listă:

Exemplul de mai jos include modificările noastre:

Acum putem schimba stiluri din lista verticală. În plus, atunci când vom actualiza pagina, lista drop-down este readus la starea sa anterioară. Dar, totuși, atunci când reporniți stilurile noastre nu sunt restaurate, selectat ultima dată. De ce?

În general, dacă vom schimba elementele software ale listei, evenimentul de schimbare nu este emis. Să-l repara propria funcție de declanșare:

Această funcție, putem trece numele evenimentului pe care dorim să numim, precum și un element, care va fi cauzate de eveniment. În continuare, controalele funcție dacă browser-ul răspunde la document.createEvent () (toate browserele moderne, următoarele standarde, le suportă). Dacă este așa, atunci funcția utilizează dispatchEvent (), în scopul de a declanșa un eveniment. Altfel, funcția utilizează fireEvent metoda ().

Atingerea finală a script-ul este de a adăuga următoarea linie de cod:

După ce am adăugat această linie, codul nostru final arată astfel:

concluzie

În acest tutorial vă voi arăta cum să activați un utilizator pentru a schimba aspectul site-ului. De asemenea, ați învățat cum să salvați setările personalizate, care îmbunătățește interacțiunea utilizatorului cu site-ul. Atunci când este utilizat în mod corespunzător, această tehnică vă oferă un instrument puternic, cu care puteți selecta site-ul dvs. dintr-un număr de alții ca el.

5 lecții coloana ultima „jQuery“

Astăzi am dori să vă spun despre TypeIt bibliotecă - gratuit jQuery plugin. Puteți să-l utilizați pentru a simula tastare. Dacă totul este configurat corect, acesta este un efect foarte realist poate fi atins.

jQuery plug-in pentru a crea o cronologie.

jQuery plugin pentru a crea o diagramă Gantt.

Un exemplu despre cum să pună în aplicare fișierul de descărcare prin intermediul PHP și jQuery ajax.

Alexander_Muromtsev

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!