Share
S-ar putea sa te gandesti la tine: "Ce este tot tam-tam-ul cu jQuery? Trebuie sa descarci o gramada de plug-inuri pentru a face chiar biblioteca in timp util. În primul rând, nu este adevărat. În al doilea rând, biblioteca jQuery a fost concepută special pentru acest scop. Prin păstrarea bibliotecii de bază cât mai mică posibil - aproximativ 16 kb - utilizatorii pot aplica apoi pluginuri suplimentare la discreția lor. Astăzi, vă voi învăța cum să vă construiți primul plugin "Centru" de la zero. Să începem!
Vrem să creăm un plugin care să regleze dinamic stilul unui element specificat, pentru a-l menține vertical și orizontal pe pagină în orice moment - chiar și atunci când fereastra browserului este redimensionată. Foarte puțin este necesar în față. Trebuie doar să vă asigurați că ați descărcat biblioteca jQuery.
Primul pas atunci când creați un plugin este să adăugați un fișier gol Javascript. Convențiile de denumire menționează că fișierul trebuie să fie numit "YourPluginName.jQuery.js". După ce ați creat acest fișier, asigurați-vă că creați o referință la acesta în documentul dvs..
Apoi, lipiți codul următor.
Accentsconagua
(funcția ($) $ .fn.center = funcția () var element = aceasta; $ (element) ()); funcția changeCss () var imageHeight = $ (element) .height (); var imagineWidth = $ (element) .width (); fereastraHeight = $ (element) .css ("position": "absolut", "stânga": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / );;);;) (jQuery); Mă refer la detalii mai detaliate în film, totuși aș vrea să trec peste câteva puncte-cheie. Ori de câte ori creați un plugin, acesta trebuie să fie înfășurat cu:
$ .fn.center = funcția () ;
"Centrul" ar trebui înlocuit cu numele plugin-ului dvs. Aceasta permite jQuery să știe că extindeți metodele sale. Acum, deși nu face absolut nimic, putem numi metoda centrului nostru cu:
$ (funcția () $ ("# someElement"). Trebuie să înțelegeți cum să centrați manual o imagine pe o pagină înainte de a crea pluginul. În primul rând, elementul dvs. trebuie să fie poziționat absolut. În caz contrar, evident, nu vom scăpa atunci când modificăm valorile "stânga" și "de sus". Apoi, imaginea trebuie să fie deplasată cu 50% din lățimea browserului spre stânga. În cele din urmă, pentru a compensa lățimea imaginii, trebuie să scăpăm o jumătate din lățimea imaginii.
schimbarea funcțieiCss () var imageHeight = $ (element) .height (); var imagineWidth = $ (element) .width (); var fereastrăWidth = $ (fereastră) .width (); var fereastrăHeight = $ (fereastră) .height (); $ (element) .css ("poziție": "absolută", "stânga": windowWidth / 2 - imagineWidth / 2, "sus": windowHeight / 2 - imageHeight / 2); ; Acesta va plasa perfect centrul imaginii în centrul paginii. E greu de explicat cu textul. Asigurați-vă că vizionați videoclipul pentru o explicație mai bună.
Continuând, trebuie să creați un ascultător când fereastra browserului este redimensionată.
$ (fereastră) .bind ("redimensionare", funcție () changeCss ();); "ChangeCss ()" este o funcție care ajustează valorile stânga și de sus ale imaginii noastre. Redând-o din nou când fereastra este redimensionată, jQuery va recalla aceste valori.
Dacă aveți întrebări, nu ezitați să lăsați un comentariu și mă voi asigura că vă răspund. Ca întotdeauna, acest lucru nu ar putea fi "pregătit pentru lumea reală". Ce se întâmplă dacă utilizatorul are Javascript dezactivat? Și, bineînțeles, există câteva modalități de a face acest lucru folosind CSS pur - dar eu deviem.
Ar trebui să o facă! Ecranul va fi, de asemenea, căutat pe ITUNES în următoarele douăzeci și patru de ore.
