Share
Je zou bij jezelf kunnen denken: "Wat is het gedoe met jQuery? Je moet een aantal plug-ins downloaden om zelfs de bibliotheek de moeite waard te maken.". Ten eerste is dat niet waar. Ten tweede was de jQuery-bibliotheek specifiek voor dat doel ontworpen. Door de kernbibliotheek zo klein mogelijk te houden - ongeveer 16 kb - kunnen gebruikers naar eigen inzicht extra plug-ins toepassen. Vandaag zal ik je leren om je eerste "Centre" -plug-in helemaal zelf te bouwen. Laten we beginnen!
We willen een plug-in maken die de stijl van een gespecificeerd element dynamisch aanpast om het te allen tijde verticaal en horizontaal gecentreerd op de pagina te houden, zelfs wanneer het formaat van het browservenster wordt gewijzigd. Er is heel weinig van tevoren nodig. U hoeft alleen maar te controleren of u de jQuery-bibliotheek hebt gedownload.
De eerste stap bij het maken van een plug-in is om een leeg Javascript-bestand toe te voegen. Naamconventies geven aan dat het bestand de naam "YourPluginName.jQuery.js" moet hebben. Nadat u dit bestand hebt gemaakt, moet u ervoor zorgen dat u er een verwijzing naar maakt in uw document.
Plak vervolgens de volgende code in.
Accentsconagua
(functie ($) $ .fn.center = function () var element = this; $ (element) .load (function () changeCss (); $ (window). bind ("resize", functie () changeCss ();); function changeCss () var imageHeight = $ (element) .height (); var imageWidth = $ (element) .width (); var windowWidth = $ (window) .width (); var windowHeight = $ (window) .height (); $ (element) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2 );;);;) (jQuery); Ik ga in veel meer detail in de video, maar ik zou nog graag een paar belangrijke punten willen bespreken. Telkens wanneer u een plug-in maakt, moet deze worden ingepakt met:
$ .fn.center = function () ;
"Center" moet worden vervangen door de naam van uw plug-in. Hierdoor weet jQuery dat u de methoden uitbreidt. Nu, hoewel het absoluut niets doet, kunnen we onze centrale methode noemen met:
$ (function () $ ("# someElement"). center ();); U moet begrijpen hoe u handmatig een afbeelding op een pagina centreert voordat u de plug-in maakt. Ten eerste moet je element absoluut gepositioneerd zijn. Anders zal het duidelijk niet wijken als we de "left" - en "top" -waarden wijzigen. Vervolgens moet de afbeelding 50% van de breedte van de browser naar links worden verschoven. Om de breedte van het beeld te compenseren, moeten we tenslotte de helft van de breedte van het beeld aftrekken.
function changeCss () var imageHeight = $ (element) .height (); var imageWidth = $ (element) .width (); var windowWidth = $ (window) .width (); var windowHeight = $ (window) .height (); $ (element) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2); ; Hiermee wordt het midden van de afbeelding perfect in het midden van de pagina geplaatst. Het is een beetje moeilijk om uit te leggen met tekst. Bekijk de video voor meer uitleg.
We moeten doorgaan met het maken van een luisteraar voor wanneer het formaat van het browservenster wordt gewijzigd.
$ (window). bind ("resize", function () changeCss ();); "ChangeCss ()" is een functie die de linker en hoogste waarden van onze afbeelding aanpast. Door het opnieuw te gebruiken wanneer het formaat van het venster wordt gewijzigd, zal jQuery die waarden opnieuw berekenen.
Als u vragen heeft, kunt u een reactie achterlaten en ik zal ervoor zorgen dat ik reageer. Zoals altijd is dit misschien niet "real world ready". Wat gebeurt er als de gebruiker Javascript heeft uitgeschakeld? En natuurlijk zijn er enkele manieren om dit te doen met pure CSS - maar ik dwaal af.
Dat zou het moeten doen! De screencast kan ook worden doorzocht op ITUNES in de komende vierentwintig uur.
