Tutoriale utile și pluginuri jQuery

Info-ul este un element obișnuit al interfeței grafice cu utilizatorul. Este folosit împreună cu un cursor, de obicei un indicator al mouse-ului. Utilizatorul plasează cursorul peste un element, fără să facă clic pe el, și poate apărea un sfat explicativ - o mică „casetă de trecere” cu informații despre elementul care este trecut cu mouse-ul.

Am compilat câteva tutoriale și pluginuri jQuery pentru sfaturi.

1. TinyTips – Plugin jQuery ușor pentru sfaturi

TinyTips este un plugin jQuery foarte ușor, care oferă posibilitatea de a adăuga sfaturi pentru aproape orice element dintr-o pagină. Documentat temeinic și prietenos cu designerul.

2. Etichetarea fotografiilor în stil Flickr folosind jQuery

jQuery Photo Tagger are aproximativ 1.000 de linii de cod. Ca atare, puteți fie să consultați pagina proiectului, fie să încercați singur demonstrația online. Vă rugăm să rețineți că trebuie să țineți apăsată tasta CTRL când faceți clic pe mouse pentru a crea hotspot.

Demo | Descarca

3. TipTip Custom Tooltip jQuery Plugin cu zero imagini

TipTip folosește atributul title la fel ca și sfatul explicativ al browserului nativ. Cu toate acestea, titlul va fi copiat și apoi eliminat din element atunci când utilizați TipTip, astfel încât sfatul cu instrumente din browser să nu apară.
TipTip generează doar un set de elemente pop-up în total, mai degrabă decât generează un set de elemente pop-up pentru fiecare element cu TipTip aplicat. Acest lucru ajută la accelerarea lucrurilor și reduce timpul de procesare. Elementele generate sunt toate elemente div și sunt atașate la capătul elementului body.

4. Cum să construiți noile adnotări vizuale cu CSS3

ZURB ne-a învățat cum să construim noile adnotări vizuale. Soluția nu a fost prea complexă din punct de vedere tehnic. Cu Notable, ei au îmbrățișat conceptul de degradare grațioasă: profită de noile tehnici CSS care se degradează în mod curat la browserele mai vechi.

Demo

5. Afișați linkurile dvs. ca o listă derulantă cu Pluralink

Pluralink este un plugin javascript uimitor pentru a aranja mai multe link-uri în text.

6. Efect de trecere în tonuri de gri cu CSS și jQuery

Efectul de trecere în tonuri de gri cu CSS și jQuery se bazează pe Sprites CSS și câteva linii de jQuery, dar necesită puțină pregătire înainte de a putea fi implementat. Nu este recomandat pentru proiecte la scară mare și probabil cel mai bun pentru afișarea pieselor din portofoliu.

7. Obțineți o privire mai atentă cu AnythingZoomer jQuery Plugin

Ai o zonă mică. Treci cu mouse-ul peste el. Apare o zonă care vă oferă o privire mai atentă. Acesta este un plugin jQuery care o face. Nu am de gând să vă spun pentru ce ar trebui să-l utilizați sau să elaborez scenarii de utilizare. Propria ta creativitate te poate ajuta acolo.

Demo

8. Creați un Tooltip bogat în conținut cu JSON și jQuery

Acest tutorial va demonstra cum să construiți sfaturi cu instrumente care sunt alimentate de jQuery, cu informații extrase dintr-o matrice JSON.

Demo

9. Înlocuiți balonul cu instrumente implicite cu Pretty (mb)Tooltip

(mb)Tooltip este un tooltip frumos pentru pagina dvs. web în jQuery.

Descarca

10. Captify afișează Subtitrări frumoase de imagini apar la rulare

Captify este un plugin pentru jQuery scris de Brian Reavis pentru a afișa subtitrări simple și drăguțe ale imaginilor care apar la rulare. A fost testat pe Firefox, Chrome, Safari și nenorocitul Internet Explorer. Captify a fost inspirat de ImageCaptions, un alt plugin jQuery pentru afișarea subtitrărilor ca acestea.

11. Previzualizează imagini cu imgPreview jQuery Plugin

Peter Higgins a creat Dojo Zoomer. Este împărțit în 3 panouri. Trecând cu mouse-ul peste imaginea din panoul din stânga, panoul din dreapta afișează dinamic porțiunea decupată a imaginii, astfel încât să vă puteți concentra în mod explicit asupra porțiunii din imaginea principală care vă interesează.

12. jQuery Javascript Image Magnifier sub GPL

JQZoom este o lupă de imagine javascript construită în partea de sus a popularului framework javascript jQuery. jQzoom este un script grozav și foarte ușor de utilizat pentru a mări ceea ce doriți.

13. Sfaturi simple transparente cu jQuery și CSS

Sfaturile instrumente CSS sunt foarte populare în designul web modern și, contrar credinței populare, este foarte ușor să le creați, mai ales cu unul dintre cadrele javascript atât de populare.

Demo

14. Magic Toolbox – Instrumente Javascript și Flash Image Zoom

Magic Toolbox a creat 2 instrumente uimitoare de zoom a imaginilor javascript (Magic Zoom și Magic Magnify). Magic Zoom este un instrument de zoom JavaScript. Este cel mai bun mod de a afișa imagini cu detalii incredibile.

15. Prototip 2 – Creați cu ușurință sugestii frumoase

Prototip vă permite să creați cu ușurință atât sfaturi simple, cât și complexe, utilizând cadrul Javascript Prototype.

Demo

16. Cel mai simplu sfat cu instrumente și previzualizare a imaginii folosind jQuery

Easiest Tooltip and Image Preview este unul dintre acele ferestre pop-up asemănătoare cu un balon, care apare când treceți peste link sau miniatură.

Demo

17. Coda Style Popup Bubble Tooltips cu jQuery

Coda este unul dintre noile instrumente de dezvoltare web pentru Mac – și este popular printre designeri și dezvoltatori.

18. Taggify Regiunea de imagine pe care se poate face clic afișează un pop-up Tooltip

Taggify este un widget web care le permite bloggerilor și editorilor să-și îmbunătățească site-urile adăugând sfaturi pentru imagini legate de cerințele anumitor imagini.
Demo

19. Bubble Tooltips neobtroziv cu Javascript și CSS

Bubble Tooltips sunt o modalitate ușoară de a adăuga (prin un pic de CSS și javascript) tooltips fantezi cu o formă de balon la orice pagină web.

Demo

20. Fade In and Out Tooltips pentru Prototype și Scriptaculous

CoolTips este o tehnică ușoară și discretă de înlocuire a sfaturii de ghidare a browserului web JavaScript.
CoolTips este folosit pentru a înlocui sfaturile instrumentale convenționale ale browserului web. Sfaturile instrumente primesc conținutul atributului titlu, deci este complet discret. CoolTips este o clasă OO bazată pe Prototype JS și framework-uri script.aculo.us.

21. Titluri dulci Transparente și Fading Tooltips

Sweet Titles Fading Tooptips nu este o imitație de la NICE Titles și nici nu încearcă să îmbunătățească încercarea revizuită a lui Dunstan. Și cu siguranță nu este extras dintr-unul dintre acele scripturi infestate cu gestionarea evenimentelor din Dynamic Drive .

Demo

22. Prototip Cele mai multe caracteristici Sfaturi instrumente pentru Prototype

Prototip vă permite să creați cu ușurință atât sfaturi simple, cât și complexe, utilizând cadrul Javascript Prototype. Dacă folosiți și Scriptaculous, puteți chiar să le adăugați niște efecte drăguțe.

Demo

23. BoxOver DHTML/Javascript Lightweight Tooltips

BoxOver folosește javascript / DHTML pentru a afișa sfaturi cu instrumente pe un site web. Cu toate acestea, implementarea tooltips-urilor nu necesită cunoștințe de DHTML sau javascript. Există multe ajustări care pot fi setate pentru a le personaliza în funcție de nevoile dvs. prin setarea prin atributul „titlu” al unei etichete.