Share
Navigatorii vor afișa automat o sugestie atunci când oferiți o titlu atribut. Internet Explorer va folosi, de asemenea, atributul alt. Dar, în acest tutorial vă voi arăta cum să scrieți rapid un plugin jQuery care să înlocuiască sfaturile tipice ale browserului cu ceva puțin mai rapid.
Unul dintre cele mai bune instrumente pe care le avem în dezvoltarea noastră de web goodie-bag sunt tooltips. Un buton este o cutie
care apare când plasați cursorul pe un element ca un hyperlink. Oferă suplimentar
informații despre acel element. De exemplu, un link cu puțin sau fără text (o pictogramă) poate deveni confuz.
Furnizați o propoziție suplimentară sau două în cadrul unei sugestii pentru a explica utilizatorilor dvs. ce se va întâmpla dacă dau clic pe el.
Acest tutorial se va potrivi, probabil, în categoria Intermediarului. Instrucțiunile presupun că aveți cel puțin
o înțelegere de bază a HTML / CSS, tehnicile de tăiere și jQuery.
Dacă aveți nevoie de o reîmprospătare pe jQuery, iată câteva site-uri recomandate:
Doar pentru a avea o idee clară despre fișierele implicate în acest tutorial, iată ce ar trebui să arate structura fișierului
ca și când ați terminat.
Iată o descriere a ceea ce fiecare fișier / dosar este:
Deschideți Photoshop, sau software-ul dvs. de alegere, și biciuie un instrument minunat aspect. Mai degrabă decât proiectarea
pe un fundal alb simplu, ar putea ajuta să-ți elaborezi sugestiile pe un fundal similar cu cel al site-ului tău.
În felul acesta se va amesteca fără probleme. În cea mai mare parte, nu există nici o cale corectă sau greșită
pentru a finaliza acest pas. Utilizați imaginația și creativitatea.
Pentru acest design special, va trebui să tăiați butonul de lucru în 3 imagini diferite. Acest design special va avea nevoie de un PNG pentru a păstra transparența.
1) Piesa de sus. 2) Un fragment subțire de 1 pixel care se va repeta vertical în mijloc. 3) Piesa de jos. Cea de-a patra parte a diagramei de mai jos arată cele trei
după ce au fost tăiate.
Plasați aceste fișiere imagine într-un folder numit "imagini".
Notă: Internet Explorer nu-i place transparența PNG. Chiar și IE 7 o susține doar parțial. Dacă animați a
PNG cu JavaScript, orice zonă cu transparență va deveni neagră momentan în mișcare. Folosesc acest design
știind foarte bine că va avea probleme în IE care sunt greu de rezolvat.
Cu imaginile tăiate, putem trece la marcajul HTML și CSS. Aceasta va fi cea mai ușoară parte a întregului
tutorial.
Acest marcaj HTML va fi mutat în curând într-un fișier JavaScript extern, deci doar tastați-l în orice
este cel mai convenabil și se poate face referire mai târziu.
Se află trei div Etichete. Două imbricate în interiorul unui părinte. Primul div, "vârful" va fi folosit pentru a ține totul împreună
și afișați partea superioară a vârfului de instrument, tipTop.png.
"tipMid" va ține în cele din urmă textul pe care va fi afișat butonul de ajutor. De asemenea, va avea tipMid.png repetîndu-se vertical în el.
"tipBtm" este numai acolo pentru a afișa partea de jos a vârfului de instrument, tipBtm.png.
Interior de index.html, adăugați o grămadă de text de umplere și unele elemente cu atributele lor de titlu completate. Precum:
Acesta este un link
În capul lui index.html, va trebui să vă conectați la foaia de stil și cele două fișiere JavaScript.
CSS folosit pentru acest sfat util este relativ simplu, doar adăugați următoarele style.css
.vârful width: 212px; padding-top: 37px; afișare: niciunul; poziția: absolută; fundal: url transparent (imagini / tipTop.png) no-repeat top; .tipMid fundal: url transparent (imagini / tipMid.png) repeat-y; padding: 0 25px 20px 25px; .tipBtm fundal: url transparent (images / tipBtm.png) no-repeat bottom; înălțime: 32px;
Permiteți-mi să explic cele de mai sus.
Elementul de înfășurare, .tip, este utilizat pentru a ține totul împreună. Ea are un padding de top de 37 de pixeli.
Aceasta este înălțimea imaginii în fundal. Plăcuța va împinge elementele copilului în jos pentru a le dezvălui
imaginea din spate. De asemenea, are o poziție absolută, astfel încât să o putem muta în partea de sus a paginii
conţinut.
Celelalte două clase pur și simplu au o imagine de fundal și, în cazul .topMid, padding pentru a da
conținutul care va fi plasat în interior, o cameră pentru a respira.
jQuery este destul de rece de la sine. Dar magia reală este extinderea cu un plugin. Când îți pui banii
cod într-un plugin, îl faceți reutilizabil. În acest fel, puteți construi o bibliotecă de cod și nu puteți scrie niciodată
același cod de două ori.
Aici este plugin-ul tooltip în întregime:
$ .fn.betterTooltip = funcția (opțiuni) / * Configurarea opțiunilor pentru sfat util care poate fi accesat din afara pluginului * / var defaults = speed: 200, delay: 300; var opțiuni = $ .extend (implicite, opțiuni); / * Creați o funcție care construiește marcajele tipului de instrument. Apoi, prefixati tooltip-ul la corp * / getTip = function () var tTip = ""+""* return (ttp) $ (" body ") prepend (getTip ()); / * var $ = $ (acest tip); var tip = $ ('. tip'); var tipInner = $ ('tip .tipMid'); var tTitle = (this.title); var offset = $ (this) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ this.height și funcțiile out * / $ this.hover (function () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer (); ; / * Întârziere animație de decolorare a tooltip * / setTimer = funcția () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay; stopTimer = function () clearInterval ($ this. showTipTimer); / * Poziționați vârful de instrument relativ la clasa asociată cu tooltip * / setTip = funcția (sus, stânga) var topOffset = tip.height (); var xTip = (stânga-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top' : yTip, "stânga": xTip); / * Această funcție oprește cronometrul și creează animația de estompare * / showTip = funcția () stopTimer (); tip.animate ("top": "+ = 20px", "opacitate": "comutare", defaults.speed); ); ;"+""+""+"
Acum că ați văzut ce arată codul, este timpul să-l disecați.
Pentru a începe, creați un fișier .js și denumiți-l jquery.betterTooltip.js pentru al face conform cu jQuery
plugin standarde.
În fișierul .js, includeți următorul cod:
$ .fn.betterTooltip = funcția () );
Aceasta creează o funcție publică care poate fi invocată din cap a unui document sau
un alt fișier .js extern. Pentru a vă invita pluginul, trebuie să apelați linia următoare din interiorul unui$ (Document) .ready pagina eveniment.
Accentsconagua
$ (document) .ready (functie () $ ('.Tip)'); Linia de mai sus va atașa pluginul la fiecare element cu numele de clasă "tTip". De asemenea, tu
ar putea atașa orice element ales de dumneavoastră.
Pentru a preveni modificarea pluginului pentru fiecare proiect, este important să expuneți câteva dintre acestea
variabile și setări, astfel încât acestea să poată fi modificate din afara plugin-ului în sine. Scopul final ar fi
pentru a nu atinge niciodată pluginul, trebuie doar să-i ajustați setările. Pentru a face acest lucru, adăugați următoarele la acea primă bucată
de cod:
$ .fn.betterTooltip = funcția (opțiuni) / * Configurați opțiunile pentru tooltip-ul care poate fi accesat din exterior * / var defaults = speed: 200, delay: 300; var opțiuni = $ .extend (implicite, opțiuni); );
Acest lucru permite ca setările "speed" și "delay" să fie modificate atunci când plugin-ul este invocat astfel:
$ ('. tTip'). betterTooltip (viteză: 600, întârziere: 600); Acestea sunt complet opționale. Dacă nu este specificat, pluginul va utiliza valorile implicite.
Amintiți-vă că ați tastat HTML pentru tooltip? Acum își va face apariția oficială.
În acest fragment de cod, jQuery "prepend" manipulare de conținut este folosit pentru a injecta tooltip
imediat după deschidere corp etichetă. În acest fel putem să vă asigurați că instrumentul
este pozitionat pe toate.
/ * Creați o funcție care construiește marcajele tipului de instrument. Apoi, prefixati tooltip-ul la corp * / getTip = function () var tTip = ""+""retur tTip; $ (" body ") prepend (getTip ());"+""+""+"
Acesta este unul dintre aspectele cele mai importante și utile ale unui plugin jQuery. Funcția $ (asta)
buclele prin fiecare element de pagină care este asociat cu plugin-ul atunci când a fost evocat. În acest caz este
toate elementele cu clasa "tTip". Când buclele prin fiecare element aplică proprietățile și metodele
pe care le specificați.
$ (acest) .each (functie () var $ this = $ (aceasta); var var = $ ('tip'); var tipInner = $ (var. ()) var offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ ()), funcția () stopTimer () () () () () ); tip.hide ();); Acest lucru este destul de simplu. Jumătatea superioară constă dintr-o mulțime de proprietăți pentru înălțime, lățime, poziție x și y și
chiar și valoarea atributului de titlu al elementelor "tTip". Folosesc metoda jQuery offset () CSS pentru a apuca poziția de sus și de stânga. Este deasemenea o
funcția hover atribuită fiecărei clase "tTip" care apelează metode de pe mouse peste și în afara. Aceste metode vor fi descrise
în jos în tutorial.
O parte importantă a funcției $ (this) .each este această linie de cod aici care înlătură atributul title:
this.title = "";
Scopul acestui sfat util este de a schimba genericul
tooltip cu o versiune mai bună a ochiului. Dacă nu eliminați atributul de titlu, care este browserul
utilizează pentru a genera tooltip-ul generic, veți obține sfaturi despre duel. Asa:
/ * Întârziere animație decolorare a tooltip * / setTimer = funcție () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay); stopTimer = funcție () clearInterval ($ this.showTipTimer); Aceste două metode, setTimer și stopTimer sunt utilizate pentru a crea o întârziere de la momentul în care utilizatorul se mișcă
cursorul lor peste elementul cu clasa "tTip" și când apare aspectul tooltipului. Acest
este important pentru a evita utilizatorii enervanți. Sunt sigur că toți împărtășim frustrarea atunci când ne mișcăm în mod accidental
peste unul dintre anunțurile pop-up care sunt ascunse în conținutul site-urilor.
Metoda setTimer creează un obiect setInterval care apelează "showTip ()" după ce timpul alocat a trecut.
Pentru ca setInterval să nu circule infinit, metoda stopTimer este chemată să oprească obiectul setInterval.
/ * Poziționați tooltip-ul relativ la clasa asociată cu tooltip * / setTip = funcție (sus, stânga) var topOffset = tip.height (); var xTip = (stânga-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('sus': yTip, 'stânga': xTip); Funcția hover din interiorul bucla $ (this) .each, care a fost creată mai devreme, solicită setTip (). Scopul său este de a poziționa
tooltip-ul direct deasupra elementului "tTip". Aceasta se face înainte de animația de decolorare.
/ * Această funcție oprește cronometrul și creează animația de estompare * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacitate": "comutare", defaults.speed); ); ; Nu în ultimul rând, funcția showTip (). Aceasta folosește efectul animat () UI al lui jQuery pentru a estompa vârful de instrument
în timp ce glisați-o simultan.
Odată ce ați terminat și vă mulțumiți cu rezultatele dvs., puteți să vă mutați pluginul din pagina HTML de bază plină cu text de umplere
lumea reală și a pus-o să folosească.
Acesta este un exemplu foarte simplu despre ceea ce poate face un plugin de tip tooltip. Partea distractivă acum va fi să o facem mai robustă.
Există tot felul de modalități de a extinde acest plugin. O îmbunătățire necesară ar fi detectarea
locația sugestii în legătură cu limitele ferestrei browserului și afișarea în mod corespunzător a sfatului de instrument
nu se taie.
Vă mulțumim că ați citit acest tutorial. Sper că a aruncat o lumină asupra modului în care puteți utiliza jQuery pentru a vă îmbunătăți site-ul
interfață.
Lăsați comentariile să înceapă! Vreau să aud ce crezi. Această tehnică îi ajută pe utilizatori să ajungă mai ușor,
sau este doar o altă supărare?
