Cargando

Ir a contenido


 


Cómo crear plugins con el framework jQuery

El framework jQuery es una de las librerías de Javascript mas utilizadas para el desarrollo de web, que sin duda se caracteriza por las funciones y eventos que implementa en este lenguaje, haciendo un marco de trabajo más preciso para quienes programan en él.


Escrito por el sep 14 2013 12:06 framework jquery plugin jquery


jQuery nos proporciona mucha fexibilidad para escribir codigo y es tan sencillo que se puede utilizar incluso con pocos conocimientos y podemos realizar grandes proyectos ahorrando mucho tiempo.

Una de las posibilidades de Jquery es que nos permite extenderlo para así poder crear nuevas funciones en este framework. Es buena idea optar por desarrollar plugins que sean de gran utilidad para nuestras aplicaciones web y poder reutilizarlas luego o compartirlas con la comunidad.


Desarrollo de un plugin Jquery

La estructura básica de un plugin es la siguiente

jQuery.fn.extend({ 
  [b]miplugin[/b]: function([b]parametro[/b]) {	    		
	  // codigo del plugin
    } 
});

Los parámetros son opcionales. Vamos a crear unos ejemplos para entender como se programa un plugin
Plugin que devuelva un mensaje si se hizo clic en un elemento boton, caja de texto, enlace, etc.
Escribimos el siguiente código en un archivo plugin.js

jQuery.fn.extend({
 enviar: function(mensaje) {	      //defino la función enviar y el parametro mensaje
 $(this).click(function(){			 // si la función fue activada por un clic
 alert(mensaje);				   //mostrar el mensaje
 });
 }
});


Creamos un estrutura o pagina html que contenga un boton por ejemplo enviar

<html>
<head>
<script src="[url="http://code.jquery.com/jquery-1.10.2.js"]http://code.jquery.com/jquery-1.10.2.js[/url]"></script>  //invocamos la librería jquery
<script src="./jquery.miplugin.js"></script>		 					   //invocamos el plugin

<script>			  
$(document).on("ready", function(){									 //iniciar funciones para que estén disponibles
$('#enviar').enviar("Datos enviados”);						   //elemento id enviar asigno la función y el parámetro
});
</script>
</head>
<body>
 <div id="contenido">
 <button id="enviar">Enviar</button>
</div>
</body>
</html>

Guardamos el html y al ejecutar desde el navegador damos un clic en el botón y veremos que la función jquery despliega un mensaje.


Creamos otro plugin puede sert en el mismo archivo js o en otro si queremos plugin separados.
En este caso sera para modificar el aspecto css de un boton al se pulsado, cambiaremos el color del texto y el fondo.

jQuery.fn.extend({ 
    cambiarfondo: function(fondo,texto) {	    		  						 // función y parámetros
    $(this).click(function(){	   		   		    										//si se accedió desde un clic
		    jQuery(this).css("background-color", fondo);				   //cambiar el color del fondo
		    jQuery(this).css("color", texto);										 //cambiar el color del texto
	    }); 
    } 
});


Luego nos queda escribir el código html del elemento en este caso un botón cuyo id sera fondo

<button id="fondo">Cambiar color</button>


Debemos también iniciarlizar la función, nos quedaría con las dos funciones

<script>			  
$(document).on("ready", function(){									 //iniciar funciones para que estén disponibles
$('#fondo').enviar("Datos enviados”);						   //elemento id enviar asigno la función y el parámetro
$('#fondo').cambiarfondo('#666','#fff');			  		  //cambiar fondo a color gris 40% y blanco
});
</script>

Al hacer clic en el botón cambiar color vemos que se aplican los cambios css.


En este sentido podemos realizar cambios y asignarle funcionalidades a cualquier elemento html, como por ejemplo en el html creamos un div vació con el id mensaje:

<div id="mensaje"></div>

Luego en el plugin enviar cambiamos

alert(mensaje)

por el siguiente código que publicara un mensaje dentro del div al pulsar el botón

$("#mensaje").html("<strong>Datos enviado</strong>");


Al hacer clic en el boton enviar en lugar de el cuadro de dialogo ahora el mensaje se escribe en el div.

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 14 2013 12:06
  •   Visitas 1.8K
  •   Nivel
    Profesional



Tutoriales Relacionados


1 Comentarios

Excelente tutorial, pero en caso de que necesite hacer funciones al momento de hacer scroll ¿Cómo lo haría?
Un ejemplo, tiene una serie de imagenes que están regadas por diferentes partes de la web y necesita saber en que posición están, entonces al hacer scroll y llegar a su posicion hacer un evento... Suena un poco alocado, y es posible con funciones, pero en un plugin me resulta un poco difícil para elaborar...
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse