Share
Potresti pensare a te stesso: "Che c'è di tutto questo problema con jQuery? Devi scaricare un sacco di plugin per rendere anche la libreria valida.". Primo, non è vero. In secondo luogo, la libreria jQuery è stata progettata appositamente per questo scopo. Mantenendo la libreria di base il più piccola possibile - circa 16 kb - gli utenti possono quindi applicare plug-in aggiuntivi a loro discrezione. Oggi ti insegnerò come costruire il tuo primo plug-in "Centro" da zero. Iniziamo!
Vogliamo creare un plug-in che modifichi dinamicamente lo stile di un elemento specificato in modo da mantenerlo verticalmente e orizzontalmente centrato sulla pagina in qualsiasi momento, anche quando la finestra del browser viene ridimensionata. Molto poco è richiesto in anticipo. Devi solo assicurarti di avere scaricato la libreria jQuery.
Il primo passo nella creazione di un plugin è aggiungere un file Javascript vuoto. Le convenzioni di denominazione affermano che il file deve essere denominato "YourPluginName.jQuery.js". Una volta creato questo file, assicurati di creare un riferimento ad esso nel tuo documento.
Successivamente, incolla il seguente codice.
Accentsconagua
(function ($) $ .fn.center = function () var element = this; $ (element) .load (function () changeCss (); $ (window) .bind ("ridimensiona", function () changeCss ();); function changeCss () var imageHeight = $ (elemento) .height (); var imageWidth = $ (elemento) .width (); var windowWidth = $ (finestra) .width (); var windowHeight = $ (window) .height (); $ (element) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2 );;);;) (jQuery); Vado nel dettaglio molto più nel video, tuttavia, mi piacerebbe ancora andare oltre alcuni punti chiave. Ogni volta che crei un plug-in, è necessario includerlo con:
$ .fn.center = function () ;
"Center" dovrebbe essere sostituito con qualunque sia il nome del tuo plugin. Ciò consente a jQuery di sapere che stai estendendo i suoi metodi. Ora, sebbene non faccia assolutamente nulla, possiamo chiamare il nostro metodo center con:
$ (function () $ ("# someElement"). center ();); Devi capire come centrare manualmente un'immagine su una pagina prima di creare il plugin. Innanzitutto, il tuo elemento deve essere posizionato assolutamente. Altrimenti, ovviamente non si sposterà quando alteriamo i valori "left" e "top". Successivamente, l'immagine deve essere spostata del 50% della larghezza del browser a sinistra. Infine, per compensare la larghezza dell'immagine, dobbiamo sottrarre metà della larghezza dell'immagine.
function changeCss () var imageHeight = $ (elemento) .height (); var imageWidth = $ (elemento) .width (); var windowWidth = $ (window) .width (); var windowHeight = $ (window) .height (); $ (elemento) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2); ; Questo posizionerà perfettamente il centro dell'immagine al centro della pagina. È un po 'difficile da spiegare con il testo. Assicurati di guardare il video per una spiegazione più ampia.
Proseguendo, dobbiamo creare un listener per quando viene ridimensionata la finestra del browser.
$ (window) .bind ("resize", function () changeCss ();); "ChangeCss ()" è una funzione che regola i valori sinistro e superiore della nostra immagine. Richiamandolo nuovamente quando la finestra viene ridimensionata, jQuery ricalcolerà quei valori.
Se avete domande, non esitate a lasciare un commento e mi assicurerò che risponda. Come sempre, questo potrebbe non essere "pronto per il mondo reale". Cosa succede se l'utente ha disattivato Javascript? E, naturalmente, ci sono alcuni modi per farlo usando puro CSS - ma sto divagando.
Questo dovrebbe farlo! Lo screencast sarà anche ricercabile su ITUNES nelle prossime ventiquattro ore.
