Share
jQuery contiene il fn.extend () metodo, che rende la creazione di plugin jQuery abbastanza semplice, permettendoci di scrivere codice che viene utilizzato esattamente allo stesso modo di altri metodi jQuery. L'interfaccia utente di jQuery contiene anche strutture che semplificano la creazione di plug-in personalizzati dell'interfaccia utente jQuery. Questo è ciò che vedremo nel corso di questo tutorial. I metodi utilizzati differiscono da quelli dei plugin standard di jQuery e ci sono convenzioni più stringenti da seguire, motivo per cui ritengo che l'argomento sia meritevole di un articolo.
Nel corso di questo tutorial, ti mostrerò le convenzioni di codifica e le linee guida generali che dovrebbero essere rispettate durante la creazione di plug-in per l'interfaccia utente di jQuery. Creeremo un semplice plug-in che aggiunge solo didascalie alle immagini sulla pagina. È volutamente semplice in modo che possiamo concentrarci su ciò che è necessario per creare un plug-in dell'interfaccia utente jQuery senza perdersi nel codice. Chiunque abbia scritto un plugin jQuery non dovrebbe avere problemi. La conoscenza dell'interfaccia utente di jQuery può aiutare ma non dovrebbe essere essenziale per completare questo tutorial. Iniziamo.
Avremo bisogno di una copia di jQuery e di un paio di file dall'interfaccia utente di jQuery, ma deve essere jQuery UI 1.8 (questo può essere trovato sul blog). Crea una directory di lavoro da qualche parte sulla tua macchina chiamata jQueryUI-plugin, allora all'interno di questo creare a css cartella, a js cartella e un img cartella (le immagini utilizzate in questo tutorial possono essere trovate nel download del codice).
Scarica la libreria e decomprimila da qualche parte accessibile. Abbiamo solo bisogno di alcuni file dall'archivio, vale a dire il file sorgente jQuery che è nella radice dell'archivio come jquery-1.4.1.js, e il jquery.ui.core.js e jquery.ui.widget.js file, che sono entrambi nel ui cartella. Prendi questi e mettili nel js cartella nella directory di lavoro. Useremo anche il framework CSS, quindi avremo bisogno di uno dei fogli di stile per i temi disponibili con l'attuale versione stabile di jQuery UI (io ho usato ui-leggerezza in questo esempio).
Creeremo un widget per i sottotitoli, quindi avremo anche bisogno di una pagina, con un mucchio di immagini, per sviluppare / testare il plugin con. Questo esempio utilizza la seguente pagina:
Interfaccia utente jQuery 
Manterremo le cose piuttosto semplici per ora; abbiamo solo tre immagini sulla pagina, seguite da quattro file di script; tre link ai file sorgente di jQuery e jQuery UI, il quarto del file sorgente del nostro plugin che creeremo a breve. Il jquery.ui.core.js il file è richiesto da tutti i widget / plug-in dell'interfaccia utente di jQuery. Il jquery.ui.widget.js file è la fabbrica di widget e consente la creazione di widget coerenti che condividono funzionalità API comuni. La maggior parte dei componenti della biblioteca richiede questo, e lo useremo per creare il nostro plugin.
Crea un nuovo file JavaScript e salvalo come jquery.ui.captionator.js nel js cartella; dovremmo mantenere la convenzione di denominazione di jQuery UI, che è stata appena aggiornata nella versione 1.8 della libreria e utilizzata jquery.ui.plugin_name.js. Aggiungi il seguente codice al nuovo file:
(function ($) ) (jQuery);
Tutto il codice che compone il nostro plugin dovrebbe essere incapsulato all'interno di una funzione anonima autoeseguibile. L'oggetto jQuery viene passato in questa funzione e viene utilizzato all'interno della funzione tramite $ alias; questo per garantire che il plugin sia compatibile con jQuery noConflict () metodo. Questo è un requisito specificato e deve essere sempre rispettato.
Successivamente dobbiamo definire il plugin; aggiungi il seguente codice alla nostra funzione anonima:
Accentsconagua
$ .widget ("ui.captionator", ); Il modello per usare la fabbrica di widget è semplice da usare, chiamiamo semplicemente il Widget () metodo che specifica il nome del plug-in come primo argomento e un oggetto letterale contenente le proprietà e i metodi che rendono funzionante il plugin. Questo permette al nostro plugin di essere chiamato (e creato) usando la sintassi commen jQuery $ ( "Element_caption_applied_to") captionator ().; come qualsiasi altro metodo jQuery o jQuery UI.
La fabbrica di widget fornisce un certo numero di queste proprietà e metodi per noi; per esempio, possiamo impostare le opzioni predefinite per il plugin usando il opzioni proprietà e aggiungere una funzione di inizializzazione che viene eseguita automaticamente dalla fabbrica di widget non appena viene richiamata un'istanza del plug-in. All'interno dell'oggetto che appare come secondo argomento nel codice precedente, aggiungere il seguente codice:
opzioni: posizione: "in basso", colore: "#fff", backgroundColor: "# 000",
Queste sono le uniche opzioni che useremo nel nostro plugin di esempio; gli utenti (e dagli utenti intendo implementatori, non utenti finali) del plugin possono specificare la posizione della didascalia in cima all'immagine su cui è chiamato o in basso, possono specificare il colore del testo su la didascalia o modifica il colore di sfondo della didascalia. Per modificare un'opzione configurabile di qualsiasi widget dell'interfaccia utente di jQuery prima dell'inizializzazione, lo sviluppatore implementatore dovrebbe utilizzare qualcosa del genere:
$ ("element_caption_applied_to"). captionator (location: "top");
Successivamente possiamo creare la nostra funzione di inizializzazione, dopo che l'oggetto options aggiunge il seguente metodo:
_create: function () var self = this, o = self.options, el = self.element, cap = $ ("") .text (el.attr (" alt ")). addClass (" ui-widget ui-caption "). css (backgroundColor: o.backgroundColor, colore: o.color, width: el.width () ) .insertAfter (el), capWidth = el.width () - parseInt (cap.css ("paddingLeft")) - parseInt (cap.css ("paddingRight")), capHeight = cap.outerHeight () - parseInt (cap .css ("paddingTop")) + parseInt (cap.css ("paddingBottom")); cap.css (width: capWidth, top: (o.location === "top")? el.offset (). top: el.offset (). top + el.height () - capHeight, left: el.offset (). left, display: "block"); $ (window) .resize (function () cap.css (top: (o.location === "top")? el.offset (). top: el.offset (). top + el.height () - capHeight, left: el.offset (). left ););, Il nome del metodo dovrebbe iniziare con un carattere di sottolineatura, poiché l'interfaccia utente di jQuery impedisce a qualsiasi metodo di plug-in che inizia con un underscore di essere richiamato dall'esterno del plug-in, impedendo quindi che venga chiamato accidentalmente dalla pagina HTML. Qualsiasi metodo che iniziamo con un trattino basso verrà protetto in questo modo.
La maggior parte del nostro metodo di inizializzazione è una serie di variabili; all'interno della nostra funzione la parola chiave si riferisce ad un oggetto passato nel metodo che rappresenta l'istanza del plugin. La prima variabile memorizza nella cache un riferimento all'istanza corrente del plugin; il _creare viene chiamato un metodo per ogni elemento su cui viene chiamato il metodo plugin, che potrebbe essere un singolo elemento o più.
Possiamo accedere alle opzioni predefinite del plug-in (che vengono sovrascritte automaticamente se l'implementatore ne configura uno) utilizzando opzioni proprietà dell'oggetto; lo memorizziamo nella seconda variabile. L'elemento che il metodo plugin (captionator ()) è stato chiamato, che in questo esempio sarebbe un'immagine, è possibile accedere utilizzando il elemento proprietà dell'oggetto. Lo memorizziamo nella terza variabile.
Usiamo la quarta variabile per memorizzare un riferimento al nuovo elemento didascalia, che è costruito da un semplice ; il ha il suo innerText impostato su alt attributo dell'immagine corrente e vengono aggiunti diversi nomi di classe; noi gli diamo il ui-widget di nome della classe in modo che possa acquisire uno stile predefinito dal tema dell'interfaccia utente jQuery corrente. Diamo anche un nome di classe personalizzato in modo che possiamo aggiungere alcuni dei nostri stili.
Successivamente abbiamo bisogno di impostare alcune proprietà CSS; useremo un foglio di stile separato per alcuni stili, ma alcune cose, come la colore e colore di sfondo gli stili sono controllabili tramite opzioni configurabili, quindi è necessario impostarli utilizzando il plug-in. La larghezza della didascalia deve corrispondere alla larghezza dell'immagine che sovrappone, quindi dobbiamo anche determinarla e impostarla a livello di programmazione. Finalmente il nuovo viene iniettato nella pagina direttamente dopo l'immagine di destinazione.
Una volta che la didascalia è stata inserita, deve essere dimensionata e posizionata; l'unico modo in cui può essere dimensionato con precisione è se già esiste nel DOM e ad esso sono applicate regole CSS, come la dimensione del carattere. Questo è il motivo per cui aggiungiamo la didascalia alla pagina, quindi determiniamo le sue dimensioni esatte, che vengono quindi memorizzate nelle variabili capWidth e capHeight.
Una volta che la didascalia è stata aggiunta alla pagina (e solo successivamente) possiamo lavorare impostando la larghezza, l'altezza e la posizione corrette di ciascuna didascalia, che abbiamo impostato utilizzando css () metodo ancora una volta. Le didascalie sono in realtà completamente separate dalle immagini; sono inseriti direttamente dopo ogni immagine e quindi posizionati in modo da apparire per sovrapporre le immagini, dopotutto, non possiamo aggiungere il come un bambino del .
Questo va bene, fino a quando il browser non viene ridimensionato, a quel punto le immagini si muovono ma le didascalie non lo fanno perché sono posizionate in modo assoluto. Per ovviare a ciò, abbiamo utilizzato un gestore di ridimensionamento di base collegato alla finestra che semplicemente riposiziona ogni didascalia nella nuova posizione della sua immagine. Questo gestore di eventi è l'ultima cosa nel nostro metodo di inizializzazione.
Un altro metodo che il nostro plugin dovrebbe esporre è il distruggere() metodo comune a tutti i plugin dell'interfaccia utente jQuery. Dobbiamo fornire un'implementazione di questo metodo per ripulire dopo il nostro plugin. Per il nostro plugin di esempio, il metodo può essere semplice come questo:
destroy: function () this.element.next (). remove (); $ (Window) .unbind ( "ridimensionare"); ,
Tutto ciò che dobbiamo fare è rimuovere le didascalie e separare il gestore di ridimensionamento delle finestre. Questo metodo può essere chiamato da un implementatore usando il plugin, quindi non dovremmo iniziare il nome di questo metodo con un carattere di sottolineatura. Per chiamare questo metodo, l'implementatore userebbe $ ( "Element_caption_attached_to") captionator ( "distruggere."); qual è il modo in cui verrebbero chiamati tutti i nostri metodi pubblici.
Dobbiamo fornire un altro metodo controllato / eseguito dalla fabbrica di widget; abbiamo visto prima come uno sviluppatore potrebbe modificare un'opzione configurabile prima dell'inizializzazione, ma che dire dopo l'inizializzazione? Questo è fatto usando il opzione metodo usando la seguente sintassi: $ ("element_caption_attached_to"). captionator ("option", "location", "top"); quindi dobbiamo aggiungere il metodo integrato _setOption per gestire questo:
_setOption: function (option, value) $ .Widget.prototype._setOption.apply (this, arguments); var el = this.element, cap = el.next (), capHeight = cap.outerHeight () - parseInt (cap.css ("paddingTop")) + parseInt (cap.css ("paddingBottom")); switch (opzione) case "location": (valore === "top")? cap.css ("top", el.offset (). top): cap.css ("top", el.offset (). top + el.height () - capHeight); rompere; case "color": el.next (). css ("color", value); rompere; case "backgroundColor": el.next (). css ("backgroundColor", valore); rompere; Iniziamo questo metodo con un trattino basso perché l'implementatore usa opzione, non _setOption per cambiare effettivamente le opzioni; non dobbiamo preoccuparci di come questo viene gestito, dobbiamo solo fornire questo metodo per gestire qualsiasi cosa specifica al nostro plugin. Poiché questo metodo esiste già nella fabbrica di widget dovremmo chiamare il metodo originale, che facciamo prima di tutto nel nostro metodo usando il prototipo del widget oggetto, specificando il nome del metodo (_setOption in questo caso, ma potremmo farlo anche per altri metodi incorporati) e utilizzare applicare chiamarlo Possiamo quindi procedere con il codice specifico del nostro plugin.
La funzione riceverà automaticamente due argomenti che sono l'opzione per cambiare e il nuovo valore. Memorizziamo in cache alcuni elementi comunemente usati, come l'immagine e la didascalia, e otteniamo l'altezza corrente di ogni didascalia. Quindi usiamo una semplice istruzione switch-case per gestire ognuna delle nostre tre opzioni modificate. Il riposizionamento delle didascalie è il più complesso, ma è ancora piuttosto banale e simile a come li abbiamo posizionati inizialmente.
È importante aggiungere eventi che gli sviluppatori che utilizzano il plug-in possono aggiungere callback in modo che possano reagire a cose diverse che accadono quando gli utenti interagiscono con il widget in qualche modo. La fabbrica di widget gestisce la maggior parte di questa attività per noi, tutto ciò che dobbiamo fare è attivare l'evento. Questo plugin in realtà non fa molto, ma potremmo comunque attivare un evento dopo che ciascuna didascalia è stata aggiunta alla pagina; per fare ciò aggiungi il seguente codice direttamente prima del gestore di eventi di ridimensionamento:
self._trigger ("added", null, cap); Questo è tutto ciò che dobbiamo fare! Una singola riga di codice e abbiamo un evento personalizzato a cui è possibile rispondere. Chiamiamo il _trigger () metodo dell'istanza del plugin (che abbiamo archiviato nella variabile se stesso) e passare il metodo tre argomenti; il primo è il nome dell'evento, il secondo è per l'oggetto evento (non è necessario utilizzarlo nel nostro plugin di esempio, da qui il nullo valore) e il terzo è un riferimento all'elemento didascalia. Il factory dei widget passerà automaticamente l'oggetto evento (se fornito) ei dati che passiamo nel terzo parametro a una funzione di callback che utilizza l'evento aggiunto. Uno sviluppatore potrebbe collegarsi a questo evento usando la seguente sintassi: $ ("element_caption_attached_to"). captionator (aggiunto: function (e, ui) // do stuff);
Abbiamo solo bisogno di un foglio di stile molto piccolo per il nostro plugin, letteralmente abbiamo solo tre stili. Non vale quasi nemmeno la pena creare un file separato per gli stili! Ma lo faremo, quindi crea un nuovo file chiamato ui.captionator.css, che è il formato richiesto per i fogli di stile del plugin e salvalo nel css directory. Aggiungi i seguenti stili:
.ui-caption display: none; position: absolute; padding: 10px;
Questo è tutto ciò che c'è da fare. Il nostro plugin ora è funzionalmente e visivamente completo. Le didascalie dovrebbero apparire in questo modo:
Come il metodo di creazione dei plugin di jQuery fn.extend (), jQuery UI ha anche un proprio meccanismo che consente agli sviluppatori di scrivere in modo rapido e semplice plug-in robusti e scalabili che soddisfano gli elevati standard dei progetti dell'interfaccia utente di jQuery, sebbene in termini di ciò che effettivamente fa per noi, è ancora meglio jQuery. La fabbrica di widget è stata creata in modo tale che praticamente tutto il duro lavoro viene sottratto alla creazione di plugin personalizzati.
È facile lavorare con i metodi forniti dalla fabbrica di widget per aggiungere metodi ai nostri plug-in comuni in tutti i widget dell'interfaccia utente, come ad esempio distruggere e opzione metodi, che gli sviluppatori di implementazione si aspettano di trovare in qualsiasi plug-in. Abbiamo anche visto quanto sia facile attivare eventi personalizzati che gli sviluppatori possono utilizzare per reagire alle interazioni o alle occorrenze con il widget.
