Share
jQuery conține fn.extend () , ceea ce face ca pluginurile jQuery de creare să fie destul de ușoare, permițându-ne să scriem cod care este folosit exact în același mod ca și alte metode jQuery. jQuery UI conține, de asemenea, structuri care facilitează crearea de pluginuri custom jQuery UI. Așa că vom urmări cursul acestui tutorial. Metodele folosite diferă de cele ale pluginurilor jQuery standard și există convenții mai stricte care trebuie urmate, motiv pentru care simt că subiectul merită un articol.
În cursul acestui tutorial, vă voi arăta convențiile de codificare și regulile generale care ar trebui respectate atunci când creați plugin-uri pentru jQuery UI. Vom crea un plugin simplu care adaugă doar subtitrări la imaginile de pe pagină. Este intenționat simplu, astfel încât să ne putem concentra asupra a ceea ce este necesar pentru a face un plugin jQuery UI fără a se pierde în cod. Oricine a scris un plugin jQuery nu ar trebui să aibă probleme. Cunoașterea interfeței jQuery poate ajuta, dar nu ar trebui să fie esențială pentru a finaliza acest tutorial. Să începem.
Avem nevoie de o copie a jQuery, precum și de câteva fișiere de la jQuery UI, dar trebuie să fie jQuery UI 1.8 (acest lucru poate fi găsit pe blog). Creați un director de lucru undeva pe aparatul dvs. numit jqueryui-plugin, apoi în interiorul asta creați a css dosar, a js dosar și an img (imaginile utilizate în acest tutorial pot fi găsite în descărcarea codului).
Descărcați biblioteca și despachetați-o undeva accesibilă. Avem nevoie doar de câteva fișiere din arhivă, și anume fișierul sursă jQuery care se află în rădăcina arhivei ca jQuery-1.4.1.js, si jquery.ui.core.js și jquery.ui.widget.js fișiere, care sunt în ambele ui pliant. Luați-le și puneți-le în js din directorul de lucru. Vom folosi de asemenea cadrul CSS ușor, așa că vom avea nevoie de una dintre foile de stil tematice disponibile cu versiunea curentă stabilă a jQuery UI (am folosit UI-luminozitate în acest exemplu).
Vom face un widget de captionator, așa că vom avea de asemenea nevoie de o pagină, cu o grămadă de imagini pe ea, pentru a dezvolta / testa pluginul. Acest exemplu folosește următoarea pagină:
jQuery UI Captionator 
Vom păstra lucrurile destul de simple pentru acum; avem doar trei imagini pe pagină, urmate de patru fișiere script; trei link-uri către fișierele sursă jQuery și jQuery UI, al patrulea fișier sursă al plugin-ului nostru pe care îl vom crea în scurt timp. jquery.ui.core.js fișierul este solicitat de toate widgeturile / pluginurile jQuery UI. jquery.ui.widget.js fișierul este fabrica de widget și permite crearea de widget-uri coerente care au în comun funcționalitatea API. Cele mai multe componente ale bibliotecii necesită acest lucru și o vom folosi pentru a crea pluginul nostru.
Creați un nou fișier JavaScript și salvați-l ca jquery.ui.captionator.js în js pliant; ar trebui să păstrăm convenția de numire a jQuery UI, care tocmai a fost actualizată în versiunea 1.8 a bibliotecii, și să folosească jquery.ui.plugin_name.js. Adăugați următorul cod în noul fișier:
(funcția ($) ) (jQuery);
Toate codurile care alcătuiesc plugin-ul nostru trebuie încapsulate într-o funcție anonimă care se execută automat. Obiectul jQuery este trecut în această funcție și este utilizat în interiorul funcției prin $ alias; acest lucru este să vă asigurați că pluginul este compatibil cu jQuery noConflict () metodă. Aceasta este o cerință specificată și trebuie respectată întotdeauna.
Apoi trebuie să definim pluginul; adăugați următorul cod funcției noastre anonime:
Accentsconagua
$ .widget ("ui.captionator", ); Modelul pentru utilizarea fabrica de widgeturi este simplu de utilizat, suntem doar apelați widget () care specifică numele pluginului ca primul argument și un literal obiect care conține proprietățile și metodele care fac funcția pluginului. Acest lucru permite ca plugin-ul nostru să fie apelat (și creat) utilizând sintaxa commen jQuery $ ( "Element_caption_applied_to") captionator ().; ca orice altă metodă UI jQuery sau jQuery.
Fabrica de widget oferă pentru noi o serie de proprietăți și metode; de exemplu, putem seta opțiunile implicite pentru plugin folosind Opțiuni și adăugați o funcție de inițializare care este executată automat de fabrica de widget-uri de îndată ce o instanță a plugin-ului este invocată. În obiectul care apare ca al doilea argument din codul anterior, adăugați următorul cod:
opțiuni: location: "bottom", culoare: "#fff", fundalColor: "# 000",
Acestea sunt singurele opțiuni pe care le vom folosi în plugin-ul nostru de exemplu; utilizatorii (și, de utilizatori, mă refer la implementatori, nu la utilizatorii finali) ai pluginului pot specifica poziția legendei pentru a fi fie în partea de sus a imaginii pe care este apelată, fie în partea de jos, pot specifica culoarea textului în legenda, sau modificați culoarea de fundal a legendei. Pentru a modifica o opțiune configurabilă a oricărui widget jQuery UI înainte de inițializare, dezvoltatorul de implementare ar folosi doar ceva de genul:
$ ("element_caption_applied_to"). captionator (location: "top");
În continuare putem crea funcția de inițializare, după ce obiectul opțiuni adaugă următoarea metodă:
_create: funcția () var self = aceasta, o = auto.opțiuni, el = auto.element, cap = $ ("" .text (el.attr (" alt ")) addClass (" ui-widget ui-caption "). ) .insertAfter (el), capWidth = el.width () - parseInt (cap.css ("paddingLeft")) - parseInt (cap.css ("paddingRight")), capHeight = cap.outerHeight .css ("paddingTop")) + parseInt (cap.css ("paddingBottom")); cap.css (width: capWidth, top: (o.location === "top")? top: el.offset () top + el.height () - capHeight, stânga: el.offset () stânga, afișare: "block"); (top: el.offset ()) top + el.height () - capHeight, stânga: el.offset () stânga ););, Numele metodei ar trebui să înceapă cu un underscore deoarece jQuery UI previne ca orice metoda de plugin care începe cu un underscore să fie apelată din afara pluginului, astfel încât aceasta să nu mai fie apelată accidental din pagina HTML. Orice metodă pe care o începem cu o subliniere va fi protejată în acest fel.
Majoritatea metodei noastre de inițializare este o serie de variabile; în cadrul funcției noastre, cuvântul cheie se referă la un obiect transmis în metoda care reprezintă instanța pluginului. Prima variabilă stochează o referință la instanța curentă a pluginului; _crea se solicită metoda pentru fiecare element pe care se solicită metoda plugin-ului, care ar putea fi un singur element sau mai multe.
Putem accesa opțiunile implicite ale pluginului (care sunt suprascrise automat dacă implementatorul configurează oricare dintre acestea) utilizând Opțiuni proprietatea obiectului; am cache-ul acesta în a doua variabilă. Elementul pe care metoda de plugin (captionator ()) a fost apelat, care în acest exemplu ar fi o imagine, poate fi accesat folosind element proprietatea obiectului. Stocăm acest lucru în a treia variabilă.
Utilizăm a patra variabilă pentru a stoca o referință la noul element de subtitrare, care este construit dintr-un simplu element ; își are innerText setați la Alt atributul imaginii curente și se adaugă mai multe nume de clase; noi îi oferim widget-ui pentru a putea alege un stil implicit din tema actuală a jQuery UI. De asemenea, oferim un nume de clasă personalizat, astfel încât să putem adăuga o parte din stilul nostru propriu.
Apoi trebuie să setăm câteva proprietăți CSS; vom folosi o foaie de stil separată pentru unele stiluri, dar anumite lucruri, cum ar fi culoare și culoare de fundal stilurile sunt controlabile prin opțiuni configurabile, prin urmare trebuie să le setăm utilizând pluginul. Lățimea legendei trebuie să se potrivească cu lățimea imaginii pe care o suprapune, deci trebuie să determinăm și să o setăm programat. În cele din urmă, noul este injectat direct în pagină după imaginea țintă.
Odată ce titlul a fost introdus, acesta trebuie să fie dimensionat și poziționat; singura modalitate în care poate fi dimensionată cu exactitate este dacă există deja în DOM și are reguli CSS aplicate la acesta, cum ar fi dimensiunea fontului. De aceea, adăugăm legătura la pagină și apoi determinăm dimensiunile exacte, care sunt apoi stocate în variabile capWidth și capHeight.
Odată ce legătura a fost adăugată la pagină (și numai atunci), putem seta lățimea corectă, înălțimea și poziția fiecărei legende, pe care am stabilit-o folosind css () din nou. Titlurile sunt de fapt complet separate de imagini; acestea sunt inserate direct după fiecare imagine și apoi poziționate să apară pentru a suprapune imaginile, la urma urmei, nu putem adăuga ca un copil al .
Acest lucru este bine, până când browser-ul este redimensionat, moment în care imaginile se mișcă, dar subtitrările nu pentru că sunt absolut poziționate. Pentru a remedia acest lucru, am folosit un manual de redimensionare de bază atașat la fereastră, care repoziționează pur și simplu fiecare capțiune în noua poziție a imaginii sale. Acest manipulator de evenimente este ultimul lucru din metoda noastră de inițializare.
O altă metodă pe care plugin-ul nostru ar trebui să o expună este distruge() care este comună tuturor pluginurilor jQuery UI. Trebuie să furnizăm o implementare a acestei metode pentru a curăța după plugin-ul nostru. Pentru plugin-ul nostru exemplu, metoda poate fi la fel de simplă:
distruge: function () this.element.next () remove (); $ (Fereastră) .unbind ( "redimensionare"); ,
Tot ce trebuie să faceți este să eliminați legendele și să dezactivați dispozitivul nostru de redimensionare a ferestrelor. Această metodă poate fi apelată de un implementator care utilizează plugin-ul, astfel încât nu ar trebui să începem acest nume cu un subliniere. Pentru a apela această metodă, implementatorul ar folosi $ ( "Element_caption_attached_to") captionator ( "distruge").; care este modul în care va fi numit oricare dintre metodele noastre publice.
Trebuie să furnizăm o altă metodă controlată / executată de fabrică widget; am văzut mai devreme cum un dezvoltator ar putea schimba o opțiune configurabilă înainte de inițializare, dar ce se întâmplă după inițializare? Acest lucru se face folosind opțiune folosind următoarea sintaxă: $ ("element_caption_attached_to") captionator ("opțiune", "locație", "sus"); așa că trebuie să adăugăm metoda încorporată _setOption pentru a rezolva acest lucru:
_setOption: funcție (opțiune, valoare) $ .Widget.prototype._setOption.apply (acest lucru, argumente); var el = acest element, cap = el.next (), capHeight = cap.outerHeight () - parseInt (cap.css ("paddingTop")) + parseInt (cap.css ("paddingBottom")); comutator (opțiune) caz "locație": (valoare === "sus")? cap.css ("top", el.offset () sus): cap.css ("top", el.offset () top + el.height () - capHeight); pauză; cazul "culoare": el.next () .css ("culoare", valoare); pauză; cazul "backgroundColor": el.next () css ("backgroundColor", valoare); pauză; Începem această metodă cu o subliniere deoarece utilizatorul implementează opțiune, nu _setOption pentru a schimba efectiv opțiunile; nu avem nevoie să ne facem griji cu privire la modul în care este tratată această problemă, ci trebuie să furnizăm această metodă pentru a rezolva ceva specific pluginului nostru. Deoarece această metodă există deja în fabrica de widget-uri, ar trebui să sunăm metoda originală, pe care o facem în primul rând în metoda noastră folosind prototipul Widget obiect, specificând numele metodei (_setOption în acest caz, dar am putea să o facem și pentru alte metode încorporate) și utilizarea aplica să-l suni. Apoi putem continua cu codul specific pluginului nostru.
Funcția va primi automat două argumente care sunt opțiunea de schimbare și noua valoare. Am cache unele elemente utilizate în mod obișnuit, cum ar fi imaginea și captura, și să obțină înălțimea curentă a fiecărei legende. Apoi folosim o simplă declarație de comutare pentru a gestiona fiecare din cele trei opțiuni care se schimbă. Repoziționarea legendelor este cea mai complexă, dar este încă destul de banală și similară cu modul în care am plasat-o inițial.
Este important să adăugați evenimente pe care dezvoltatorii care utilizează pluginul dvs. pot adăuga callback-uri, astfel încât să poată reacționa la diferite lucruri care apar atunci când utilizatorii interacționează cu widget-ul într-un fel. Fabrica de widget-uri gestionează cea mai mare parte a acestei sarcini pentru noi, tot ceea ce trebuie să facem este să declanșăm evenimentul. Acest plugin nu prea face mult, dar putem declanșa un eveniment după ce fiecare titlu este adăugat la pagină; pentru a face acest lucru adăugați următorul cod direct înaintea manipulatorului evenimentului de redimensionare:
self._trigger ("adăugat", null, cap); Asta e tot ce trebuie să facem! O singură linie de cod și avem un eveniment personalizat care poate fi reacționat. Noi numim _trigger () metoda instanței pluginului (pe care am stocat-o în variabilă de sine) și să treacă metoda trei argumente; primul este numele evenimentului, al doilea este pentru obiectul evenimentului (nu avem nevoie să îl folosim în plugin-ul nostru de exemplu, de aici nul valoare), iar a treia este o referință la elementul de legendă. Fabrica de widget va transmite automat obiectul evenimentului (dacă este furnizat) și datele pe care le transmite în al treilea parametru unei funcții de apel invers care utilizează evenimentul adăugat. Un dezvoltator ar putea accesa acest eveniment folosind următoarea sintaxă: $ ("element_caption_attached_to") captionator (adăugat: funcția (e, ui) // do stuff);
Avem nevoie doar de o foaie de stil foarte mică pentru plugin-ul nostru, literalmente avem doar trei stiluri. Aproape nici nu merită să creați un fișier separat pentru stiluri! Dar vom crea un nou fișier numit ui.captionator.css, care este formatul necesar pentru foile de stil de plugin și salvați-l în css director. Adăugați următoarele stiluri:
.ui-caption afișare: nici unul; Poziția: absolută; padding: 10px;
Cam despre asta e. Pluginul nostru este acum complet funcțional și vizual. Titlurile ar trebui să apară astfel:
Ca metoda de creare a plugin-ului de la jQuery fn.extend (), jQuery UI are, de asemenea, un mecanism propriu care permite dezvoltatorilor să scrie rapid și ușor pluginuri robuste și scalabile care îndeplinesc proiectele jQuery UI standarde ridicate, deși în ceea ce privește ceea ce face de fapt pentru noi, este chiar mai bine ca jQuery. Fabrica de widgeturi a fost creată în așa fel încât aproape toată munca grea să fie scoasă din crearea de plugin-uri personalizate.
Este ușor să lucrați cu metodele furnizate de fabrica de widget-uri pentru a adăuga metode la pluginurile noastre comune în widget-urile UI, cum ar fi distruge și opțiune metode, pe care dezvoltatorii de implementare s-ar aștepta să le găsească în orice plugin. De asemenea, am văzut cât de ușor este să declanșați evenimente personalizate pe care dezvoltatorii le pot utiliza pentru a reacționa la interacțiuni sau apariții cu widgetul.
