Share
È dura. Leggi il tutorial dopo il tutorial, ma tutti danno per scontato che tu sappia più di quello che realmente fai. Quando avrai finito, ti sentirai più confuso di quanto inizialmente fossi. Perché ha creato un oggetto vuoto? Che cosa significa quando passi "opzioni" come parametro? Cosa fanno in realtà "impostazioni predefinite"?
Mai aver paura; Ti mostrerò esattamente come costruire il tuo plugin "tooltip", su richiesta di uno dei nostri fedeli lettori.
Potrebbe essere utile pensare ai plug-in nello stesso modo in cui funzioni. Ti sei mai trovato a ripetere le stesse procedure
per sito dopo sito? Forse hai creato il tuo sistema di tabulazione che ti piace usare. Piuttosto che scrivere lo stesso tempo di codice e
di nuovo, non sarebbe più facile se potessimo trasformare il tuo lungo blocco di codice in una sola riga? Questo è essenzialmente ciò che un plugin fa per noi.
Permette la riusabilità, che è fondamentale - se vuoi mantenere alto il tuo salario orario!
Crea un nuovo progetto nel tuo editor di codice preferito e incolla il seguente html.
Non è ancora possibile creare un plugin jQuery? Il punto di utilizzo di Lorem Ipsum è che ha una distribuzione più o meno normale di lettere, invece di usare "Contenuto qui, contenuto qui", facendo apparire l'inglese leggibile. Molti pacchetti di desktop publishing e editor di pagine web ora usano Lorem Ipsum come testo di modello predefinito, e una ricerca di "lorem ipsum" scoprirà molti siti Web ancora nella loro infanzia. Varie versioni si sono evolute nel corso degli anni, a volte per caso, a volte di proposito (umorismo iniettato e simili).
Questo codice è abbastanza semplice; quindi non richiede troppo di una visione d'insieme.
Di solito trovo che sia più facile costruire il mio plugin se per prima cosa determino come lo chiamerò. Considera il seguente codice.
Ho deciso che voglio che il nome del mio plugin sia chiamato semplicemente "tooltip". Ho anche deciso che voglio essere in grado di passare in pochi
parametri per personalizzare leggermente il mio suggerimento. Questo sarà puramente opzionale per l'utente però. Se si preferisce, lui o lei potrebbe semplicemente digitare:
In questo caso, il predefinito le opzioni saranno usate.
Così ora che sappiamo come verrà chiamato il plugin, andiamo avanti e costruiscilo! Crea un nuovo file nel tuo progetto e chiamalo "jQuery.tooltip.js". Esistono alcune convenzioni di denominazione quando si crea un plug-in che sarà potenzialmente utilizzato da altri. Iniziamo scrivendo 'jQuery', seguito dal nome del nostro plugin. Tuttavia, sono sicuro che ti rendi conto che migliaia di persone hanno creato il proprio plugin tooltip. Potresti determinare che è necessario pre-scrivere "tooltip" con una stringa univoca; forse le tue iniziali. In ogni caso, non importa troppo. Sei libero di nominare il tuo plugin come preferisci.
(function ($) ... code) (jQuery);
Dobbiamo prima assicurarci che il simbolo "$" non ci metta in difficoltà. Cosa succede se usassimo anche altre librerie Javascript nella nostra applicazione? Ci hai mai pensato? In questi casi, dovremmo cambiare ogni "$" nel nostro documento in "jQuery". L'unico problema è che questa è una soluzione piuttosto sciatta. Invece, creiamo una funzione anonima che invoca automaticamente e passiamo "$" come alias. In questo modo, siamo liberi di usare "$" tutto ciò che vogliamo senza doverci preoccupare di eventuali conflitti.
$ .fn.tooltip = function (options)
All'interno del nostro wrap, dobbiamo dichiarare il nostro nuovo plugin e renderlo uguale alla seguente funzione. Possiamo realizzare questo compito digitando jQuery.fn (abbreviazione di prototipo).il nome del nostro plugin.
Ricordi quando ho specificato che l'utente dovrebbe essere in grado di apportare piccole modifiche al suggerimento? Quelle modifiche saranno memorizzate all'interno del parametro "opzioni".
var defaults = background: '# e3e3e3', colore: 'black', arrotondato: falso,
È probabile che l'utente non possa specificare alcuna opzione. Quindi, imposteremo le nostre opzioni "predefinite". Perché questo è un tutorial per i principianti, non faremo troppo qui. Per lo più, questo sta dimostrando cosa è possibile. Stiamo consentendo all'utente di selezionare un colore di sfondo, un colore e se il tooltip è arrotondato o meno.
Più avanti nel nostro codice, quando desideriamo accedere a questi valori, possiamo semplicemente digitare: defaults.rounded.
Quindi, come possiamo determinare se l'utente aggiunge le proprie opzioni? La risposta è che dobbiamo unire 'default' con 'opzioni'.
settings = $ .extend (, default, opzioni);
Abbiamo creato una nuova variabile chiamata "impostazioni" e ho detto a jQuery di unire "valori predefiniti" e "opzioni" e posizionare i risultati in un nuovo oggetto. Quando si uniscono, le "opzioni" selezionate dall'utente hanno la precedenza sui valori predefiniti.
Ci si potrebbe chiedere perché non ho aggiunto "var" prima delle impostazioni. Tecnicamente, non è richiesto, anche se è considerato una buona pratica. Se farai scorrere verso l'alto un po ', vedrai che dopo il nostro oggetto di default, ho aggiunto una virgola. Nel fare ciò, possiamo continuare a creare più variabili senza la necessità di "var" ogni volta. Per esempio…
var joe = ; var è = ; var buono = ;
può diventare…
var joe = , is = , buono = ;
this.each (function () var $ this = $ (this); var title = this.title;
È importante tenere presente che il set avvolto che l'utente passa a questo plug-in può contenere molti elementi, non solo uno. Dovremmo assicurarci che usiamo a per ogni istruzione - o "ogni" metodo di jQuery - per scorrere il codice.
Iniziamo la nostra nuova funzione memorizzando nella cache $ (this). Non solo ci salverà alcuni personaggi, ma accelererà anche le cose, anche se leggermente. Non è richiesto, ma è considerato una buona pratica. Molte persone chiedono: "Perché aggiungi il simbolo del dollaro davanti alla tua variabile?". Lo facciamo per ricordare a noi stessi che stiamo lavorando con l'oggetto jQuery. Così facendo, ricordo che posso chiamare cose come: $ this.click () ;. Successivamente, sto memorizzando il valore dell'attributo title in una variabile chiamata "title". Vedrai perché dobbiamo farlo in un attimo.
Accentsconagua
if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ This.hover (function (e) È facile dimenticare a cosa si riferisce questo $. Quando lo dimentichi, torna al modo in cui stai chiamando il metodo "tooltip".
$ ( 'A.tooltip') tooltip ().;
Possiamo vedere qui che $ si riferisce a ciascun tag di ancoraggio che ha una classe di "tooltip".
Torna al codice; se l'elemento nel set avvolto è, in effetti, un tag di ancoraggio, E il suo attributo 'titolo' non è vuoto, quindi esegui del codice. Questo è piuttosto auto esplicativo. Non voglio eseguire una serie di codice se l'utente passa accidentalmente in un'immagine. Inoltre, non voglio creare il mio tooltip box se non c'è nulla da mostrare!
All'interno della mia istruzione "if", sto impostando l'attributo "title" del tag anchor uguale a niente. Questo interromperà il caricamento del tooltip predefinito del browser. Successivamente, aggiungo un listener di eventi per quando $ this, o il tag di ancoraggio, viene passato sopra. Quando lo è, creiamo una nuova funzione e passiamo l'oggetto evento come parametro. Non preoccuparti di questo per ora, ti spiegherò più tardi.
var title = $ this.attr ('title'); $ ('') .appendTo (' body ') .hide () .text (title) .css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, left: e.pageX + 20 ) .fadeIn (350); Ho creato una variabile chiamata "titolo" e l'ho resa uguale a qualsiasi valore contenuto nell'attributo "titolo" del tag di ancoraggio. Non è davvero necessario, ma mi aiuta.
Quando aggiungiamo tag html alla nostra dichiarazione jQuery, possiamo effettivamente creare un nuovo elemento, piuttosto che recuperarne uno. Stiamo creando un nuovo tag div con un ID di "tooltip". Successivamente, utilizzeremo le meravigliose abilità di jQuery per eseguire un sacco di procedure con facilità.
if (defaults.rounded) $ ('# tooltip'). addClass ('arrotondato'); Per impostazione predefinita, la nostra opzione 'arrotondata' è impostata su 'falso'. Tuttavia, se "defaults.rounded" restituisce true (ovvero l'utente ha aggiunto questo parametro), è necessario aggiungere una classe di "arrotondato" al nostro file CSS. Creeremo presto quel file.
, function () // mouse out $ ('# tooltip'). hide (); ); "Hover" accetta due funzioni: mouse over e mouse out. Abbiamo aggiunto il codice appropriato per quando l'utente si trova sopra il nostro tag di ancoraggio selezionato. Ma abbiamo anche bisogno di scrivere del codice che rimuova il suggerimento una volta che il mouse ha lasciato il tag di ancoraggio.
Sarebbe bello forzare lo spostamento della casella del suggerimento quando il mouse si muove. Implementiamolo velocemente.
$ this.mousemove (function (e) $ ('# tooltip'). css (top: e.pageY + 10, left: e.pageX + 20);); Quando il mouse si sposta sopra il tag di ancoraggio, creare una funzione e, ancora una volta, passare l'oggetto evento come parametro. Trova l'elemento "tooltip" e regola i suoi CSS. Dovresti capire che è il codice esatto che abbiamo scritto in precedenza. Stiamo semplicemente reimpostando questi valori su quelli nuovi. Nifty, eh?
Dobbiamo consentire all'utente di continuare a concatenare dopo che è stato chiamato "tooltip". Per esempio:
$ ('a.tooltip'). tooltip (). css (...) .remove (); Per consentire questo concatenamento, dobbiamo restituire "questo". Poco prima della parentesi graffa di chiusura, aggiungi "restituisci questo;".
Hai appena creato con successo un plug-in funzionante. Non è troppo avanzato, ma ci ha permesso di rivedere alcune caratteristiche chiave. Ecco il codice finale.
(function ($) $ .fn.tooltip = function (options) var defaults = background: '# e3e3e3', color: 'black', arrotondato: false, settings = $ .extend (, default, opzioni); this.each (function () var $ this = $ (this); var title = this.title; if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (funzione (e) // mouse su $ ('') .appendTo (' body ') .text (title) .hide () .css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, left: e.pageX + 20 ) .fadeIn (350); if (settings.rounded) $ ('# tooltip'). addClass ('arrotondato'); , function () // mouse out $ ('# tooltip'). remove (); ); $ this.mousemove (function (e) $ ('# tooltip'). css (top: e.pageY + 10, left: e.pageX + 20);); ); // restituisce l'oggetto jQuery per consentire la concatenabilità. restituiscilo; ) (jQuery); 
L'ultimo passaggio consiste nell'aggiungere solo un po 'di CSS per migliorare il nostro tooltip. Crea un nuovo file CSS chiamato "default.css" e incolla quanto segue in.
#tooltip background: # e3e3e3 url (... /images/search.png) no-repeat 5px 50%; border: 1px solid #BFBFBF; fluttuare: a sinistra; font-size: 12px; larghezza massima: 160 px; imbottitura: 1em 1em 1em 3em; posizione: assoluta; .rounded -moz-border-radius: 3px; -webkit-border-radius: 3px;
Niente di troppo complicato qui. Sto facendo riferimento a un'immagine di sfondo che contiene la lente di ingrandimento standard di "ricerca". Sei libero di scaricare il codice sorgente per usarlo. Inoltre, ho aggiunto un po 'di padding, una larghezza massima e una dimensione font. La maggior parte di questo dipende dalle preferenze. Sei libero di modificarlo come preferisci.
L'unica proprietà vitale è "position: absolute;". In precedenza, abbiamo impostato i valori "top" e "left" con jQuery. Affinché quel posizionamento abbia effetto, dobbiamo impostare la posizione su assoluto! Questo è importante. Se non lo fai, non funzionerà.
A tutti quelli che mi hanno inviato per email chiedendo questo tutorial, spero che sia stato aiutato in qualche modo. Se non mi spiegassi abbastanza bene, assicurati di vedere lo screencast associato e / o chiedere un commento. Cercherò di aiutarti al meglio delle mie capacità. Fino alla prossima volta…
Se hai una solida conoscenza delle tecniche presentate in questo tutorial, sei pronto per andare avanti! Prendi in considerazione l'iscrizione a un abbonamento Net Plus per visualizzare un tutorial avanzato, di Dan Wellman, che ti insegnerà come creare un plugin jQuery più complicato. Inoltre viene fornito con uno screencast associato. Assicurati di iscriverti ora!
