Efectuați etichete interactive cu qTip (jQuery Plugin)

Imaginile pot fi destul de inofensive și plictisitoare - cu excepția cazului în care sunt interactive și minunate. Și qTip face acest lucru ușor, cu puterea lui jQuery. Citiți mai departe pentru a afla cum puteți adăuga etichete interactive care apar atunci când utilizatorul se deplasează deasupra unor părți ale unei imagini.

De ce ai vrea să faci asta? Personal, folosesc tehnica într-un nou site de eCommerce - astfel încât utilizatorul poate să treacă peste elementele unei scene (ca un catalog Ikea), cu titlul produsului și butonul de adăugare în coș care apare dinamic. De asemenea, ar putea fi folosit pentru a avea un efect pozitiv asupra unui campus sau a unei hărți a orașului, unde există o mulțime de elemente ciudate care ar putea face cu adevărat o descriere fără a aglomera harta. Un exemplu foarte simplu ar fi, de asemenea, etichetele Facebook, în cazul în care hovering peste o față persoană va spune cine sunt. Utilizările sale sunt limitate doar de imaginația ta.

Notă: presupun o cunoaștere foarte bună despre jQuery și HTML aici - cel puțin asigurați-vă că ați citit despre selectori jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. In aceasta saptamana, cred ca este timpul sa ne imprastiem mina cu un anumit cod si sa invatam cum ... Citeste mai mult, metode Introducere In jQuery (Partea 2): Metode si functii Introducere In jQuery (Partea 2): Metode si functii Aceasta face parte dintr- în curs de desfășurare introducerea începătorilor în seria de programare web jQuery. Partea 1 a acoperit elementele de bază ale jQuery cu privire la modul de includere a acestora în proiect și selectori. În partea a 2-a, vom continua cu ... Citește mai mult și funcții anonime Introducere Pentru jQuery (partea 3): Așteptare pentru pagină pentru încărcare și funcții anonime Introducere la jQuery (partea 3): Așteptare pentru încărcare și funcții anonime jQuery este, fără îndoială, o abilitate esențială pentru dezvoltatorul web modern, iar în această scurtă mini-serie sper să vă dau cunoștințele pentru a începe să o utilizați în propriile proiecte web. În ... Citește mai mult .

Q-Tip

qTip este un tooltip complet și plugin de etichetare pentru jQuery, cu o varietate de stiluri. O vom folosi în mod special cu funcționalitatea imaginii hărții, dar cu siguranță nu e tot ce poate face. Uitați-vă la pagina de plugin pentru a afla mai multe sau citiți-o pentru a începe.

Realizarea unei imagini

Hărțile de imagini cu siguranță nu sunt un lucru nou - elementele de marcare au la dispoziție pentru o lungă perioadă de timp, iar modul în care a fost considerat de fapt o modalitate bună de prezentare a unui sistem de navigare - cu părți clicabile ale imaginii care leagă diferite secțiuni . Același cod de bază al hărții de imagine este încă folosit pentru acea parte a funcționalității, așa că va trebui să definim mai întâi acest lucru.

Puteți folosi o varietate de instrumente pentru a crea o hartă de imagini - Adobe Fireworks sau Photoshop - dar soluția cea mai ușoară și gratuită este un instrument online ca acesta. Cu siguranță nu este singurul instrument online și nu îl susțin în mod special, dar mi sa părut destul de simplu să îl folosiți - anunțați-ne în comentariile dacă găsiți unul mai bun. Puteți defini forme rectangulare, circulare sau chiar poligonale.

Începeți prin a încărca o imagine - în acest caz, voi eticheta o captură de ecran a site-ului MakeUseOf. Este posibil să trebuiască să micșorați imaginea pentru a vizualiza imaginea completă în instrument.

Ar trebui să fie destul de evident cum să o folosiți ca un program de pictură de bază - singurul lucru de reținut este că atunci când desenați o formă poli, trebuie să țineți SHIFT în ultimul punct pentru a închide și a termina. Aici am definit 4 forme.

Când sunteți gata derulați în jos și copiați codul dat.

Creați un nou document de bază HTML și curățați puțin codul, adăugând o etichetă de imagine pentru a indica imaginea originală. Cea mai ușoară modalitate de testare este folosirea unui JSFiddle. Iată eșantionul meu, în starea sa inițială (setul de cod final este dat mai târziu, nu vă faceți griji).

Nu uitați să dați imaginea a usemap atribut, indicând #ID a hărții care conține coordonatele (usemap =”#mymap”, de exemplu).

Adăugarea în qTip

Dacă vă lipiți codul la JSFiddle, veți vedea că există o opțiune pe bara laterală pentru a include jQuery. Asigurați-vă că activați acest lucru. De asemenea, putem adăuga alte resurse externe aici, deci mergeți mai departe și adăugați adresele URL pentru CSS și JS listate pe pagina de descărcare qTip. Copiați și lipiți “toate caracteristicile și stilurile” uri în JSFiddle - deși în practică, ați folosi instrumentul de configurare de mai jos pentru a construi un set personalizat de caracteristici sau stiluri.

Ghidul complet de implementare pentru qTip poate fi găsit aici, dar vă permite să continuați și să creați câteva sfaturi simple pe bază de text. Javascriptul următor va viza toate elementele zonei (elementele care definesc părțile din harta imaginilor) la încărcarea paginii, spunând că qTip va lucra la ele cu conținut de orice este în alt atribut.

 $ (link) .qtip (content: link.attr ("(")) alt ")););); 

Design-ul implicit este destul de urât - puteți vedea un demo de aici - dar e ok, să aplicăm un design personalizat pentru pop-up-uri ca acesta (Am omis o parte din cod, afișând doar secțiunea specifică qTip).

$ (link) .qtip (conținut: link.attr ("alt"), stil: clase: 'qtip-bootstrap qtip-shadow'); 

Am inclus, de asemenea, fișierul BootStrap CSS ca fișier extern, pentru a sorta fonturile urât de browser standard. Acest lucru este prea mult, știu. Încă: mult mai bine!

Un lucru pe care l-am observat acum este că poziția implicită a dreptului de jos nu este cu adevărat ideală. Pentru a regla acest lucru, să folosim setarea de poziție:

$ link: .qtip content: link.attr ("alt"), stil: classes: qtip-bootstrap qtip-shadow / Poate fi omisă (de exemplu comportamentul implicit)); ); 

Acum treceți peste orice element, iar simbolul va urma mouse-ul. Puteți vedea demo-ul finalizat aici.

Puteți, de asemenea, să faceți modalitatea pop-up (astfel încât orice altceva să fie estompat și trebuie să faceți clic pe afară pentru a reveni la el) sau chiar să încărcați conținut într-o solicitare AJAX. Cred că este un plug destul de frumos, care dă viață nouă într-un standard HTML destul de nefolosit - să vedem ce puteți face și vă rugăm să ne spuneți în comentarii dacă ați făcut ceva cu asta.

Explorați mai multe despre: jQuery, Portfolio Online, Photo Sharing.