sábado, 29 de noviembre de 2014

Por qué son interesantes los options en plugins

La idea que hay detrás de la carga de opciones en los plugins ya la conocemos, que éstos sean más configurables y por lo tanto más versátiles. Pero vamos a intentar dar un ejemplo más claro sobre cómo esas opciones pueden hacer a los plugins más versátiles. 
Imaginemos un plugin para mostrar una caja de diálogo como las que hacemos con jQuery UI. Esas cajas de diálogo permiten mostrar mensajes en una capa emergente. Esa caja podría tener diversos parámetros para configurarla, como su altura, anchura, título de la caja, etc. Todos esos parámetros podríamos enviarlos al dar de alta la caja, con un código como este:}

$("#capa").crearCaja(400, 200, "titulo", ...);

Pero eso no es práctico, porque el usuario debería indicar todos los parámetros para crear la caja, o al menos si no indica unos no podría indicar otros que están detrás en la lista. Luego, en el código del plugin, el desarrollador debería comprobar qué parámetros se indican, uno a uno, y darles valores por defecto si no se han indicado, etc. Todo eso ampliaría demasiado el código fuente. Entonces, lo que se suele hacer al dar de alta el plugin, es indicar una serie de datos con notación de objeto:

$("#capa").crearCaja({
titulo: "titulo",
anchura: 400,
altura: 200,
...
});

El desarrollador del plugin colocará en el código fuente un objeto con las variables de configuración y sus valores por defecto. Luego, cuando se cree el plugin, lo mezclará con el objeto de options enviado por parámetro, con una única sentencia, con lo que obtendrá rápidamente el objeto completo de configuración del plugin que debe ser aplicado.

viernes, 28 de noviembre de 2014

Gestión de opciones en plugins jQuery

Manera de gestionar opciones en los plugins de jQuery, a través de un objeto de options enviado al invocar el plugin, para hacerlos un poco más versátiles y con configuración más fácil. 

Cuando desarrollamos plugins en jQuery debemos atender a una serie de normas básicas para que estén bien creados y puedan funcionar en cualquier ámbito. Pero además tenemos una serie de patrones de desarrollo que debemos seguir de manera opcional para facilitarnos la vida a nosotros mismos y a otros desarrolladores que puedan utilizar nuestros plugins. 
Una de las tareas típicas que realizaremos es la creación de un sistema para cargar opciones con las que configurar el comportamiento de los plugins. 
Estas opciones las recibirá el plugin como parámetro cuando lo invocamos inicialmente. Nosotros, como desarrolladores del plugin, tendremos que definir cuáles van a ser esas opciones de configuración y qué valores tendrán por defecto. 

La ayuda del sitio de jQuery para la creación de plugins sugiere la manera con la que realizar el proceso de configuración del plugin, por medio de un objeto de "options", que nos facilitará bastante la vida.

jueves, 27 de noviembre de 2014

Entendamos el plugin textarea con contador de caracteres - II

El código está comentado para que se pueda entender mejor. Quizás nos pueda llamar más la atención la línea donde se utiliza la función jQuery para generar sobre la marcha un objeto jQuery con el campo DIV con el que vamos a seguir la cuenta. Vemos que a través del método attr() accedemos al value del textarea y con la propiedad length a su longitud en caracteres.

var contador = $('<div>Contador caracteres: ' + elem.attr("value").length + '</div>');
Luego también puede que nos llame la atención el funcionamiento del método data(), que nos permite almacenar y recuperar datos que se guardarán en el propio objeto jQuery de cada textarea.
Así guardo una referencia al objeto con la capa contador en el textarea, en un dato llamado "campocontador".
elem.data("campocontador", contador);
Y con este otro código en el evento recupero esa capa, pues luego en el evento tengo que cambiar el contenido con la cuenta de caracteres actualizada.
var campocontador = elem.data("campocontador");
Una vez creado el plugin, convierto todos los textareas en textareas-contador de caracteres, con este código:
$(document).ready(function(){
$("textarea").cuentaCaracteres();
})

Eso es todo, pero quizás se vea más claro si vemos el código completo del ejemplo.
<html>
<head>
<title>Creando plugins en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
//creo el plugin cuentaCaracteres
jQuery.fn.cuentaCaracteres = function() {
//para cada uno de los elementos del objeto jQuery
this.each(function(){
//creo una variable elem con el elemento actual, suponemos un textarea
elem = $(this);
//creo un elemento DIV sobre la marcha
var contador = $('<div>Contador caracteres: ' + elem.attr("value").length + '</div>');
//inserto el DIV después del elemento textarea
elem.after(contador);
//guardo una referencia al elemento DIV en los datos del objeto jQuery
elem.data("campocontador", contador);
//creo un evento keyup para este elemento actual
elem.keyup(function(){
//creo una variable elem con el elemento actual, suponemos un textarea
var elem = $(this);
//recupero el objeto que tiene el elemento DIV contador asociado al textarea
var campocontador = elem.data("campocontador");
//modifico el texto del contador, para actualizarlo con el número de caracteres escritos
campocontador.text('Contador caracteres: ' + elem.attr("value").length);
});
});
//siempre tengo que devolver this
return this;
};
$(document).ready(function(){
$("textarea").cuentaCaracteres();
})
</script>
</head>
<body>
<form>
<textarea rows=5 cols=30 id="mitextarea">hola</textarea>
<br>
<br>
<textarea rows=5 cols=30 id="otrotextarea">Otra cuenta...</textarea>
</form>
</body>
</html>

martes, 25 de noviembre de 2014

Entendamos el plugin textarea con contador de caracteres - I

Para hacer los textareas que cuenten caracteres nosotros queremos hacer algo como esto en jQuery.

$("textarea").cuentaCaracteres();

Con eso queremos conseguir que a todos los textareas del documento HTML les aparezca una información al lado con el número de caracteres que tenga el textarea escrito dentro. Esa cuenta de caracteres debe mostrarse nada más cargarse la página y actualizarse cuando se escriba algo dentro. Todo eso se automatizará, para que no tengamos que hacer nada, salvo la anterior llamada al plugin. Entonces, dentro del plugin tenemos que hacer varias cosas. 
1. Un bucle con each para recorrer todos los objetos que pueda haber en el objeto jQuery que reciba el método para activar este plugin. Este paso es igual en todos los plugins. 
2. Dentro de ese bucle podemos iterar con todos los elementos que haya en el objeto jQuery, que vamos a suponer son textareas. Vamos a crear un nuevo elemento DIV sobre la macha y vamos a iniciarlo con el texto de la cuenta de caracteres actual del textarea. Ese elemento creado "on the fly" lo añadiremos al cuerpo de la página, justo después de la etiqueta del textarea. 
3. Además, haremos un evento, para que cuando el usuario escriba algo en el textarea, el texto con la cuenta de caracteres se actualice automáticamente.

Estos tres pasos serían un resumen del funcionamiento del plugin, cuyo código completo podemos ver a continuación.
//creo el plugin cuentaCaracteres
jQuery.fn.cuentaCaracteres = function() {
//para cada uno de los elementos del objeto jQuery
this.each(function(){
//creo una variable elem con el elemento actual, suponemos un textarea
elem = $(this);
//creo un elemento DIV sobre la marcha
var contador = $('<div>Contador caracteres: ' + elem.attr("value").length + '</div>');
//inserto el DIV después del elemento textarea
elem.after(contador);
//guardo una referencia al elemento DIV en los datos del objeto jQuery
elem.data("campocontador", contador);
//creo un evento keyup para este elemento actual
elem.keyup(function(){
//creo una variable elem con el elemento actual, suponemos un textarea
var elem = $(this);
//recupero el objeto que tiene el elemento DIV contador asociado al textarea
var campocontador = elem.data("campocontador");
//modifico el texto del contador, para actualizarlo con el número de caracteres escritos
campocontador.text('Contador caracteres: ' + elem.attr("value").length);
});
});
//siempre tengo que devolver this
return this;
};

lunes, 24 de noviembre de 2014

Plugin jQuery: textarea con cuenta de caracteres

Segundo ejemplo de plugin práctico en jQuery para hacer textarea que lleva la cuenta de los caracteres escritos por el usuario. 

Este es un taller práctico sobre jQuery que esperamos sirva para que las personas puedan continuar aprendiendo la manera de crear sus propios plugins. Como ya sabemos, los plugins son una manera óptima de programar tus scripts jQuery, ya que permitirán solucionar sus necesidades y además crear código limpio y reutilizable. En los dos artículos anteriores ya estuvimos hablando de los Plugins en jQuery y de las reglas fundamentales para desarrollarlos. 
También vimos un primer ejemplo de un plugin sencillo, que espero nos haya abierto las miras y dado una idea sobre las posibilidades de construcción de componentes para páginas web. En este artículo continuaremos ofreciendo ejemplos para reforzar lo aprendido y para que las personas puedan familiarizarse aun más con el modo de creación de plugins en jQuery. 
El objetivo del ejemplo que ocupará este artículo es la creación de un plugin para conseguir que un campo textarea de formulario informe en todo momento de caracteres que ha escrito el usuario. Es decir, vamos a hacer un método del objeto jQuery que servirá para decirle a los campos de texto textarea que se expandan para convertirse en un textarea que cuente los caracteres en una capa de texto de al lado. Para tener una idea exacta de nuestros objetivos podemos ver el ejemplo en marcha que vamos a desarrollar.

sábado, 22 de noviembre de 2014

Ejemplo de un plugin en jQuery - II

Dado el código anterior, al abrir la página parpadearán los elementos de la clase "parpadear" y luego habrá un botón que repetirá la acción de parpadear cuando se pulse. 
En este caso no hemos colocado el script en un archivo aparte con el nombre jquery.parpadea.js, tal como se recomendaba, pero de momento será suficiente para probar esto de los plugins y quizás más fácil porque así no necesitamos más que un archivo HTML con todo el código junto. Podemos ver el código completo de este ejemplo a continuación:

<html>
<head>
<title>Creando plugins en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
jQuery.fn.parpadea = function() {
this.each(function(){
elem = $(this);
elem.fadeOut(250, function(){
$(this).fadeIn(250);
});
});
return this;
};
$(document).ready(function(){
//parpadean los elementos de class CSS "parpadear"
$(".parpadear").parpadea();
//añado un evento clic para un botón, para que al pulsarlo parpadeen los elementos de clase
parpadear
$("#botonparpadear").click(function(){
$(".parpadear").parpadea();
})
})
</script>
</head>
<body>
<p class="parpadear">Hola que tal, esto parpadeó gracias a jQuery!</p>
<p>Parafo normal que no va a parpadear.</p>
<p class="parpadear">Sí parpadea</p>
<p>Parafo normal que no va a parpadear tampoco...</p>
<div class="parpadear" style="background-color: #ff9966; padding: 10px;">Esta capa también tiene
la clase parpadear, con lo que ya se sabe...</div>
<p><input type="button" value="Parpadea de nuevo" id="botonparpadear"></p>
</body>
</html>

Nota: Contamos con un taller de JQuery donde recopilamos un conjunto de plugins y mostramos cómo se construyen

viernes, 21 de noviembre de 2014

Ejemplo de un plugin en jQuery - I

Ahora que ya sabemos las reglas básicas para hacer plugins podemos crear uno por nuestra cuenta que nos sirva para practicar lo que hemos aprendido. Te sugiero que identifiques los lugares donde hemos aplicado cada una de las anteriores normas de la lista, o al menos las que se puedan aplicar en este plugin tan simple que vamos a ver.
El plugin que vamos a construir sirve para hacer que los elementos de la página parpadeen, esto es, que desaparezcan y vuelvan a aparecer en un breve instante. Es un ejemplo bien simple, que quizás tenga ya alguna utilidad práctica en tu sitio, para llamar la atención sobre uno o varios elementos de la página. Para hacerlo, utilizaremos otras funciones del framework como fadeOut() (para hacer desaparecer al elemento) y fadeIn() (para que aparezca de nuevo).

jQuery.fn.parpadea = function() {
this.each(function(){
elem = $(this);
elem.fadeOut(250, function(){
$(this).fadeIn(250);
});
});
return this;
};


Con this.each creamos un bucle para cada elemento que pueda haberse seleccionado para invocar el plugin. Con elem=$ (this) conseguimos extender a this con todas las funcionalidades del framework y el objeto jQuery resultante guardarlo en una variable. Luego invocamos fadeOut(), enviando como parámetro un número que son los milisegundos que durará el efecto de desaparecer el elemento. Luego enviamos como parámetro una nueva función que es un callback, que se ejecutará cuando haya terminado fadeOut() y en esa función callback se encargará simplemente de ejecutar un fadeIn() para mostrar de nuevo el elemento. 
Nota: A lo largo del Manual de jQuery hemos visto varias de las cosas que utilizamos en este ejemplo, como los efectos en jQuery y las funciones Callback. 
Ahora veamos cómo podríamos invocar este plugin:

$(document).ready(function(){
//parpadean los elementos de class CSS "parpadear"
$(".parpadear").parpadea();
//añado evento clic para un botón. Al pulsar parpadearán los elementos de clase parpadear
$("#botonparpadear").click(function(){
$(".parpadear").parpadea();
})
}

jueves, 20 de noviembre de 2014

Reglas para el desarrollo de plugins en jQuery

Para construir plugins en jQuery tenemos que seguir una serie de normas. Además veremos un nuevo ejemplo práctico sobre el desarrollo de plugins en jQuery. 
Con los plugins en jQuery podemos ampliar Framework, creando nuevos métodos para dotar de nuevas funcionalidades al objeto jQuery. En el artículo anterior ofrecimos una explicación general sobre los plugins en jQuery y en el presente vamos a adentrarnos en su desarrollo. Como habrás comprobado en el Manual de jQuery, el framework ya contiene muchas funciones para hacer cosas interesantes, que se basan en la utilización del objeto jQuery, así que ahora aprendamos a extender este objeto para proporcionar funcionalidades nuevas a nuestras páginas. 
Pero atención, porque tenemos que realizar el trabajo siguiendo una serie de normas, para asegurar que los plugins funcionen como deben y los pueda utilizar cualquier desarrollador en cualquier página web. Aquí puedes ver un listado normas, que son sólo unas pocas, pero que resultan tremendamente importantes. 
• El archivo que crees con el código de tu plugin lo debes nombrar como jquery.[nombre de tu plugin].js. Por ejemplo jquery.desaparece.js. 
• Añade las funciones como nuevos métodos por medio de la propiedad fn del objeto jQuery, para que se conviertan en métodos del propio objeto jQuery. 
• Dentro de los métodos que añades como plugins, la palabra "this" será una referencia al objeto jQuery que recibe el método. Por tanto, podemos utilizar "this" para acceder a cualquier propiedad del elemento de la página con el estamos trabajando. 
• Debes colocar un punto y coma ";" al final de cada método que crees como plugin, para que el código fuente se pueda comprimir y siga funcionando correctamente. Ese punto y coma debes colocarlo después de cerrar la llave del código de la función. 
• El método debe retornar el propio objeto jQuery sobre el que se solicitó la ejecución del plugin. Esto lo podemos conseguir con un return this; al final del código de la función. 
• Se debe usar this.each para iterar sobre todo el conjunto de elementos que puede haber seleccionados. Recordemos que los plugins se invocan sobre objetos que se obtienen con selectores y la función jQuery, por lo que pueden haberse seleccionado varios elementos y no sólo uno. Así pues, con this.each podemos iterar sobre cada uno de esos elementos seleccionados. Esto es interesante para producir código limpio, que además será compatible con selectores que correspondan con varios elementos de la página. 
• Asigna el plugin siempre al objeto jQuery, en vez de hacerlo sobre el símbolo $, así los usuarios podrán usar alias personalizados para ese plugin a través del método noConfict(), descartando los problemas que puedan haber si dos plugin tienen el mismo nombre. 
Estas reglas serán suficientes para plugins sencillos, aunque quizás en escenarios más complejos en adelante necesitaremos aplicar otras reglas para asegurarnos que todo funcione bien.

miércoles, 19 de noviembre de 2014

Cómo se crea un plugin de jQuery

Los plugins en jQuery se crean asignando una función a la propiedad "fn" del objeto jQuery. A partir de entonces, esas funciones asignadas se podrán utilizar en cualquier objeto jQuery, como uno de los muchos métodos que dispone dicho objeto principal del framework. 
Nota: La creación de plugins, para ampliar las funcionalidades de jQuery, es una cosa tan básica que la mayoría de las funciones con las que está dotado el propio framework están incluidas en el objeto jQuery por medio de plugins. 
Es decir, en la construcción del framework en muchas de las ocasiones simplemente se crean plugins para extenderlo. 
Así pues, esta técnica es usada, no sólo por terceros desarrolladores, para crear nuevos componentes, sino también por el propio equipo de jQuery para el diseño base de este framework. Si lo deseamos, aparte de seguir los próximos artículos de este manual, podemos ver el código fuente del framework o cómo están hechos los plugins de otros desarrolladores, para tener una idea sobre cómo se utilizan. 
A modo de ejemplo, podemos ver a continuación un código fuente de un plugin muy sencillo:

jQuery.fn.desaparece = function() {
this.each(function(){
elem = $(this);
elem.css("display", "none");
});
return this;
};


Este plugin permitiría hacer desaparecer a los elementos de la página y podríamos invocarlo por ejemplo de la siguiente manera:

$("h1").desaparece();

En el siguiente artículo veremos con mayor detalle la creación de un plugin de jQuery y explicaremos varios temas que resultarán de vital importancia para entender el código anterior y para construirlos nosotros mismos.

domingo, 16 de noviembre de 2014

Qué son los Plugins

Los plugins son la utilidad que pone jQuery a disposición de los desarrolladores para ampliar las funcionalidades del framework. Por lo general servirán para hacen cosas más complejas necesarias para resolver necesidades específicas, pero las hacen de manera que puedan utilizarse en el futuro en cualquier parte y por cualquier web. En la práctica un plugin no es más que una función que se añade al objeto jQuery (objeto básico de este framework que devuelve la función jQuery para un selector dado), para que a partir de ese momento responda a nuevos métodos. Como ya sabemos, en este framework todo está basado en el objeto jQuery, así que con los plugins podemos añadirle nuevas utilidades. 
Voy a poner un ejemplo un poco abstracto para ver si podemos llegar a la idea de cómo es un plugin. Imagina que necesitas que los elementos de la página "bailen" (parpadeen, se muevan, interactuen con el usuario de una manera concreta, o lo que sea que necesites), pues creas una función para hacer eso. Haces que esa función sea un plugin llamado "bailar" y a partir de entonces cualquier elemento de la página que lo desees podrá bailar. Para ello simplemente invocas ese método del objeto jQuery sobre el elemento o elementos que selecciones.

//con esto bailan todos los párrafos
$("p").bailar();
//con esto bailan los elementos de la clase "artista"
$(".artista").bailar();
//con esto baila el elemento con id="lola"
$("#lola").bailar();

Espero que el ejemplo no haya parecido muy tonto, pero es que los plugins no son nada del otro mundo, son simplemente eso, extensiones del framework para crear cualquier funcionalidad que podamos necesitar en los elementos de la página, por muy especial, o tonta, que sea. 
Lo genial de los plugins es que tú podrás utilizar esa funcionalidad en donde desees a partir de ahora, ya que estará perfectamente a tu disposición, siempre que tengas cargado el plugin. Incluso si tu generosidad es tal, la podrás proporcionar a otras personas para que la utilicen en sus desarrollos. 
Claro que, para conseguir todo esto, será necesario que programes los plugins atendiendo a una serie de normas, bastante sencillas pero importantes para asegurar que se puedan utilizar en cualquier parte y para cualquier selector de jQuery.

sábado, 15 de noviembre de 2014

Desarrollo de plugins en jQuery

Plugins en jQuery 

Veamos qué son los Plugins en jQuery y cómo podemos crearlos para expandir las posibilidades del framework. 
Si has llegado a este punto en el Manual de jQuery y has puesto en práctica los ejemplos realizados hasta ahora, no me cabe duda que tendrás ya una pequeña idea de las cosas que se pueden hacer con el framework. 
Habrás comprobado que, con pocas líneas de código, se pueden hacer diversos efectos y dotar a la página de interacción con el usuario, pero quizás todavía te sientas un poco perdido a la hora de encarar el desarrollo de problemas más complejos con los que podrás enfrentarte. 
Todavía nos queda mucho camino por delante, pero lo bueno es que, con lo que sabes hasta ahora, tienes una base suficiente para empezar a hacer cosas más divertidas y ejemplos que merezcan más la pena como práctica para tu día a día. 
Además, tendrás que aprender a programar de una manera adecuada en jQuery y sobre todo crear código reutilizable y con un ciclo de vida mayor. Para cumplir todos esos objetivos vamos a pasar directamente a explicar los plugins en jQuery, una de las "herramientas" que utilizarás habitualmente, si quieres hacer cosas más avanzadas con el framework y sacarle todo su provecho.

viernes, 14 de noviembre de 2014

Ejemplo de asignación de manejador de evento por live() - II

Para acabar, dejamos el código completo de esta página de ejemplo de live() en jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title>Eventos live</title>
<style type="text/css">
.verde{color: green;}
</style>
<script src="../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".verde").live("click", function(e){
var elem = $(this);
if (elem.html()!="Hiciste clic!!"){
elem.html("Hiciste clic!!");
}else{
elem.html("Hiciste de nuevo clic!!");
}
})
$("#insertarelem").click(function(e){
var nuevoElemento = $('<div class="verde">Este elemento se ha creado e insertado dinamicamente
(haz clic)</div>');
nuevoElemento.appendTo($(document.body));
});
$("#ponerclaseverde").click(function(e){
$("#noverde").addClass("verde");
});
})
</script>
</head>
<body>
<div class="verde">Esta capa tiene la clase verde (haz clic)</div>
<div class="verde">Segunda capa donde coloco la clase verde</div>
<div id="noverde">Tercera capa que no es verde</div>
<div class="verde">Otra con clase verde</div>
<input type=button value="insertar nuevo elemento verde" id="insertarelem">
<input type=button value="Poner la clase verde en el div que no la tiene" id="ponerclaseverde">
</body>
</html>

jueves, 13 de noviembre de 2014

Ejemplo de asignación de manejador de evento por live() - I

Veamos la siguiente demostración del funcionamiento de live(). Tenemos varios elementos:

<div class="verde">Esta capa tiene la clase verde (haz clic)</div>
<div class="verde">Segunda capa donde coloco la clase verde</div>
<div id="noverde">Tercera capa que no es verde</div>
<div class="verde">Otra con clase verde</div>
Sin varias divisiones donde todas menos una tienen la clase "verde". Veamos como puedo asignar un evento de tipo "click"
por medio del método live():
$(".verde").live("click", function(e){
var elem = $(this);
if (elem.html()!="Hiciste clic!!"){
elem.html("Hiciste clic!!");
}else{
elem.html("Hiciste de nuevo clic!!");
}
});
Es un evento que permite cambiar el texto del elemento cuando se pulsa sobre él y lo aplicamos sobre todos los elementos
de la clase "verde".
Ahora tenemos un par de botones para hacer cosas con la página y cambiarla un poco.
<input type=button value="insertar nuevo elemento verde" id="insertarelem">
<input type=button value="Poner la clase verde en el div que no la tiene" id="ponerclaseverde">
Cuando se pulse el primer botón, voy a insertar un nuevo elemento en la página al que le pondremos la clase "verde". Eso lo
consigo con este código:
$("#insertarelem").click(function(e){
var nuevoElemento = $('<div class="verde">Elemento creado e insertado dinamicamente</div>');
nuevoElemento.appendTo($(document.body));
});
Los elementos que se creen al apretar ese botón tendrán la clase verde y por tanto la funcionalidad especificada con el método live() para definir el evento clic. El segundo botón asigna la clase "verde" al elemento DIV del principio, que no la tenía, lo que conseguimos así:

$("#ponerclaseverde").click(function(e){
$("#noverde").addClass("verde");
});


Al asignar esa clase al elemento también se aplicará la funcionalidad definida para el evento click con live(). Esto lo podemos ver en funcionamiento en una página aparte.

lunes, 10 de noviembre de 2014

Eventos definidos con live() en jQuery

Método live() para definir eventos en jQuery: cómo crear eventos sobre elementos que coincidan con un selector, en el momento actual o en el futuro.
Hemos visto muchas técnicas para definir y tratar eventos en jQuery a lo largo de los artículos anteriores del Manual de jQuery. Para seguir explorando las posibilidades de este framework Javascript vamos a aprender ahora a definir eventos "live". Es algo así como una definición de evento "en directo" o durante toda la "vida" de la página, es decir, una definición de un evento sobre los elementos actuales y futuros que casen con un selector. El método live() funciona de manera similar al método bind() de jQuery, con la particularidad que la asignación del evento es "dinámica" y afecta no sólo a los elementos que casen con el selector en el momento de la invocación, sino también todos los elementos que se puedan definir en un futuro y que casen con ese selector. No sé si se habrá podido entender exactamente lo que se consigue con live(), pero lo podemos ver con un ejemplo sencillo que lo aclarará todo. Veamos esta sentencia: 
$(".miclase").bind("click", mifuncion); 
Está definiendo un evento "click" sobre todos los elementos de la clase (class de CSS) "miclase". Hasta aquí ya debemos de conocer todos esta el método bind(), por lo que no debería haber ningún problema, pero ahora veamos esta misma sentencia pero utilizando el método live(). $(".miclase").live("click", mifuncion); 
Esto sirve para lo mismo que hacíamos con bind(), pero además afectará a todos los elementos que puedan tener la clase "miclase" en el futuro y no sólo en el momento que se ejecuta esa sentencia. ¿Cómo puede haber otros elementos de esa clase en el futuro? Pues simplemente porque los crees dinámicamente con jQuery o porque asignes dinámicamente una clase CSS, u otro atributo, a un elemento que no la tenía, o que traigas por Ajax un contenido y que tenga elementos que casen con el selector, etc.

domingo, 9 de noviembre de 2014

Ejemplos con los métodos bind() y unbind() de jQuery

A continuación puede verse el código de una página completa que pone en práctica las explicaciones ofrecidas en el artículo. 
El ejemplo se puede ver en marcha en una página aparte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Eventos bind</title>
<script src="../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("p").bind("click mouseenter mouseleave", function(e){
if ($(this).css("color")!="rgb(250, 100, 0)")
$(this).css("color", "rgb(250, 100, 0)");
else
$(this).css("color", "rgb(150, 0, 255)");
})
function clicAlerta(){
alert("Has hecho clic");
}
$(".miclase").bind("click", clicAlerta);
$("#quitarevento").bind("click", function(){
$(".miclase").unbind("click", clicAlerta);
})
})
</script>
</head>
<body>
<p class="miclase">Primer párrafo</p>
<p>Otro párrafo</p>
<input type=button value="Quitar el alert del clic del primer párrafo" id="quitarevento">
</body>
</html>

En el próximo artículo veremos una utilidad interesante para definir eventos sobre elementos actuales y futuros sobre un selector jQuery, que nos facilitará las cosas en scripts más complejos.

sábado, 8 de noviembre de 2014

Eliminar un evento con la función unbind()

Ahora vamos a aprender a hacer el paso contrario, es decir, eliminar un evento previamente asignado a un elemento o varios elementos de la página. El procedimiento es bastante sencillo. Si invocamos a unbind() sin ningún parámetro, eliminamos todos los manejadores de eventos, de cualquier tipo de evento, de los objetos jQuery.

$("p").unbind();

Así hemos eliminado todos los eventos asociados con los párrafos de la página. Pero quizás una situación más habitual es que deseemos eliminar sólo los eventos de un tipo y para ello simplemente tenemos que indicar como parámetro ese tipo concreto de evento deseado.

$("p").unbind("click");


Esta sentencia provocará se descarten que todos los manejadores de eventos asociados al clic sobre los párrafos. Como se puede entender, sobre esos elementos no ocurrirá nada en el momento en que hagamos clic. 
Además, en el supuesto que otros scripts Javascript hayan definido algún manejador de evento clic sobre alguno de los elementos, unbind() también eliminará esos posibles eventos. Para no eliminar todos los manejadores de eventos de un tipo determinado podemos especificar la función que deseamos descartar en la lista de parámetros de la llamada a unbind(). Esto funcionaría en un esquema de código como el siguiente.

var funcionManejador = function(e) {
// cualquier código
}
$("p").bind('click', funcionManejador);
$("p").unbind('click', funcionManejador);

Siempre tendremos que colocar la función dentro de una variable, para poder referirnos a esa misma variable tanto al crear el evento con bind(), como al descartarlo con unbind().

viernes, 7 de noviembre de 2014

Definir eventos con bind() y eliminarlos con unbind()

A lo largo del Manual de jQuery ya hemos aprendido bastantes cosas sobre los eventos en este framework Javascript. Hemos conocido cómo a partir de diversos métodos como click(), mouseenter() y similares, podemos asignar un manejador de evento (una función) a un tipo de evento concreto. 
Ahora vamos a aprender a utilizar una única función de jQuery para definir cualquier tipo de evento, lo que sería como una manera genérica de definir eventos, de cualquier tipo, sobre elementos de la página. Además mostraremos cómo se puede eliminar un evento, quitando un posible manejador de eventos definido con anterioridad. 
Aprendimos en el pasado a definir eventos por medio de unas funciones específicas para cada tipo de evento. Por ejemplo:
$("#elem1").click(function(){
//evento clic sobre el elemento con id "elem1"
});
$("#elem2").mouseenter(function(){
//evento de entrar con el ratón sobre el elemento con id "elem2"
});
Estas maneras de trabajar son perfectamente viables y muy cómodas de utilizar para crear eventos de un tipo en concreto, pero en jQuery existe otra manera de definirlos con la que ganaremos alguna ventaja. 

Método bind() para definir cualquier tipo de evento 

Con el método bind() podemos definir de una manera genérica cualquier tipo de evento, o incluso un mismo manejador de eventos para distintos tipos de eventos distintos. El uso más habitual de este método es el siguiente:

bind(tipo_de_evento, manejador)

Como primer parámetro enviamos el tipo de evento que queremos definir. Si se desea, podríamos especificar varios tipos de eventos separados por un espacio y así asignar un mismo manejador de evento para varios tipos de situaciones. 
Como segundo parámetro se indica el manejador o función a ejecutar cuando se produzca el evento, igual que se definía con los métodos click(), mouseleave() o similares, para un tipo de evento en concreto. 
Un ejemplo sencillo de este modo de definir eventos es el siguiente:

$(".miclase").bind("click", function(){
alert("Has hecho clic");
});

Al hacer clic en cualquier elemento de la clase CSS "miclase", se mostrará un mensaje en una caja de alerta. Ahora podemos ver cómo se crearía una función que se asignaría para varios tipos de eventos a la vez.

$("p").bind("click mouseenter mouseleave", function(e){
if ($(this).css("color")!="rgb(250, 100, 0)")
$(this).css("color", "rgb(250, 100, 0)");
else
$(this).css("color", "rgb(150, 0, 255)");
})

Como se puede ver, se ha definido un evento para todos los párrafos de la página, que se activará con los tipos de eventos: "click mouseenter mouseleave". La función que hace de manejador de eventos averigua el color del elemento y lo va intercambiando entre dos colores distintos. Este evento se ejecutará al hacer clic, al entrar en el elemento con el puntero del ratón o al salir del elemento con el ratón.

miércoles, 5 de noviembre de 2014

Averiguar qué tecla fue pulsada

A través de la propiedad which del objeto evento de jQuery podemos saber qué tecla ha sido pulsada cuando se produce el evento de teclado. Esta propiedad contiene un número entero con el código Unicode de la tecla pulsada. Haremos un ejemplo para explicarlo. 
Tenemos un textarea y escribiendo algo en él, mostraremos la tecla pulsada en una capa, independiente del textarea. Este será el código HTML que necesitaremos para el ejemplo:

<form>
<textarea cols=300 rows=2 id="mitexto">Escribe algo aquí!</textarea>
<br>
<b>Tecla pulsada:</b>
<br>
<div id="loescrito"></div>
</form>
Ahora definiremos con jQuery el evento keypress, para mostrar la tecla pulsada.
$("#mitexto").keypress(function(e){
e.preventDefault();
$("#loescrito").html(e.which + ": " + String.fromCharCode(e.which));
});

Con e.preventDefault(); hacemos que no se escriba nada en el textarea, osea, estamos inhibiendo el comportamiento habitual del evento, que es escribir las teclas en el textarea, que no tiene mucho que ver con nuestro ejemplo, pero que está bien para ver cómo funciona. 
Luego escribimos en la capa con id "loescrito" el código de Unicode de esa tecla y luego su conversión a un carácter normal, a través de la función estática de la clase String fromCharCode(). 
El código completo del ejercicio es el siguiente.

<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mitexto").keypress(function(e){
e.preventDefault();
$("#loescrito").html(e.which + ": " + String.fromCharCode(e.which))
});
})
</script>
</head>
<body>
<h1>Eventos de teclado en jQuery</h1>
<h2>Averiguar qué tecla se está pulsando</h2>
<form>
<textarea cols=300 rows=2 id="mitexto">Escribe algo aquí!</textarea>
<br>
<b>Tecla pulsada:</b>
<br>
<div id="loescrito"></div>
</form>
</body>
</html>

Podemos ver el ejemplo en marcha en una página aparte. 
Con esto habremos aprendido ya a manejar eventos de teclado, aunque os recomendamos experimentar vosotros mismos con este tipo de eventos modificando el script y ver nuestro Videotutorial: manejo de eventos al detalle en jQuery .

martes, 4 de noviembre de 2014

Secuencia de eventos de teclado

Vamos a aprender cuál es la secuencia con la que se producen los eventos de teclado, con un pequeño ejemplo práctico. Se trata de hacer una función que detecte cualquier evento de teclado, muestre el tipo de evento que ha ocurrido y lo muestre en la página. Así podremos ver los eventos que se producen, sean cuales sean, y en qué orden. Primero podríamos definir la función que va a procesar los eventos:

function operaEvento(evento){
$("#loescrito").html($("#loescrito").html() + evento.type + ": " + evento.which + ", ")
}


Esta función recibe el evento y escribe en una capa el tipo de evento, que se consigue con la propiedad type del objeto evento, y luego un código de la tecla pulsada, que se consigue con la propiedad which del objeto evento. 
Nota: el tipo de evento no no habíamos visto todavía, pero es otra de las propiedades que encontramos en el objeto evento que recibe la función que tiene el código a ejecutar por el evento. Esta propiedad type simplemente es un string con la cadena que identifica el tipo de evento que se está procesando ("keydown", "keyup", "click" o cualquier otro). La tecla pulsada, que se obtiene con la propiedad which, la trataremos con detalle dentro de poco. Ahora podríamos hacer que cualquier evento de teclado invoque esta función con el código:

$(document).keypress(operaEvento);
$(document).keydown(operaEvento);
$(document).keyup(operaEvento);

Como hemos asociado los eventos al objeto document de Javascript, estos eventos se pondrán en marcha cada vez que se pulse una tecla, independientemente de dónde esté el foco de la aplicación (o donde esté escribiendo el usuario). Esto se puede ver en marcha en una página aparte.
Creo que merece la pena presentar el código completo del anterior ejemplo:

<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
function operaEvento(evento){
$("#loescrito").html($("#loescrito").html() + evento.type + ": " + evento.which + ", ")
}
$(document).ready(function(){
$(document).keypress(operaEvento);
$(document).keydown(operaEvento);
$(document).keyup(operaEvento);
})
</script>
</head>
<body>
<h1>Eventos de teclado en jQuery</h1>
<div id="loescrito"></div>
</body>
</html>

lunes, 3 de noviembre de 2014

Eventos de teclado en jQuery

Estamos aprendiendo sobre los eventos en jQuery y ahora vamos a hacer una práctica con los eventos de teclado, es decir, con la definición de acciones cuando el usuario presiona las teclas. La manera de trabajar con eventos de teclado no difiere mucho de la que ya hemos conocido en el manual de jQuery, pero con los eventos de teclado hay algo que todavía no hemos visto y que resulta fundamental. Se trata que, cuando se produce el evento de teclado, en el objeto evento de jQuery tenemos una propiedad que nos sirve para saber cuál es la tecla pulsada, para hacer cosas en nuestros scripts personalizadas en función de la tecla presionada por el usuario. 
Los eventos de teclado, en principio, son tres, como vimos en el artículo Manejadores de eventos en jQuery, keydown, keypress y keyup. Realmente no actúan por separado, sino que se produce una combinación de éstos al ir presionando y soltando las teclas, como se puede deducir de las explicaciones del mencionado artículo. Nota: Si pulsamos y soltamos una tecla, primero se produce un evento keydown, al presionar la tecla, luego un keypress y por último un keyup al soltarla. 
Si hacemos una pulsación prolongada de una tecla este esquema varía, pues se produce un keydown y luego un keypress. Mientras se mantiene pulsada la tecla en bucle se van produciendo eventos keydown y keypress, repetidas veces hasta que finalmente se suelta la tecla y se produce un keyup. 
En el caso de las teclas CTRL, Mayúsculas o ALT, se producen múltiples keydown hasta que se suelta la tecla y se produce un keyup. Es decir, al pulsar una de estas teclas no se produce el evento keypress.