Cómo crear un plugin en jQuery

Hoy construiremos un plugin en jQuery, por supuesto iremos paso a paso y si no has construido nunca ninguno al final del tutorial te aseguro que podrás. ¿Empezamos?

¿Para qué sirve un plugin de jQuery?

Antes que nada, tenemos que saber para qué nos sirve hacer un plugin y por qué tiene ventajas sobre hacer un par de funciones, por ejemplo. Lo primero que debemos recordar es que plug in significa conectar, es decir, haremos algo que luego podremos conectar a distintos sitios.

Teniendo esto en mente, nos podemos imaginar el plugin como una caja negra, que hará algo y nos devolverá el resultado (o realizará una acción simplemente).

Por tanto un plugin tendrá la posibilidad de aceptar una entrada y producir un resultado, y esta “caja” que se ve en el esquema se podrá llevar a cualquier proyecto, sin ninguna modificación, aceptando allí otra salida. Esa es la clave de los plugin, que son reutilizables en cualquier sitio, sin tener que preocuparnos por cómo está hecho ni siquiera, simplemente “conectándolo” e invocándolo con datos de entrada.

Además, la invocación de este plugin será la misma que hacemos cuando usamos cualquier método de jQuery:

$('#caja').acortar( ); //acortar será el nombre del plugin

Nuestro primer plugin

Qué vamos a hacer

Este plugin reducirá el texto en una caja, y con un click en un enlace lo expandirá. Así de simple, aunque como veremos después la implementación va a ser un pelín más larga de lo que debería para ser nuestro primer plugin, pero sin problema, poco a poco lo haremos. Si te quedan dudas sobre qué vamos a hacer tienes un enlace al demo aquí y al final del post.

Primeros pasos al construir un plugin

Cuando se construye un plugin hay una serie de pasos generales, que se hacen para todos los plugin que construyamos y que son los siguientes:

Declaración del plugin

El primer paso al hacer un plugin es declararlo, extender la serie de métodos que tiene jQuery originalmente. Para ello escribimos lo siguiente:

1
2
3
4
5
6

(function($){
  $.fn.acortar = function() {
     return this.each(function() {
     });
  };
})(jQuery);

Línea 1. Pasamos a nuestra declaración “jQuery”, el objeto, de tal forma que lo podemos usar como $, sin que interfiera con otras librerías.

Línea 2. Extendemos el objeto jQuery con nuevo método llamado acortar.

Línea 3. Recorremos todos los objetos que se le pasen a nuestro plugin. Recordemos que un selector puede seleccionar varios elementos, como todos los h1, por ejemplo. Aquí los recorremos y aplicamos la función que hagamos en nuestro plugin a cada uno de ellos.

Esto lo vamos a tener que hacer para todos los plugins que programemos, así que intenta entederlo bien. Lógicamente, cambiaremos el nombre dependiendo del plugin, en este caso lo llamaremos “acortar”.

Parámetros que aceptaremos como opciones del plugin

Casi todos los plugin tienen opciones, si estamos realizando un plugin que acorte el texto de una caja para que no se vea tan grande algunos parámetros que tenemos que permitir configurar al usuario pueden ser los siguientes:

• nCaracteres: Número de caracteres a mostrar. Ocultaremos el resto.
• nExtra: Para evitar acortar un texto sólo por unos caracteres. El número exacto es este parámetro.
• textoSuspense: String que se mostrará para hacer notar que hay más texto.
• textoContraer: Texto mostrado como link para contraer.
• linkExpandir: Texto mostrado como link para expandir

Así el usuario podrá personalizar el plugin sin tener que preocuparse de cómo está hecho por dentro. Empecemos por procesar la entrada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(function($){
  $.fn.acortar = function(opciones) {
 
	var parametrosPorDefecto = {
	  nCaracteres: 300,
	  nExtra: 20,
	  textoSuspense: '...',
	  textoContraer: 'Contrae',
	  linkExpandir: 'Click para Expandir'
	};                   
 
    var opciones = $.extend(parametrosPorDefecto, opciones);
    return this.each(function() {
    });
  };
})(jQuery);

Por tanto cuando tengamos que acceder a uno de los parámetros de entrada haremos, por ejemplo, opciones.nExtra, así de simple.

Copiar el objeto que nos pasan a variable local

Cuando nos metemos en el bucle each, que puedes ver en la última sección de código, estamos procesando todos los elementos que han sido seleccionados al llamar el plugin. En ese preciso momento, cuando empezamos el bucle con un objeto, el objeto seleccionado está en la palabra reservada this, así que debemos guardarlo para referirnos siempre a él y no liarla cuando cambiemos el contexto (scope).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($){
  $.fn.acortar = function(opciones) {
 
	var parametrosPorDefecto = {
	  nCaracteres: 300,
	  nExtra: 20,
	  textoSuspense: '...',
	  textoContraer: 'Contrae',
	  linkExpandir: 'Click para Expandir'
	};                    
 
    var opciones = $.extend(parametrosPorDefecto, opciones);
 
	return this.each(function() {         
	  objeto = $(this);  
    });
  };
})(jQuery);

Implementando nuestro plugin

Bien, ya tenemos lo que queremos hacer, qué vamos a permitirle al usuario y cómo declarar el plugin. Empecemos ahora a implementar la funcionalidad en sí de éste. Esto por supuesto es propio de cada uno, así que intentaré no pararme demasiado en esta parte, porque, al fin y al cabo, ya sabemos crear un plugin genérico y la dificultad del resto dependerá de lo que queramos hacer.

Procesar texto

En este punto necesitamos ver si realmente tenemos que acortar el texto porque sobrepasa lo permitido (dado por el parámetro nCaracteres) y si es así ejecutamos toda la funcionalidad del plugin. A partir de aquí consideremos que estamos dentro del bucle que hemos mencionado antes (a partir de la línea 12 del último código). Veremos hasta los puntos suspensivos, dónde empezaremos en el siguiente punto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var texto = objeto.html();
var longitudPermitida = opciones.nCaracteres + opciones.nExtra;
 
//Si tenemos un texto más corto no tenemos que hacer nada
if (texto.length > longitudPermitida) {
  var lugarCorte = texto.indexOf(' ', opciones.nCaracteres);
  if (lugarCorte != -1) {
    //Sacamos el texto hasta el lugar de corte
    var str1 = texto.substring(0,lugarCorte); 
 
	//Sacamos el resto del texto, que vamos a esconder
  	var str2 = texto.substring(lugarCorte,texto.length - 1);
 
	//Por último insertamos el enlace para ver más texto
	objeto.html(str1 + '<a href="#" class="textoSuspense">' + 
				opciones.textoSuspense + '</a>' + 
				'<span class="oculto">' + str2 + '</span>');
 
	//Ocultamos el resto con el método hide de jQuery
	$.find('.oculto').hide('fast'); 
 
	//Enlace para expandir o contraer el texto
    objeto.append(
	  '<div class="clearboth">' +
	    '<a href="#" class="anchorTexto">' + opciones.linkExpandir + '</a>' +
	  '</div>'
    );                                                                                      
//...
}

Ahora, sigamos en el siguiente apartado por donde están los puntos suspensivos (ya queda poco).

Manejando el evento onClick para ampliar o reducir el texto

Lo que falta por hacer es manejar que cuando se le da al link para ver más efectivamente se vea el resto del texto, además de que el texto se oculte. Hagamos esto entonces:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// ... Lo anterior ...
 
var ControlLink = $('.anchorTexto', objeto);
var restoTexto = $('.oculto', objeto);
var suspense = $('.textoSuspense', objeto);
 
ControlLink.click(function() {
  if(ControlLink.text() == opciones.linkExpandir) {
    restoTexto.show('normal');
    ControlLink.text(opciones.textoContraer);
    suspense.css("display", "none");
  } else {
    restoTexto.hide('normal');
    ControlLink.text(opciones.linkExpandir);
    suspense.css("display", "inline");
  }
  return false;
}); 
 
// ... Cierre de llaves abiertas antes....

En esta última parte vemos si tenemos el texto oculto o no. Y si está abierto cambiamos el texto al hacer click y lo ocultamos. Y viceveras si es al revés. Recuerda que estamos controlando el evento click en el enlace para expandir o contraer el texto, simplemento eso.

Recapitulación

Y eso es todo, hemos creado nuestro plugin que realmente funciona haciendo algo y además es configurable hasta cierto punto. Para llamarlo (puedes ver el código en el ejemplo) haremos lo siguiente, como hemos dicho al principio:

<script type="text/javascript" language="Javascript">
  $('#1').acortar({
  	nCaracteres: 300,
  	nExtra: 20,
  	textoSuspense: '...',
  	textoContraer: 'Contrae',
  	linkExpandir: 'Click para Expandir'
  });
</script>

Estos son los parámetros por defecto, por tanto si se los pasamos no pasa nada, pero es sólo un ejemplo, puedes pasarle otros.

Conclusiones

Por último destacar que lo más importante es que te quedes con cómo se construye cualquier plugin, más que con la implementación en concreto que hemos realizado. Aquí dejo los sitios que han ayudado a este post, sobre todo el de Jeremy Martin, de donde he sacado la idea del plugin y lo he modificada y separado para que sea más entendible.

• Blog de Jeremy Martin | Plugin original.
• Explicación del Core de jQuery | Documentación oficial.
• Autor de la “caja” | DevianArt