Share
E greu. Citești tutorial după tutorial, dar toți presupun că știi mai mult decât faci de fapt. Până când ați terminat, ați rămas mai confuz decât ați fost inițial. De ce a creat un obiect gol? Ce înseamnă atunci când treci "opțiunile" ca parametru? Ce fac de fapt "setările implicite"?
Nu vă temeți; Vă voi arăta exact cum să creați propriul plugin "tooltip", la cererea unuia dintre cititorii noștri loiali.
S-ar putea ajuta să vă gândiți la plugin-uri în același mod ca și dvs. V-ați găsit vreodată să repetați aceleași proceduri
pentru site după site? Poate că v-ați creat propriul sistem de tabele pe care doriți să îl utilizați. Mai degrabă decât să scrie același timp de cod și
din nou, nu ar fi mai ușor dacă am putea transforma blocul de coduri lungi într-o singură linie? Aceasta este în esență ceea ce face un plugin pentru noi.
Aceasta permite reutilizarea, ceea ce este esențial - dacă doriți să vă mențineți salariul pe oră ridicat!
Creați un nou proiect în editorul dvs. de cod preferat și lipiți-l în html-ul următor.
Încă nu puteți crea un plugin jQuery? Punctul de utilizare a Lorem Ipsum este acela că are o distribuție mai mult sau mai puțin normală a literelor, spre deosebire de utilizarea "Conținut aici, conținut aici", ceea ce face ca acesta să pară ca engleza lizibilă. Multe pachete de publicații desktop și editori de pagini web utilizează acum Lorem Ipsum ca text de model implicit, iar o căutare pentru "lorem ipsum" va descoperi multe site-uri Web încă în fază incipientă. Versiuni variate au evoluat de-a lungul anilor, uneori accidental, uneori în scopuri (umor injectat și altele asemănătoare).
Acest cod este destul de simplu; astfel încât nu este nevoie de o imagine de ansamblu.
De obicei, găsesc că este mai ușor să-mi construiesc plugin-ul dacă aș decide mai întâi cum o voi numi. Luați în considerare următorul cod.
Am decis că vreau ca numele pluginului meu să fie pur și simplu denumit "tooltip". De asemenea, am hotărât că vreau să pot trece în câteva
pentru a personaliza ușor butonul meu. Acest lucru va fi doar opțional pentru utilizator, totuși. Dacă era preferat, el sau ea putea doar să scrie:
În acest caz, Mod implicit opțiunile vor fi utilizate.
Deci, acum că știm cum va fi apelat plugin-ul, să mergem mai departe și să îl construim! Creați un fișier nou în proiectul dvs. și denumiți-l "jQuery.tooltip.js". Există anumite convenții de numire când se creează un plugin care va putea fi folosit de alții. Începem prin scrierea "jQuery", urmată de numele pluginului nostru. Cu toate acestea, sunt sigur că vă dați seama că mii de oameni și-au creat propriul plug-in de instrumente. S-ar putea să determinați că este necesar să prefaceți "tooltip" cu un șir unic; poate inițialele tale. În orice caz, nu contează prea mult. Sunteți liber să numiți plugin-ul dorit.
(funcția ($) ... code) (jQuery);
Trebuie să ne asigurăm mai întâi că simbolul "$" nu ne face probleme. Ce se întâmplă dacă folosim și alte biblioteci Javascript în aplicația noastră? Te-ai gândit vreodată la asta? În astfel de cazuri, ar trebui să schimbăm fiecare "$" din documentul nostru în "jQuery". Singura problemă este că aceasta este o soluție destul de neglijabilă. În schimb, să creăm o funcție anonimă care invocă automat și să treacă "$" ca un pseudonim. În acest fel, suntem liberi să folosim "$" cât ne place, fără a ne mai face griji în privința oricăror conflicte.
$ .fn.tooltip = funcție (opțiuni)
În cadrul wrap-ului nostru, trebuie să declare noul nostru plugin și să îl facem egal cu următoarea funcție. Putem realiza această sarcină tastând jQuery.fn (scurt pentru prototip).numele pluginului nostru.
Amintiți-vă când am specificat că utilizatorul ar trebui să poată efectua modificări minore la tooltip? Aceste modificări vor fi stocate în parametrul "opțiuni".
var defaults = fundal: '# e3e3e3', culoare: 'negru', rotunjit: false,
Este posibil ca utilizatorul să nu specifice vreo opțiune. Deci, vom seta opțiunile noastre "implicite". Pentru că acesta este un tutorial pentru începători, nu vom face prea multe aici. În cea mai mare parte, acest lucru demonstrează ce este posibil. Permitem utilizatorului să aleagă o culoare de fundal, o culoare și dacă sfatul de instrument este rotunjit sau nu.
Mai târziu, în codul nostru, când dorim să accesăm aceste valori, putem pur și simplu tasta: defaults.rounded.
Deci, cum putem determina dacă utilizatorul își adaugă propriile opțiuni? Răspunsul este că trebuie să fuzăm "defaults" cu "opțiuni".
setări = $ .extend (, implicite, opțiuni);
Am creat o nouă variabilă numită "setări" și i-am spus lui jQuery să fuzioneze "implicite" și "opțiuni" și să plaseze rezultatele într-un obiect nou. La fuziune, opțiunile selectate de utilizator vor avea prioritate față de valorile implicite.
S-ar putea să te întrebi de ce nu am adăugat "var" înainte de setări. Din punct de vedere tehnic, nu este necesar, deși este considerată cea mai bună practică. Dacă veți parcurge un pic, veți vedea că după obiectul implicit, am adăugat o virgulă. Atunci când facem acest lucru, putem continua să creăm mai multe variabile fără a fi nevoie de "var" de fiecare dată. De exemplu…
var joe = ; var este = ; var bun = ;
poate deveni…
var joe = , este = , bun = ;
this.each (funcție () var $ this = $ (this); var titlu = acest titlu;
Este important să rețineți că setul înfășurat pe care utilizatorul îl trece în acest plugin poate conține mai multe elemente - nu doar unul. Ar trebui să ne asigurăm că vom folosi pentru fiecare declarație - sau metoda "fiecare" a jQuery - pentru a parcurge codul.
Începem noua noastră funcție prin cache-ul $ (acest lucru). Nu numai că ne va salva câteva personaje, dar și va grăbi lucrurile, oricât de ușor. Nu este necesar, dar este considerat o bună practică. Mulți oameni întreabă: "De ce adăugați semnul în fața variabilei dvs.?". Facem acest lucru pentru a ne reaminti că lucrăm cu obiectul jQuery. Prin aceasta, îmi amintesc că pot apela lucruri precum: $ this.click () ;. Apoi, stocam valoarea atributului titlu într-o variabilă numită "titlu". Veți vedea de ce trebuie să facem acest lucru într-un moment.
Accentsconagua
dacă ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ This.hover (funcția (e) Este ușor să uitați la ce se referă acest lucru. Când uitați, reveniți la modul pe care îl numiți metoda "instrumentului".
$ ( 'A.tooltip') tooltip ().;
Putem vedea aici că $ se referă la fiecare etichetă ancoră care are o clasă de "tooltip".
Înapoi la cod; dacă elementul din setul înfășurat este, de fapt, o etichetă de ancorare, iar atributul său "titlu" nu este gol, apoi executați un anumit cod. Aceasta este mai degrabă explicativă. Nu vreau să rulez o grămadă de cod dacă utilizatorul trece în mod accidental o imagine. În plus, nu vreau să creez caseta de instrumente dacă nu este nimic de arătat!
În cadrul declarației "if", am setat atributul "title" al etichetei de ancorare egal cu nimic. Acest lucru va împiedica încărcarea degetului implicit al browserului. Apoi, adaug un ascultator de evenimente atunci cand $ this, sau tag-ul anchor, este plutind. Când este, noi creăm o nouă funcție și trecem obiectul evenimentului ca parametru. Nu vă faceți griji în acest moment, vă voi explica mai târziu.
var titlul = $ this.attr ('title'); $ (“'.appendTo (' body ') .hide () .text (titlu) .css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, left: e.pageX + ) .fadeIn (350); Am creat o variabilă numită "title" și am făcut-o egală cu orice valoare este conținută în atributul tag-ului "anchor". Acest lucru nu este necesar într-adevăr - dar mă ajută.
Când adăugăm etichete html în instrucțiunea noastră jQuery, putem crea un element nou, mai degrabă decât să îl recuperăm. Creați o nouă etichetă div cu un id de "instrumenttip". Apoi, vom folosi abilitățile minunate ale jQuery de a-și îndeplini cu ușurință o mulțime de proceduri.
dacă (defaults.rounded) $ ('# tooltip') addClass ("rotunjit"); În mod prestabilit, opțiunea noastră "rotunjită" este setată la "false". Cu toate acestea, dacă "defaults.rounded" revine la adevărat (adică utilizatorul a adăugat acest parametru), trebuie să adăugăm o clasă de "rotunjit" în fișierul nostru CSS. Vom crea fișierul în curând.
, funcția () // mouse out $ ('# tooltip') hide (); ); "Hover" acceptă două funcții: ștergeți mouse-ul și scoateți mouse-ul. Am adăugat codul corespunzător atunci când utilizatorul utilizează mouse-ul peste eticheta de ancorare selectată. Dar, de asemenea, trebuie să scriem un cod care elimină simbolul de îndată ce mouse-ul a părăsit eticheta de ancorare.
Ar fi frumos să forțați caseta de instrumente să se schimbe când mouse-ul se mișcă. Să implementăm asta repede.
$ this.mousemove (funcția (e) $ ('# tooltip'). css (top: e.pageY + 10, stânga: e.pageX + 20); Când mouse-ul se deplasează peste eticheta de ancorare, creați o funcție și, din nou, treceți obiectul evenimentului ca parametru. Găsiți elementul "tooltip" și ajustați CSS. Ar trebui să știți că este exact codul pe care l-am scris anterior. Restabilim aceste valori la cele noi. Nifty, eh?
Trebuie să permitem utilizatorului să continue lanțurile după ce se numește "tooltip". De exemplu:
$ ('a.tooltip'). tooltip () .css (...) .remove (); Pentru a permite această înlănțuire, trebuie să revenim "la acest lucru". Chiar înainte de încheierea creionului curat, adăugați "returnați acest lucru";.
Ați creat cu succes un plugin complet de lucru. Nu este prea avansat, dar ne-a permis să revizuim câteva caracteristici cheie. Iată codul final.
(funcția ($) $ .fn.tooltip = funcția (opțiuni) var defaults = background: '# e3e3e3', culoare: 'negru', rotunjit: optiune); this.each (function () var $ this = $ (this); var title = this.title; if ($ this.is ('a') && $ this.attr ") this.title ="; $ this.hover (funcția (e) // mouse peste $ (''.appendTo (' body ') .text (titlu) .hide () .css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, left: e.pageX + ) .fadeIn (350); dacă settings.rounded $ ('# tooltip') addClass ("rotunjit"); , funcția () // mouse out $ ('# tooltip') remove (); ); $ this.mousemove (funcția (e) $ ('# tooltip'). css (top: e.pageY + 10, stânga: e.pageX + 20); ); // returnează obiectul jQuery pentru a permite înlănțuirea. returnați acest lucru; ) (jQuery); 
Ultimul pas este sa adaugam doar un pic de CSS pentru a ne imbunatati sugestiile. Creați un nou fișier CSS numit "default.css" și lipiți următoarele:.
#tooltip background: # e3e3e3 url (... /images/search.png) nu-repeta 5px 50%; frontieră: 1px solid #BFBFBF; plutește la stânga; font-size: 12px; max-lățime: 160px; umplutură: 1em 1em 1em 3em; poziția: absolută; . înconjurat -moz-border-radius: 3px; -webkit-border-radius: 3px;
Nimic prea complicat aici. Fac referințe la o imagine de fundal care conține lupa standard "de căutare". Puteți descărca codul sursă pentru al utiliza. În plus, am adăugat un pic de umplutură, o lățime maximă și o dimensiune a fontului. Cele mai multe dintre acestea coboară la preferință. Esti liber să o editezi oricum dorești.
Singura proprietate vitală este "poziția: absolută". Mai devreme, am setat valorile "sus" și "stânga" cu jQuery. Pentru ca această poziționare să aibă efect, trebuie să stabilim poziția la absolut! Asta e important. Dacă nu faceți acest lucru, nu va funcționa.
Pentru toți cei care mi-au trimis prin e-mail cererea acestui tutorial, sper că este ajutat într-un fel. Dacă nu m-am explicat destul de bine, asigurați-vă că ați vizionat ecranul asociat și / sau ați pus un comentariu. Voi încerca să vă ajut pe cât posibil. Pana data viitoare…
Dacă aveți o înțelegere solidă a tehnicilor prezentate în acest tutorial, sunteți gata să continuați! Luați în considerare înscrierea pentru un membru Net Plus pentru a vedea un tutorial avansat, de Dan Wellman, care vă va învăța cum să construiți un plugin jQuery mai complicat. Deasemenea vine cu un screencast asociat. Asigurați-vă că vă înscrieți acum!
