Share
Du kanske tänker på dig själv, "Vad är allt väsen med jQuery? Du måste ladda ner en massa plugins för att till och med göra biblioteket värt ett tag.". För det första är det inte sant. För det andra var jQuery-biblioteket speciellt utformat för detta ändamål. Genom att hålla kärnbiblioteket så litet som möjligt - ca 16 kb - kan användarna sedan lägga till ytterligare plugins efter eget gottfinnande. Idag lär jag dig hur du bygger ditt första "Center" -plugin från början. Låt oss börja!
Vi vill skapa ett plugin som dynamiskt anpassar stilen för ett specificerat element för att hålla det vertikalt och horisontellt centrerat på sidan hela tiden - även när webbläsarfönstret ändras. Mycket lite krävs på framsidan. Du behöver bara se till att du har hämtat jQuery-biblioteket.
Det första steget när du skapar ett plugin är att lägga till en tom Javascript-fil. Namngivningskonventioner anger att filen ska kallas "YourPluginName.jQuery.js". När du har skapat den här filen, se till att du skapar en referens till den i ditt dokument.
Därefter klistra in i följande kod.
Accentsconagua
(funktion () changeCss (); $ (fönster) .bind ("resize", function () changeCss ();); funktionsbyteCss () var imageHeight = $ (element) .höjd (); var imageWidth = $ (element) .bredd (); var windowWidth = $ (fönster) .bredd (); var windowHeight = $ (fönster) .höjd (); $ (element) .css ("position": "absolut", "vänster": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2 );;);;) (jQuery); Jag går in i mycket större detalj i videon, men jag skulle fortfarande vilja gå över några viktiga punkter. Varje gång du skapar ett plugin måste det vara inslaget med:
$ .fn.center = funktion () ;
"Center" ska ersättas med vad ditt plugin namn är. Detta låter jQuery veta att du utökar sina metoder. Nu, även om det inte gör någonting, kan vi ringa vår centrala metod med:
$ (funktion () $ ("# someElement"). center ();); Du måste förstå hur man manuellt centrerar en bild på en sida innan du skapar plugin. Först måste ditt element vara helt placerat. Annars kommer det uppenbarligen inte att springa när vi ändrar värdena "vänster" och "topp". Därefter måste bilden flyttas 50% av webbläsarens bredd till vänster. För att kompensera för bildens bredd måste vi äntligen subtrahera hälften av bildens bredd.
funktion changeCss () var imageHeight = $ (element) .height (); var imageWidth = $ (element) .width (); var windowWidth = $ (fönster) .width (); var windowHeight = $ (fönster) .höjd (); $ (element) .css ("position": "absolut", "vänster": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2); ; Detta placerar perfekt mitt i bilden på mitten av sidan. Det är lite svårt att förklara med texten. Var noga med att titta på videon för en större förklaring.
När vi fortsätter måste vi skapa en lyssnare för när webbläsarfönstret ändras.
$ (fönster) .bind ("resize", funktion () changeCss ();); "ChangeCss ()" är en funktion som anpassar bildens vänstra och översta värden. Genom att ringa det igen när fönstret ändras, kommer jQuery att rekalulera dessa värden.
Om du har några frågor, var god att lämna en kommentar och jag kommer att se till att jag svarar. Som alltid kan det här inte vara "verkligt världsklar". Vad händer om användaren har Javascript avstängd? Och det finns naturligtvis några sätt att göra det här med ren CSS - men jag avviker.
Det borde göra det! Screencasten kommer också att sökas på ITUNES under de närmaste tjugo fyra timmarna.
