Índice

Diseñar un plug-in jQuery

1. Aspectos teóricos

La escritura de un plug-in jQuery pasa por etapas concretas y hay que respetar determinadas reglas precisas.

El plug-in jQuery adquiere la forma de un archivo JavaScript externo (extensión .js) que se ubica inmediatamente después de la etiqueta de llamada de jQuery (consulte la sección Usar un plug-in jQuery en este capítulo):

<script src="jquery.js"></script>

Asignar un nombre al plug-in

Un plug-in siempre se debe nombrar con el formato jquery.nombre_del_plug-in.js. De esta manera, se identifica inmediatamente.

Aislar el código

En este nuevo archivo js, hay que englobar el código del plug-in en una función anónima. De esta manera, todas las variables del plug-in no entrarán en conflicto con las de otros scripts de la página.

(function () { 
    // código jQuery 
}) ()

Pasamos la variable jQuery usando su alias $ a esta función, lo que permitirá usar la variable $ dentro de ella.

(function ($) { 
    // código jQuery 
}) ()

Añadir el nuevo método a jQuery

Casi estamos preparados para escribir nuestro plug-in. Hay que añadir este nuevo método a los objetos jQuery usando la instrucción $.fn.nombre_del_plug-in. En esta función, la palabra clave this representará al objeto jQuery seleccionado por el usuario del plug-in.

(function($) { 
    $.fn.nombre_del_plugin = function () { 
    ...