Creați pluginul jquery ui

În timpul lecției, va fi creat un plugin JQuery UI simplu, care adaugă numele imaginilor. Funcțiile pluginului sunt foarte simple și ne putem concentra asupra a ceea ce este necesar pentru a organiza plug-in-ul jQuery UI fără a pierde timpul de codare. Cunoașterea jQuery UI poate fi utilă, dar nu are un efect semnificativ asupra finalizării cu succes a lecției.

Este necesar să copiați jQuery, de asemenea, o pereche de fișiere din jQuery UI (versiunea jQuery UI 1.8 este necesară). Creați un director de lucru undeva pe computer și denumiți-l jqueryui-plugin. apoi creați css-uri în el. js și img (imaginile folosite în lecție pot fi găsite în arhiva sursă).

Descărcați biblioteca și dezarhivați-o. Avem nevoie doar de câteva fișiere din arhivă, și asta e jQuery-1.4.1.js. jquery.ui.core.js și jquery.ui.widget.js. Puneți aceste fișiere în folderul js din directorul dvs. de lucru. Veți avea nevoie și de o temă a versiunii curente stabile a jQuery UI (ui-lightness este folosit în lecție).

Vom face un widget de titlu, așa că vom avea nevoie de o pagină cu un set de imagini pentru a dezvolta și testa plug-in-ul. Codul paginii de test:

Totul este destul de simplu. Există doar trei imagini pe pagină. Acestea sunt urmate de patru fișiere cu scripturi. Trei se referă la fișierele sursă ale interfeței jQuery și jQuery, iar al patrulea la plugin-ul nostru. Fișierul jquery.ui.core.js este necesar pentru widgeturile / pluginurile jQuery UI. Fișierul jquery.ui.widget.js vă permite să creați module widget complete cu funcționalitate API comună. Majoritatea componentelor bibliotecii necesită utilizarea acestui fișier, îl vom folosi și pentru a crea pluginul nostru.

Creați fișierul plugin

Tot codul executat de pluginul nostru trebuie încapsulat într-o funcție anonimă. Obiectul jQuery este trecut la această funcție și este utilizat în interiorul acestuia prin intermediul aliasului $. Acest lucru asigură compatibilitatea cu metoda jQuery noConflict (). Aceasta este o cerință specifică și trebuie îndeplinită.

Apoi trebuie să definiți pluginul. Adăugați următorul cod la funcția noastră anonimă:

Modelul de utilizare a fabricii widget este foarte simplu. Apelăm metoda widget (). indicând numele primului argument ca fiind primul argument. Obiectul conține proprietăți și metode care efectuează funcțiile plug-in-ului. Această abordare ne permite să apelați plugin-ul (și de a crea), folosind sintaxa generală a jQuery $ ( „element_k_ kotoromu_primenyaetsya_plagin“). Captionator (), precum și alte metode de jQuery sau jQuery UI.

Fabrica de Widget are un set de metode și proprietăți. De exemplu, putem seta anumite opțiuni pentru plugin utilizând proprietatea de opțiuni. Sau adăugați o funcție de inițializare care va fi efectuată automat de fabrica de widget-uri de îndată ce este apelat instanța pluginului. În obiectul, care este al doilea argument din codul anterior, introduceți liniile:

Acestea sunt doar opțiunile care sunt utilizate în plugin-ul nostru. Utilizatorul plug-in-ului poate specifica poziția numelui (de sus sau de jos) în raport cu imaginea, culoarea textului și fundalul numelui. Pentru a modifica setările implicite, dezvoltatorul poate folosi următoarea intrare în codul său.

Apoi vom crea o funcție de inițializare:

Numele metodei trebuie să aibă o subliniere la început, deoarece jQuery UI împiedică să apeleze astfel de metode în afara pluginului, ceea ce poate cauza o oprire bruscă la apelarea codului HTML al paginii.

Partea principală a metodei noastre de inițializare este un set de variabile. În funcția noastră, acest lucru se referă la un obiect care este trecut la metoda instanței pluginului. Prima variabilă conține o referință la instanța curentă a pluginului. Metoda _create este apelată pentru fiecare element (unul sau mai multe) pentru care este apelată metoda pluginului.

Putem accesa opțiunile implicite pentru plug-in (care se schimbă automat dacă utilizatorul instalează unul dintre ele) utilizând proprietatea obiectului de opțiuni. Am stocat-o în a doua variabilă. Elementul pentru care a fost apelată metoda plugin (captionator ()) poate fi accesat utilizând proprietatea elementului. Am stocat-o în a treia variabilă.

Utilizăm a patra variabilă pentru a stoca o referință la un element nou, care este construit dintr-un simplu element . innerText. aparținând . utilizează alt atribut al imaginii curente și au fost adăugate mai multe clase. Folosim numele clasei ui-widget. astfel încât să poată utiliza stilurile implicite din tema jQuery UI curentă. De asemenea, îi dăm numele clasei utilizatorilor și este posibil să se facă setări ale propriului stil.

Apoi trebuie să setați câteva proprietăți. Utilizăm o foaie de stil separată, dar unele setări, cum ar fi culoarea și culoarea de fundal, sunt controlate prin opțiuni configurabile, așa că trebuie să le instalăm atunci când folosim plug-in-ul. Lățimea numelui trebuie să se potrivească cu lățimea imaginii care o suprascrie. Astfel, trebuie definit și utilizat în program. În concluzie, un nou este inserat în pagina din spatele imaginii țintă.

Odată ce imaginea este inserată, trebuie să redimensionați și să o poziționați. Puteți acționa cu ușurință această acțiune dacă imaginea există deja în DOM și se aplică reguli CSS, cum ar fi dimensiunea fontului. Deci, adăugăm numele în pagină și apoi definim dimensiunile care sunt salvate în variabilele capWidth și capHeight.

Odată ce numele este adăugat la pagină (și numai atunci), putem seta lățimea corectă, înălțimea și poziția pentru fiecare titlu, folosind din nou metoda css (). Numele este de fapt complet separat de imagine. Acesta este introdus imediat după fiecare imagine și apoi poziționat.

Totul este bine, până când browserul redimensionează fereastra. Imaginile se vor mișca, dar nu există nume, deoarece sunt absolut poziționate. Pentru a rezolva situația, folosim un manipulator de evenimente de schimbare a dimensiunii legat de o fereastră care schimbă pur și simplu poziția fiecărui titlu în funcție de poziția imaginii acestuia. Acest handler de evenimente este ultimul element al metodei noastre de inițializare.

O altă metodă a pluginului nostru este metoda de distrugere (). care este comun tuturor pluginurilor jQuery UI. Trebuie să implementăm această metodă de curățare după utilizarea pluginului nostru. În exemplul nostru, metoda poate fi foarte simplă:

Tot ce aveți nevoie este să ștergeți numele și să dezabonați procedura de tratare a evenimentului pentru evenimentul de redimensionare a ferestrei. Această metodă poate fi apelată de dezvoltator atunci când se utilizează pluginul, astfel încât numele metodei nu are o subliniere precedentă. Pentru a apela această metodă, dezvoltatorul folosește intrarea $ ("element_to_which_applied_plug"). Captionator ("distruge").

Trebuie să furnizăm o altă metodă care este controlată / executată de fabrică widget. Plugin-ul poate fi setat în timpul apelului său la $ ("element_to_which_applied_to_plugin"). Captionator ("opțiune", "locație", "sus"). Și pentru a aplica opțiunile, trebuie să scrieți metoda _setOption.

Numele acestei metode este subliniat, deoarece dezvoltatorul folosește opțiunea. mai degrabă decât _setOption pentru o schimbare valabilă a opțiunilor. Nu trebuie să vă faceți griji cu privire la modul în care funcționează acest lucru, ci doar furnizăm această metodă cu ceea ce este necesar pentru plug-in-ul nostru. Deci, această metodă există deja în fabrică widget, atunci trebuie să apelați metoda originală, care este executată înainte de codul nostru, utilizând prototipul obiect Widget. specificând numele metodei (în cazul nostru, aceasta este _setOption, dar puteți utiliza și orice altă metodă încorporată) și specificați să aplicați pentru a o apela. Apoi puteți executa codul pluginului nostru.

Funcția primește automat două argumente, care sunt o opțiune variabilă și o nouă valoare. Stocăm elemente comune, cum ar fi imaginea și numele, înălțimea curentă a fiecărui titlu. Apoi, pentru a selecta fiecare dintre cele trei opțiuni pentru modificare, se utilizează o expresie simplă a casetei.

Adăugarea de evenimente

Este foarte important să adăugați evenimente pe care dezvoltatorul care le utilizează plug-in-ul se poate procesa în momentul în care utilizatorul final lucrează la plugin în vreun fel. Fabrica de widget-uri procesează majoritatea acestor sarcini pentru noi. Tot ce aveți nevoie este să începeți evenimentul. Pluginul nostru are câteva funcții, dar putem rula evenimentul de fiecare dată când numele este adăugat la pagină. Adăugați următorul cod imediat înainte de manipularea evenimentului pentru evenimentul de modificare a dimensiunii:

Modelarea pluginului

Plugin-ul nostru are nevoie de o foaie mică de stil. În mod literal, trebuie să stabilim trei stiluri. Vom crea un nou fișier numit ui.captionator.css. salvați-l în folderul css. Acesta conține următorul cod:

Acum numele noastre ar trebui să arate astfel:

concluzie

Cum ar fi metoda de creare a plug-in-urilor jQuery fn.extend (). jQuery UI are, de asemenea, propriul său mecanism, care permite dezvoltatorului să creeze rapid și ușor plug-inuri scalabile și productive care să respecte standardele ridicate ale proiectelor UI jQuery. Fabrica Widget preia o cantitate mare de lucrări complexe pentru a crea pluginul.

Ultimele 5 lecții din rubrica "jQuery"

Astăzi dorim să vă spunem despre biblioteca TypeIt - un plugin jQuery gratuit. Cu aceasta, puteți simula tastarea. Dacă totul este ajustat corect, puteți obține un efect foarte realist.

jQuery plugin pentru crearea unei cronologii.

jQuery plugin pentru crearea unei diagrame Gantt.

Un exemplu de încărcare a unui fișier prin PHP și jQuery ajax.

\ funktsiyu. \ aga) Și prin lecție, dezabonați când termin lectura

De ce să facem o astfel de grădină de legume (care altfel ar arăta diferită în diferite browsere) dacă toate acestea pot fi realizate de o pereche de DIV + câteva linii de css (crossbrowser)

Aceasta este doar o demonstrație de scriere a plugin-ului! Oamenii care învață cum să scrie plugin-uri, nu-i pasă cât de multe linii le poți scrie pentru a le înțelege

Structura prea complicată pentru cele două blocuri, dar modul în care practica este excelentă. Dacă aplicați corect toate lecțiile descrise mai devreme, puteți construi un plug-in nehil pentru scopurile dvs. Așa că am scris un plugin pentru prezentarea mea în studio. Acum, toți clienții mei țipă cu plăcere.

Paul, există mai multe fusuri orare în lume =)

Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!

Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați 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!

Articole similare

Pagina anterioară

Pagina următoare