Share
Podrías pensar, "¿Cuál es todo el alboroto con jQuery? Tienes que descargar un montón de complementos para incluso hacer que la biblioteca valga la pena". Primero, eso no es verdad. Segundo, la biblioteca jQuery fue diseñada específicamente para ese propósito. Al mantener la biblioteca central lo más pequeña posible, alrededor de 16 kb, los usuarios pueden aplicar complementos adicionales a su propia discreción. Hoy, te enseñaré cómo crear tu primer plugin "Centro" desde cero. Empecemos!
Queremos crear un complemento que ajuste dinámicamente el estilo de un elemento específico para mantenerlo centrado vertical y horizontalmente en la página en todo momento, incluso cuando se cambia el tamaño de la ventana del navegador. Muy poco se requiere por adelantado. Solo necesitas asegurarte de tener la biblioteca jQuery descargada.
El primer paso para crear un complemento es agregar un archivo Javascript en blanco. Las convenciones de nomenclatura establecen que el archivo debe llamarse "YourPluginName.jQuery.js". Una vez que haya creado este archivo, asegúrese de crear una referencia a él en su documento.
A continuación, pegue el siguiente código.
Accentsconagua
(function ($) $ .fn.center = function () var element = this; $ (element) .load (function () changeCss (); $ (window) .bind ("resize", function () 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); Entro en mucho más detalle en el video, sin embargo, todavía me gustaría repasar algunos puntos clave. Cada vez que crees un complemento, debes envolverlo con:
$ .fn.center = function () ;
"Centro" debe reemplazarse con el nombre de su complemento. Esto le permite a jQuery saber que está extendiendo sus métodos. Ahora, aunque no hace absolutamente nada, podemos llamar a nuestro método central con:
$ (function () $ ("# someElement"). center ();); Debe comprender cómo centrar manualmente una imagen en una página antes de crear el complemento. Primero, tu elemento debe estar posicionado absolutamente. De lo contrario, obviamente no cederá cuando modifiquemos los valores "izquierdo" y "superior". A continuación, la imagen debe desplazarse 50% del ancho del navegador hacia la izquierda. Finalmente, para compensar el ancho de la imagen, necesitamos restar la mitad del ancho de la imagen..
function changeCss () var imageHeight = $ (element) .height (); var imageWidth = $ (element) .width (); var windowWidth = $ (window) .width (); var windowHeight = $ (window) .height (); $ (elemento) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2); ; Esto colocará perfectamente el centro de la imagen en el centro de la página. Es un poco difícil de explicar con texto. Asegúrate de ver el video para una mayor explicación..
Continuando, necesitamos crear un oyente para cuando la ventana del navegador cambie de tamaño.
$ (window) .bind ("resize", function () changeCss ();); "ChangeCss ()" es una función que ajusta los valores superior e izquierdo de nuestra imagen. Al volver a llamarla cuando se cambia el tamaño de la ventana, jQuery recalculará esos valores.
Si tiene alguna pregunta, no dude en dejar un comentario y me aseguraré de que responda. Como siempre, esto podría no estar "listo para el mundo real". ¿Qué pasa si el usuario tiene Javascript desactivado? Y, por supuesto, hay algunas formas de hacerlo utilizando CSS puro, pero estoy divagando.
¡Deberias hacer eso! El screencast también se podrá buscar en ITUNES en las próximas veinticuatro horas.
