Introduceți rezultatul operației (în cifre):
30 - 5 =? actualizare
Dislikes 12
Nu există traduceri disponibile.
În acest articol vă voi arăta cum să scrieți un plugin simplu pe jQuery care va construi un meniu dinamic frumos din marcajul HTML obișnuit. Primul lucru pe care îl vom începe este să determinăm exact ce va face plug-in-ul și care este scopul nostru. Deci:
Acum, determinăm ce fișiere trebuie create pentru a testa activitatea exemplului în cauză. Aici sunt:
1. dynamenu.html - un fișier cu marcaj HTML al meniului nostru. Va exista, de asemenea, un script încorporat pentru apelarea pluginului nostru
2. jquery.dynamenu.js - codul plugin-ului, plasat într-un fișier separat.
3. dynamenu.css - stilul meniului nostru. Aici am pus toate CSS
Începeți să scrieți pluginul. Să mergem!
1. Pregătiți marcajul HTML al paginii
Să stabilim cel mai simplu aspect pentru meniul nostru. Permiteți-i să fie câteva elemente de meniu pentru site-ul nostru viitor:
2. Definirea stilurilor CSS
Pentru a ne stiliza meniul, folosim doar două stiluri CSS. Cu ajutorul lor, vom face fundalul fiecărui element de meniu de meniu gri lățime de 300 de pixeli, cu margini interne și externe de 5 pixeli, și toate link-urile din meniu - negru:
3. Noi scriem "scheletul" pluginului
Mai întâi de toate, să punem scheletul plug-in-ului nostru. Acest cadru este parțial preluat din site-ul oficial jQuery și conține așa-numitele „Cele mai bune practici“ (cele mai bune practici și tehnici - de la dezvoltarea limbajului jQuery). În general, acest cadru este valabil pentru aproape toate pluginurile jQuery. Dacă vă aduceți aminte și înțelegeți cum funcționează acest cadru, atunci veți scrie plugin-uri pentru "one-two". Se pare ca aceasta:
Nimic nu este complicat în cadru, după cum puteți vedea, nu. Dar ea are în ea însăși informații utile. Primul punct important de înțeles în cadrul este că colectăm toate metodele adăugate pluginului nostru (init, alunecare) într-un singur obiect - metode. Aceasta vă permite să nu ciocniți spațiul de nume $ .fn cu funcții inutile. Indicația corectă a spațiului de nume al plug-in-ului nostru este o parte foarte importantă a procesului de dezvoltare a plug-in-urilor ca atare. Folosind un spațiu de nume, plugin-ul nostru va fi suprascris cu o probabilitate minimă de alte pluginuri sau coduri aflate pe aceeași pagină HTML. Spațiul de nume face, de asemenea, viața mai ușoară, deoarece ajută la o mai bună monitorizare a metodelor, a evenimentelor și a datelor.
Utilizați întotdeauna metode de ascundere în interiorul plugin-ului, de exemplu în obiectul metode. Pe lângă faptul că este un stil de programare bun, această tehnică vă ajută să evitați conflictele cu alte biblioteci și plug-in-uri terțe și, de asemenea, vă permite să evitați obturarea spațiului de nume jQuery
Următorul punct de a acorda atenție este proiectantul plug-in-ului nostru. Acesta este șirul $ .fn.dynamenu = funcție (metoda). După cum puteți vedea, constructorul ia un parametru - metodă. Ca valoare pentru parametru, vom trece un șir care conține numele metodei din interiorul obiectului metode pe care o vom apela. Să umplem constructorul cu următorul cod:
Să analizăm ce am făcut. În primul rând, verificăm dacă există o metodă cu numele trecut în parametrul constructor în obiectul de metode al plugin-ului nostru. În cazul în care metoda este, pe care o numim prima metoda init - pentru a inițializa noastre plug-in, iar apoi apelați numele metodei este trecut la parametrul de construcție, și trece-l restul argumentelor. Dacă nu există nici o metodă cu un astfel de nume, atunci vom da o eroare și plug-in-ul nu va mai funcționa.
În acest stadiu, multe au fost făcute! Deja acum putem accesa plugin-ul nostru și numim metodele sale, deși nu fac încă nici o muncă utilă. Vă recomandăm să introduceți codul plugin-ului nostru într-un fișier separat și să îl numiți jquery.dynamenu.js. Plasarea codului plugin-ului într-un fișier separat este logică - după ce tot plugin-ul ar trebui să fie inerent universal și să ne dea și altor dezvoltatori să îl conecteze în formă gata la site-ul dvs.
Acum, că rama este umplut cu cod care poate provoca metode de plugin interne, este timpul pentru a construi „carne“, care este de a scrie cod care va converti direct noastre div-blocuri într-un frumos meniuri dinamice. Să începem.
4. Noi scriem cod care creează un meniu dinamic pe jQuery
Toate codurile utile ale pluginului nostru vor fi plasate în funcția de alunecare, care este o metodă internă de plugin și este localizată în obiectul metode. Să descriem pe scurt secvența de acțiuni pentru conversia marcajului static cu div-blocurile noastre într-un meniu dinamic din jQuery:
- În primul rând, schimbăm transparența tuturor blocurilor div, stabilindu-le la 0,4 puncte. Acest lucru va face fiecare element de meniu gri. Apoi, atunci când mouse-ul peste el, vom schimba opacitatea la 1, creând astfel efectul de selectare a elementului de meniu
- Apoi, creăm manipulatorii de intrare cu mouse-ul spre zona de meniu și ieșim din ea. Când treceți peste elementul de meniu, schimbați stilul fontului în caractere aldine și schimbați culoarea de fundal într-una mai închisă. De asemenea, utilizând metoda animată standard jQuery, facem efectul de a "trage" meniul puțin în dreapta. Când mouse-ul părăsește zona de meniu, vom readuce pur și simplu toți parametrii la starea inițială.
Asta, de fapt, și toată logica. Acum, să vedem cum să implementăm acest lucru:
Doar în caz, voi explica ce se întâmplă. Deci, în primul rând, vom vedea returul this.each (function ()) declarație. Ea face următoarele: rulează prin setul de elemente transmise funcției (adică toate div-blocurile) și execută codul situat în interior. După o astfel de rulare prin elemente, vom întoarce (operatorul de retur) rezultatul operațiunilor pentru fiecare element al setului, din nou, sub forma unui set. Astfel, funcția de alunecare returnează un set de blocuri div divizate către "intrarea" funcției, procesată și deja transformată într-un meniu dinamic. Aceasta implementează conceptul important al jQuery - abilitatea de a folosi plug-in-ul nostru în lanțul de apeluri. Pentru a înțelege mai bine ce este un lanț de apeluri, iată un exemplu:
În fragmentul de cod de mai sus, vom vedea că acest lanț de provocări: în primul rând, vom selecta toate elementele de pe pagina de clasă myelm, apoi utilizați dynamenu nostru plug-in și apoi înapoi de-a lungul lanțului a fost utilizat pentru metoda standard jQuery css () pentru a schimba elementele de stil. Dacă nu am fi întors de la metoda de construcție a reveni this.each (funcția ()). apoi utilizați css metoda (), în „lanțul“ nu ar fi putut.
Folosiți returul instrucțiunii this.each () pentru a susține principiul "lanțului" în pluginurile dvs. și pentru a le face mai universale.
Mergând mai departe, operatorul în interiorul fiecărui (), în cazul în care vom rula prin toate noastre div-blocuri este doar proprietățile inițiale de setare ale „transparență“ (opacitate) punctul 0.4. puncte. Valoarea maximă a opacității - este de 1 (100%), deci vom face „transparența“ de 40%. După aceea, am pus două procesoare la „orientare“ (Hover) mouse-ul și „retragere“ din câmpul mouse-ul div-bloc. În primul handler am stabilit numele elementului de meniu cu caractere aldine și de a folosi metoda animate () pentru a realiza „opacitate completă“ element de meniu și pentru a face trecerea la dreapta de 5 pixeli. În handler, „grijă“ mouse-ul ne întoarcem doar elementul la starea inițială - schimba fontul înapoi la normal (normal) și de a face trecerea la stânga din nou la 5 pixeli.
Asta este! Pluginul nostru este gata pentru utilizare. Deși este simplu, dar poate fi util să creați un meniu dinamic pe site. Mai jos în text - o demonstrație a lucrării plug-in-ului nostru. Pentru a vedea rezultatul plug-in-ului, accesați fila Rezultat.
Articole similare
Trimiteți-le prietenilor: