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
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
Creamos un estrutura o pagina html que contenga un boton por ejemplo enviar
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.
Luego nos queda escribir el código html del elemento en este caso un botón cuyo id sera fondo
Debemos también iniciarlizar la función, nos quedaría con las dos funciones
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:
Luego en el plugin enviar cambiamos
por el siguiente código que publicara un mensaje dentro del div al pulsar el botón
Al hacer clic en el boton enviar en lugar de el cuadro de dialogo ahora el mensaje se escribe en el div.
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.
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...