Cómo crear un complemento jquery personalizado
jQuery, es posible que a menudo reescribas el mismo código para algunas funciones de uso común. Si este es el caso, probablemente sea por eso que necesita escribir un complemento jQuery personalizado.
Los complementos de jQuery le permiten ampliar la biblioteca jQuery con código personalizado; puede utilizar complementos para implementar funciones repetitivas. Por ejemplo, hay muchos complementos disponibles para presentaciones de diapositivas, menús desplegables y menús de acordeón. Si busca complementos de jQuery, encontrará toneladas de ejemplos que puede usar en sus propios proyectos (vea cómo se crean).
Preparación
Comprensión básica de JavaScript, jQuery y CSS. (El código fuente y los ejemplos utilizados se encuentran al final de este artículo)
Comenzar
jQuery es una biblioteca que amplía el lenguaje JavaScript. Cuando creas un complemento jQuery, básicamente estás ampliando la biblioteca jQuery
. Para comprender realmente cómo los complementos amplían la biblioteca jQuery, necesita una comprensión básica de las propiedades del prototipo de JavaScript.
Aunque las propiedades del prototipo de JavaScript no se pueden usar directamente, se pueden usar detrás de escena a través del atributo jQuery fn, que es el alias jQuery de la propiedad del prototipo nativo de JavaScript
.
Para crear un nuevo complemento jQuery usando el atributo fn, simplemente especifique un nombre de complemento para el atributo fn y apúntelo a una nueva función como constructor, que es lo mismo que puro
JavaScript es similar. El Código 1 muestra cómo definir un nuevo complemento jQuery llamado acordeón usando el objeto jQuery y la propiedad
fn, y asignándolo a un nuevo constructor.
Código 1: Definir un nuevo complemento jQuery llamado acordeón
jQuery.fn.accordion = function() {
// Agregar complemento aquí Código
};
El código 1 muestra una forma de crear un complemento jQuery; el ejemplo no hace mucho. El código 1 muestra una forma de crear un complemento jQuery; no hay problemas funcionales con este ejemplo. Sin embargo, la forma recomendada de crear un complemento jQuery
es crear primero una función contenedora que permita el uso del signo de dólar ($). El signo de dólar puede entrar en conflicto con otros marcos de JavaScript
de forma predeterminada, pero no entrará en conflicto si el complemento está incluido en una función. El código de muestra en el Listado 2 muestra cómo aplicar una función contenedora a una definición de complemento jQuery
.
(function($) {
$.fn.accordion = function() {
// Agregue el código del complemento aquí
};
})(jQuery);
En el código 2, la palabra clave jQuery se aplica a la función contenedora para que pueda usar el signo de dólar en el complemento, como Igual que cuando se utiliza el atributo fn
. Una vez que la función contenedora esté lista, el signo de dólar se puede utilizar en lugar de la palabra clave jQuery
en cualquier lugar del complemento sin interferir con otros complementos de terceros.
Esta opción proporciona una manera de reducir la cantidad de código que escribe al desarrollar el complemento completo y ayuda a que el código del complemento se mantenga limpio y fácil de mantener.
Mantener la vinculabilidad
Una de las ventajas de jQuery es que permite utilizar cualquier tipo de selector. Sin embargo, es importante recordar que su complemento puede manejar muchos tipos de elementos diferentes. Utilice la palabra clave this
para aplicar su complemento a una función relacionada, recorriendo cada elemento independientemente del tipo de elemento. Si usa la palabra clave return
antes de cada bucle, puede usar un complemento para mantener la vinculabilidad. El Listado 3 muestra cada bucle asignado a un controlador de función combinado con la palabra clave return.
Código 3. Utilice la palabra clave return antes de cada bucle
(function($) {
$.fn.accordion = function() {
p>
devuelve esto. use return
});
}
})(jQuery);
Pass El código del Listado 3 se puede utilizar en la cadena de llamadas al método utilizando el complemento de acordeón de ejemplo. Aprovechando la capacidad de cadena (otra poderosa característica de jQuery
), su complemento se puede usar dentro de una cadena de llamadas a métodos. Por ejemplo, el siguiente código muestra cómo atenuar un elemento HTML y eliminarlo del modelo de objetos de documento (DOM)
en una única cadena de llamadas a métodos.
$("#my-div").fadeOut().remove();
Construyendo un acordeón
Un diseño en cascada típico consta de un título barra y composición del área de contenido relacionada. Una lista de definiciones es una buena estructura HTML para un acordeón; el elemento dt se usa para el título y el elemento dd para el área de contenido. La estructura HTML del Listado 4 es una lista de definiciones que contiene cuatro encabezados y sus áreas de contenido correspondientes.
Código 4. Cadena de llamadas a método único
lt; dl class="accordion" id="my-accordion"gt
lt; 1lt;/dtgt;
lt;ddgt;Contenido 1lt;/ddgt;
lt;dtgt; Parte 2lt;/dtgt;
lt;ddgt; Contenido IIlt;/ddgt;
lt;dtgt;La tercera partelt;/dtgt;
lt;ddgt; Contenido treslt;/ddgt;
lt; dtgt; Parte 4lt;/dtgt;
lt;ddgt; Contenido 4lt;/ddgt;
lt;/dlgt;
Código La lista definida en 4 También se le asigna una clase CSS llamada acordeón. Sin ningún CSS aplicado, esta estructura de acordeón se parece al diseño básico de la Figura 1
Por motivos estéticos, modifiquemos el HTML en el Código 4 nuevamente y le llamaremos "jquery. acordeon.css"
Código 5.
Sección CSS
.acordeón {
ancho: 500px;
borde: 1px sólido #ccc
borde inferior: ninguno;
familia de fuentes: Arial, Helvetica, sans-sans-sans-sans-sans.css
Sección CSS
. Helvética, sans-serif;
tamaño de fuente: 12px;
}
.acordeón dt,
.acordeón dd {
borde inferior: 1px sólido #ccc;
margen: 0px;
}
.acordeón dt {
fondo: #eaeaea;
cursor: puntero
relleno: 8px 4px;
tamaño de fuente.13px; negrita;
}
.accordion dd {
padding: 12px 8px
}
El efecto es el siguiente que se muestra aquí:
Complemento personalizado
Para crear un acordeón potente, debe aplicar código personalizado a la función utilizada para crear el complemento jQuery en la sección anterior. . acordeón
El complemento comienza recorriendo todos los acordeones definidos. Para definir un acordeón, utilice el siguiente archivo jQuery
.
$('dl#my-accordion').accordion();
Para cada acordeón , puede acceder a la subcarpeta asociada utilizando el método secundario de jQuery para acceder al título definido asociado y devolver una matriz o un elemento dt.
El evento click se aplicará al elemento dt y se aplicará un método llamado reset a cada dt. El método reset colapsa todos los elementos dd
cuando se carga el acordeón por primera vez. Cuando hace clic en el elemento dt o en la barra de título, el evento de clic activa un método personalizado llamado onClick. Método onClick personalizado para buscar todos los elementos dt en el acordeón
. Llama a un método de ocultación personalizado que oculta cada elemento dd relacionado utilizando el siguiente método para encontrar el elemento dd
junto al elemento dt. Luego, deslice hacia arriba para activarlo.
Después de ocultar todos los elementos dd, puede usar el método slideDown para ver el elemento dd asociado con el elemento dt en el que se hizo clic y crear una animación de acercamiento y alejamiento, como se muestra en el Listado 8
Mostrar. La última línea de código en el método onClick debe devolver falso, lo que garantizará que las barras de temas en las que se haga clic no mostrarán su comportamiento normal. Por ejemplo, si utiliza el elemento ancla
como barra de título, es posible que desee realizar un retorno falso para que el usuario no sea dirigido a otra página o parte de una página existente.
Código 6. Personaliza la función de acordeón utilizada para crear complementos jQuery
(function($) {
$.fn.accordion = function(options ) {
return this.each( function() {
var dts = $(this).children('dt');
dts.click ( onClick);
dts.each(reset);
});
función onClick() {
$(esto). ) .siblings('dt').each(hide);
$(this).next().slideDown('fast');
Devuelve falso;
}
función ocultar() {
$(this).next().slideUp('fast'); p >
función reset() {
$(this().next().hide();
}
}
}})(jQuery);
Si el complemento de acordeón está asociado con una estructura de lista definida por HTML (como la que creó anteriormente), se utilizará la funcionalidad de acordeón
Los complementos jQuery pueden contener valores y opciones predeterminados. Puede usar opciones
para enviar un solo parámetro como un objeto literal, que. es una práctica estándar de jQuery, sin pasar múltiples parámetros que admitan opciones, por lo que usar el objeto
defaults es la mejor manera de establecer opciones predeterminadas. Al igual que las opciones, defaults es un objeto
literal. que debe contener los valores que desea pasar al complemento.
Por ejemplo, si admite una propiedad que abre la primera área de contenido del acordeón en la primera carga. una propiedad abierta
en el complemento. El valor predeterminado Use el valor predeterminado para determinar la funcionalidad predeterminada en el complemento, use la opción para anular el valor predeterminado. Si el complemento acepta opciones, puede usar.
Método $.extend para realizar la anulación. El método $.extend de jQuery fusiona dos o más objetos. El ejemplo del Listado 7 muestra la implementación general del uso del método $.extend en un complemento jQuery
personalizado para fusionar opciones definidas por el usuario y opciones predeterminadas.
Código
Código 7. Agregar opciones y valores predeterminados al complemento jQuery de acordeón personalizado
(función($) {
$ .fn.accordion = function(options) {
var settings = $.extend({}, {open: false}, options);
devuelve esto. cada(función() {
var dts = $(this).children('dt');
dts.click (onClick);
dts .each(reset );
if(settings.open) $(this).children('dt: first-child').next().show();
});
function onClick() {
$(this).siblings('dt').each(hide);
$(this) .next() .slideDown('rápido');
devuelve falso
}
función ocultar() {
$ (esto). next().slideUp('fast');
}
función reset() {
$(this).next() .hide() ;
}
}
})(jQuery);
Los parámetros del método $.extend son un objeto de destino y 2 o múltiples objetos fusionados. En este ejemplo, el objeto de destino es un objeto vacío,
que actúa como contenedor de objetos fusionados. El objeto de destino será un objeto único que contiene el valor del objeto combinado (en este caso, la variable de configuración). El segundo parámetro
es un objeto literal que contiene las propiedades predeterminadas del complemento. Para pasar opciones en un elemento HTML utilizando el complemento
acordeón, necesita saber qué propiedades existen además de las pasadas como objetos literales, como se muestra a continuación.
$('dl#my-accordion').accordion({open: true});
En el ejemplo de Código 7, las opciones se pasan al complemento a través de $.extend método Valor predeterminado anulado; si no se pasa ninguna opción, se utiliza el valor predeterminado. Para el complemento de muestra, el atributo open se puede utilizar para determinar si la primera área de contenido se abre al cargar.
Reutilizabilidad
Puedes reutilizar el ejemplo del complemento Accordion en cualquier documento HTML o varias veces en un solo documento HTML. También puedes incluir múltiples estructuras de acordeón
, como las que ya has creado, y definir cada una individualmente a través de jQuery usando el nuevo complemento de acordeón
Accordion. Para agregar múltiples acordeones a un documento HTML, simplemente agregue tantas estructuras de acordeón como sea posible. El código del Listado 8
contiene dos estructuras de acordeón separadas por párrafos.
Código 8. Usar varios acordeones en un mismo documento HTML
lt;dl class="accordion" id="my-accordion"gt;
lt ;dtgt;Parte 1lt;/dtgt;
lt;ddgt;Contenido Ilt;/ddgt;
lt;dtgt;Parte 2lt;/dtgt;
lt;ddgt;Contenido IIlt;/ddgt;
lt;dtgt;Parte 3lt;/dtgt;
lt;ddgt;Contenido IIIlt;
lt; dtgt;Parte 4lt;/dtgt;
lt;ddgt;Contenido IVlt;/ddgt;
lt;/dlgt;
lt;dl class=" acordeón" id ="mi-acordeón"gt;
lt;dtgt;Parte 5lt;/dtgt;
lt;ddgt;Contenido Vdgt;
lt ;dtgt;Parte 6lt;/dtgt;
lt;ddgt;Contenido VIdd gt;
lt;dtgt;Parte 7lt;/dtgt;
lt; ddgt;Contenido VII/ddgt;
lt;/dlgt;
Las dos estructuras de acordeón en Código 8 son casi idénticas, excepto por su contenido y, lo que es más importante, los valores de identificación. también son diferentes. La primera estructura contiene un valor de ID de mi acordeón. La segunda estructura contiene un valor de ID my-accordion2. Estas estructuras ahora pueden guiarse individualmente. Por ejemplo, el siguiente script
jQuery utiliza el nuevo complemento que se ha creado para definir cada estructura de acordeón como acordeón.
$('dl#my-accordion').accordion({open: true});
$('dl#my-accordion2'). Ejemplo de uso de múltiples complementos de acordeón en el mismo documento HTML.