Lær hvordan du lager et jQuery-plugin

Du kan kanskje tenke deg selv, "Hva er alt oppstyret med jQuery? Du må laste ned en gjeng med plugins for å gjøre biblioteket verdt.". For det første er det ikke sant. For det andre var jQuery-biblioteket spesielt utviklet for det spesielle formål. Ved å holde kjernebiblioteket så lite som mulig - ca 16 kb - kan brukerne deretter legge til flere plugins etter eget skjønn. I dag skal jeg lære deg hvordan du bygger ditt første "Senter" -tillegg fra bunnen av. La oss komme i gang!

Vårt mål

Vi ønsker å lage et plugin som dynamisk tilpasser stylingen av et spesifisert element for å holde det vertikalt og horisontalt sentrert på siden til enhver tid - selv når nettleservinduet er endret. Svært lite kreves opp foran. Du trenger bare å forsikre deg om at du har lastet ned jQuery-biblioteket.

The Screencast

Trinn 1

Det første trinnet når du lager et plugin, er å legge til en tom Javascript-fil. Navngivningskonvensjoner angir at filen skal bli kalt "YourPluginName.jQuery.js". Når du har opprettet denne filen, må du sørge for at du oppretter en referanse til den i dokumentet.

Steg 2

Deretter lim inn i følgende kode.

 (funksjon () changeCss (); $ (vindu) .bind ("resize", funksjon () changeCss ();); funksjonsendringCss () var imageHeight = $ (element) .height (); var imageWidth = $ (element) .width (); var windowWidth = $ (vindu) .bredde windowHeight = $ (window) .height (); $ (element) .css ("posisjon": "absolutt", "venstre": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2 );;);;) (jQuery);

Jeg går inn i mye større detalj i videoen, men jeg vil fortsatt gå over noen få viktige punkter. Hver gang du lager et plugin, må det pakkes inn med:

 $ .fn.center = funksjon () ;

"Senter" bør erstattes med det navnet ditt er pluginets navn. Dette lar jQuery vite at du utvider sine metoder. Nå, selv om det gjør absolutt ingenting, kan vi ringe vår sentermetode med:

 $ (funksjon () $ ("# someElement"). senter (););

Trinn 3

Du må forstå hvordan du manuelt senterer et bilde på en side før du lager pluginet. Først må elementet ditt plasseres helt. Ellers vil det åpenbart ikke sprenge når vi endrer "venstre" og "topp" -verdiene. Deretter må bildet flyttes 50% av nettleserens bredde til venstre. Til slutt, for å kompensere for bildens bredde, må vi trekke en halvdel av bildens bredde.

 funksjon changeCss () var imageHeight = $ (element) .height (); var imageWidth = $ (element) .width (); var windowWidth = $ (vindu) .bredde (); var windowHeight = $ (vindu) .height (); $ (element) .css ("posisjon": "absolutt", "venstre": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2); ;

Dette plasserer perfekt midten av bildet i midten av siden. Det er litt vanskelig å forklare med tekst. Pass på å se videoen for en større forklaring.

Trinn 4

Ved å fortsette, må vi opprette en lytter for når nettleservinduet endres.

 $ (vindu) .bind ("resize", funksjon () changeCss (););

"ChangeCss ()" er en funksjon som justerer venstre og toppverdier av bildet vårt. Ved å ringe det igjen når vinduet blir endret, vil jQuery rekalulere disse verdiene.

Du er ferdig!

Hvis du har noen spørsmål, vær så snill å legge igjen en kommentar, og jeg vil sørge for at jeg svarer. Som alltid kan dette ikke være "ekte verden klar". Hva skjer hvis brukeren har Javascript slått av? Og selvfølgelig er det noen måter å gjøre dette ved hjelp av rent CSS - men jeg går ut.

Abonner på Weekly Screencasts

1. Når ITUNES har lastet, klikket du på "Avansert fan"
2. Velg "Abonner på podcast"
3. Skriv inn "http://feeds.feedburner.com/NETTUTSVideos"

Det burde gjøre det! Screencast vil også bli søkbar på ITUNES i de neste tjuefire timer.

• Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.