Share
I browser visualizzeranno automaticamente un suggerimento quando fornisci a titolo attributo. Internet Explorer utilizzerà anche l'attributo alt. Ma, in questo tutorial, ti mostrerò come scrivere rapidamente un plugin jQuery che sostituirà il tipico tooltip del browser con qualcosa di un po 'più vistoso.
Uno dei grandi strumenti che abbiamo nel nostro bagaglio per lo sviluppo del web sono i tooltip. Un suggerimento è una scatola
appare quando si posiziona il cursore su un elemento come un collegamento ipertestuale. Fornisce supplementare
informazioni su quell'elemento. Ad esempio, un collegamento con poco o nessun testo (un'icona) potrebbe confondere.
Fornisci una frase o due in più in un suggerimento per spiegare ai tuoi utenti cosa accadrà se cliccano su di esso.
Questo tutorial probabilmente rientrerebbe nella categoria di Intermediate. Le istruzioni presuppongono che tu abbia almeno
una conoscenza di base di HTML / CSS, tecniche di slicing e jQuery.
Se hai bisogno di un aggiornamento su jQuery, ecco alcuni siti consigliati:
Solo per avere un'idea chiara dei file coinvolti in questo tutorial, ecco come dovrebbe essere la struttura del file
come quando hai finito.
Ecco una carrellata di ciò che ciascun file / cartella è:
Apri Photoshop, o il software che preferisci, e crea un tooltip fantastico. Piuttosto che progettare
su un semplice sfondo bianco, può aiutare a disegnare il tuo suggerimento su uno sfondo simile a quello del tuo sito.
In questo modo si fonderà perfettamente. Per la maggior parte, non esiste un modo giusto o sbagliato
per completare questo passaggio. Usa la tua immaginazione e creatività.
Per questo particolare design, sarà necessario suddividere il suggerimento in 3 immagini diverse. Questo particolare progetto avrà bisogno di un PNG per preservare la trasparenza.
1) Il pezzo superiore. 2) Una sottile sezione da 1 pixel che si ripeterà verticalmente nel mezzo. 3) Il pezzo inferiore. La quarta parte del diagramma qui sotto mostra i tre
pezzi dopo che sono stati tagliati.
Metti questi file immagine in una cartella chiamata "images".
Nota: a Internet Explorer NON piace la trasparenza PNG. Persino IE 7 lo supporta solo parzialmente. Se animi a
PNG con JavaScript, qualsiasi area con trasparenza diventa momentaneamente nera mentre è in movimento. Sto usando questo design
sapendo benissimo che avrà problemi in IE che sono difficili da aggirare.
Con le immagini a fette, possiamo passare al markup HTML e CSS. Questa sarà la parte più semplice del tutto
lezione.
Questo markup HTML verrà presto spostato in un file JavaScript esterno, quindi digitalo in qualsiasi modo
è più conveniente e può essere riferito più tardi.
Ce ne sono tre div tag. Due nidificati all'interno di un genitore. Il primo div, "tip" sarà usato per tenere tutto insieme
e mostra la parte superiore del suggerimento, tipTop.png.
"tipMid" alla fine manterrà il testo visualizzato dal tooltip. Avrà anche tipMid.png ripetendo verticalmente al suo interno.
"tipBtm" è lì solo per visualizzare la porzione inferiore del suggerimento, tipBtm.png.
All'interno di index.html, aggiungi un mucchio di testo di riempimento e alcuni elementi con i loro attributi del titolo compilati. Ad esempio:
Questo è un link
Alla testa di index.html, dovrai collegarti al foglio di stile e ai due file JavaScript.
Il CSS usato per questo tooltip è relativamente semplice, basta aggiungere quanto segue a style.css
.tip width: 212px; padding-top: 37px; display: nessuno; posizione: assoluta; background: transparent url (images / tipTop.png) no-repeat top; .tipMid background: transparent url (images / tipMid.png) repeat-y; padding: 0 25px 20px 25px; .tipBtm background: URL trasparente (images / tipBtm.png) fondo senza ripetizione; altezza: 32px;
Lasciatemi spiegare quanto sopra.
L'elemento wrapping, .tip, è usato per tenere tutto insieme. Ha una imbottitura superiore di 37 pixel.
Questa è l'altezza dell'immagine sullo sfondo. Il padding spingerà gli elementi del bambino verso il basso per rivelare
l'immagine dietro. Ha anche una posizione assoluta in modo che possiamo spostarlo in cima alla pagina
soddisfare.
Le altre due classi hanno semplicemente un'immagine di sfondo e, nel caso di .topMid, riempimento per dare il
contenuto che verrà inserito all'interno, un po 'di spazio per respirare.
jQuery è abbastanza bello da solo. Ma la vera magia è estenderla con un plugin. Quando metti il tuo
codice in un plug-in, lo stai rendendo riutilizzabile. In questo modo puoi creare una libreria di codici e non scrivere mai
lo stesso codice due volte.
Ecco il plugin tooltip nella sua interezza:
$ .fn.betterTooltip = function (options) / * Imposta le opzioni per il tooltip a cui è possibile accedere dall'esterno del plugin * / var defaults = speed: 200, delay: 300; var options = $ .extend (defaults, options); / * Crea una funzione che costruisce il markup del tooltip. Quindi, anteponi il tooltip al corpo * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ()); / * Assegna a ogni elemento con la classe associata al plugin la possibilità di chiamare il tooltip * / $ (this) .each (function () var $ this = $ (this); var tip = $ ('. tip'); var tipInner = $ ('. tip .tipMid'); var tTitle = (this.title); this.title = ""; var offset = $ (this) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ this.height (); / * Mouse sopra e fuori funzioni * / $ this.hover (function () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, function () stopTimer (); tip.hide ();) ; / * Ritarda l'animazione di fade-in del tooltip * / setTimer = function () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay); stopTimer = function () clearInterval ($ this. showTipTimer); / * Posiziona il tooltip relativo alla classe associata al tooltip * / setTip = function (in alto a sinistra) var topOffset = tip.height (); var xTip = (left-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top' : yTip, 'left': xTip); / * Questa funzione arresta il timer e crea l'animazione fade-in * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "toggle", defaults.speed); ); ;"+""+""+"
Ora che hai visto come appare il codice, è ora di analizzarlo.
Per iniziare, crea un file .js e chiamalo jquery.betterTooltip.js per renderlo compatibile con jQuery
standard per i plugin.
All'interno del file .js, includi il seguente codice:
$ .fn.betterTooltip = function () );
Questo crea una funzione pubblica che può essere invocata dal capo di un documento o
un altro file .js esterno. Per richiamare il tuo plug-in, devi chiamare la linea successiva da dentro a$ (Document) .ready evento della pagina.
Accentsconagua
$ (document) .ready (function () $ ('. tTip'). betterTooltip ();); La riga sopra allegherà il plugin a ogni elemento con il nome della classe di "tTip". Allo stesso modo, tu
potrebbe collegarlo a qualsiasi elemento di tua scelta.
Per evitare di dover modificare il plugin per ogni progetto è importante esporre alcuni dei
variabili e impostazioni in modo che possano essere ottimizzate dall'esterno del plugin stesso. L'obiettivo finale sarebbe
per non toccare mai il plugin, basta regolarne le impostazioni. Per fare ciò, aggiungi quanto segue al primo pezzo
di codice:
$ .fn.betterTooltip = function (options) / * Imposta le opzioni per il tooltip a cui è possibile accedere dall'esterno * / var defaults = speed: 200, delay: 300; var options = $ .extend (defaults, options); );
Ciò consente alle impostazioni "speed" e "delay" di essere modificate quando il plugin viene invocato in questo modo:
$ ('. tTip'). betterTooltip (speed: 600, delay: 600); Questi sono completamente opzionali. Se non specificato, il plug-in utilizzerà i valori predefiniti.
Ricorda che HTML hai digitato per il suggerimento? Ora farà la sua apparizione ufficiale.
In questo chunck di codice, la manipolazione del contenuto "anteporre" jQuery viene utilizzata per iniettare il suggerimento
subito dopo l'apertura corpo etichetta. In questo modo possiamo assicurarci che il suggerimento
è posizionato sopra a tutto.
/ * Crea una funzione che costruisce il markup del tooltip. Quindi, anteponi il tooltip al corpo * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ());"+""+""+"
Questo è uno degli aspetti più importanti e utili di un plugin jQuery. La funzione $ (this) .each
scorre attraverso ogni elemento della pagina associato al plugin quando è stato evocato. In questo caso lo è
tutti gli elementi con la classe "tTip". Quando scorre attraverso ogni elemento applica le proprietà e i metodi
che specifichi.
$ (this) .each (function () var $ this = $ (this); var tip = $ ('. tip'); var tipInner = $ ('. tip .tipMid'); var tTitle = (questo. title); this.title = ""; var offset = $ (this) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ this.height (); / * Funzioni di mouse over / out * / $ this.hover (function () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, function () stopTimer ( ); tip.hide ();); Questo è abbastanza semplice. La metà superiore è composta da un gruppo di proprietà per l'altezza, la larghezza, la posizione x e y
anche il valore dell'attributo titolo degli elementi "tTip". Sto usando il metodo jQuery offset () CSS per afferrare la posizione superiore e sinistra. C'è anche un
funzione hover assegnata a ciascuna classe "tTip" che richiama i metodi al passaggio del mouse. Questi metodi saranno descritti
più in basso nel tutorial.
Una parte importante della funzione $ (this) .each è questa riga di codice che rimuove l'attributo title:
this.title = "";
L'intero punto di questo suggerimento è di scambiare il generico
tooltip con una versione più accattivante. Se non si rimuove l'attributo title, che il browser
usa per generare il suggerimento generico, otterrete tooltip duello. Come questo:
/ * Ritarda l'animazione di fade-in del tooltip * / setTimer = function () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay); stopTimer = function () clearInterval ($ this.showTipTimer); Questi due metodi, setTimer e stopTimer vengono utilizzati per creare un ritardo da quando l'utente si posiziona su di esso
il loro cursore sull'elemento con la classe "tTip" e quando il tooltip fa la sua comparsa. Questo
è importante per evitare fastidiosi utenti. Sono sicuro che condividiamo tutti la frustrazione quando ci spostiamo accidentalmente
su uno di quegli annunci pop-up che sono nascosti nel contenuto dei siti.
Il metodo setTimer crea un oggetto setInterval che chiama "showTip ()" dopo che è trascorso il tempo assegnato.
Per impostare setInterval su Non loop infinitamente, il metodo stopTimer viene chiamato per arrestare l'oggetto setInterval.
/ * Posiziona il tooltip relativo alla classe associata al tooltip * / setTip = function (in alto a sinistra) var topOffset = tip.height (); var xTip = (sinistra-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top': yTip, 'left': xTip); La funzione di passaggio del mouse all'interno del ciclo $ (this) .each, creato precedentemente, chiama setTip (). Il suo scopo è quello di posizionare
il suggerimento direttamente sopra l'elemento "tTip". Questo viene fatto prima dell'animazione in dissolvenza.
/ * Questa funzione arresta il timer e crea l'animazione fade-in * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "toggle", defaults.speed); ); ; Ultima ma non meno importante, la funzione showTip (). Questo usa l'effetto UI animate () di jQuery per sfumare il suggerimento in
mentre contemporaneamente lo si fa scorrere verso il basso.
Una volta che hai finito e sei soddisfatto dei tuoi risultati, puoi spostare il tuo plug-in dalla pagina HTML di base piena di testo di riempimento
il mondo reale e metterlo in uso.
Questo è un esempio molto semplice di cosa può fare un plugin tooltip. La parte divertente ora sarà renderla più robusta.
Esistono molti modi per espandere questo plug-in. Un miglioramento necessario sarebbe rilevabile
la posizione del tooltip in relazione ai limiti della finestra del browser e la visualizzazione del tooltip di conseguenza
non viene tagliato.
Grazie per aver letto questo tutorial. Spero che faccia luce su come utilizzare jQuery per migliorare il tuo sito web
interfaccia.
Lascia che inizino i commenti! Voglio sentire cosa ne pensi. Questa tecnica aiuta effettivamente gli utenti a muoversi più facilmente,
o è solo un altro fastidio?
