martes, 30 de diciembre de 2014

Funciones de efectos

Vamos a repetir a lo largo de los siguientes artículos un concepto que quiero explicar para que se sepa a qué nos referimos. Se trata de las "Funciones de efectos" que son aquellas que dispone jQuery para crear efectos especiales en páginas web. Como hemos dicho, en diversos artículos anteriores ya se han explicado y mostrado efectos de diversas de las funciones de efectos disponibles. 
Las funciones de efectos son los métodos jQuery que realizan un cambio en los elementos de la página de manera suavizada, es decir, que alteran las propiedades de uno o varios elementos progresivamente, en una animación a lo largo de un tiempo. 
Por poner un ejemplo, tenemos el método fadeOut(), que realiza un efecto de opacidad sobre uno o varios elementos, haciendo que éstos desaparezcan de la página con un fundido de opaco a transparente. El complementario método fadeIn() hace un efecto de fundido similar, pero de transparente a opaco. Como éstos, tenemos en jQuery numerosos métodos de efectos adicionales como animate(), sliceUp() y sliceDown(), etc. En la propia documentación del framework, en el apartado Effects de la referencia del API, podremos ver una lista completa de estas funciones de efectos. En este Manual de jQuery ya hemos visto varios ejemplos sobre estas funciones de efectos y a lo largo de los próximos artículos que publicaremos en desarrolloweb .com veremos diversas otras aplicaciones de muestra donde podremos seguir aprendiendo.

lunes, 29 de diciembre de 2014

Colas de efectos en jQuery

Vamos a explicar qué es una cola de efectos, para qué nos sirve y cómo se configuran las colas de efectos en el framework Javascript jQuery. 
En el Manual de jQuery hemos tratado ya en diversos artículos de los efectos en jQuery. De hecho, éste ya es el cuarto artículo que destinamos a tratar las distintas maneras de crear efectos en este framework Javascript. Hasta la fecha hemos publicado las claves para la creación de efectos simples, el versátil método animate() para realizar la animación de atributos CSS numéricos, o las funciones de para crear efectos de fundido.
Todos estos métodos tratados anteriormente, y algunos más que no hemos revisado todavía como sliceUp() o sliceDown(), que funcionan de manera similar a los ya vistos métodos fadeIn() o fadeOut(), sirven para realizar efectos variados en páginas web y son tan sencillos de usar como invocarlos sobre el objeto jQuery que contiene al elemento que deseamos animar. Ahora que ya hemos superado este primer paso y ya sabemos hacer toda una gama de efectos simples, vamos a aprender a encadenar varios efectos a ejecutar uno detrás de otro. Veremos en este artículo y varios que sucederán, que encadenar efectos es tan sencillo como llamar a todos los métodos de efecto que queremos realizar. Todos esos métodos se incluirán automáticamente en una cola y serán ejecutados uno detrás del otro, sin que tengamos que hacer nada por nuestra cuenta, aparte de la propia invocación de los métodos.

domingo, 28 de diciembre de 2014

Código completo del ejemplo de fading en jQuery

A continuación podemos ver el código completo de trabajo con los métodos de fading disponibles en jQuery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Fading en jQuery</title>
<script src="../jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#ocultartoda").click(function(e){
$("#milista").fadeOut();
});
$("#mostrartoda").click(function(e){
$("#milista").fadeIn();
});
$("#ocultarmostrar").click(function(e){
$("#milista").fadeOut(function(){
$(this).fadeIn();
});
});
$("#selopacidad").change(function(e){
var opacidad_deseada = e.target.options[e.target.selectedIndex].value
$("h1").fadeTo(1000,opacidad_deseada);
});
$("#pororden").click(function(e){
var opacidad_deseada = $("#selopacidad").attr("value");
$("#e1").fadeTo(500, opacidad_deseada, function(){
$("#e2").fadeTo(500, opacidad_deseada, function(){
$("#e3").fadeTo(500, opacidad_deseada);
});
});
})
})
</script>
</head>
<body>
<h1>Fading en jQuery</h1>
<b>Mostrar y ocultar elementos de forma suavizada con fading</b>
<p>
<a href="#" id="ocultartoda">ocultar toda la lista</a> |
<a href="#" id="mostrartoda">Mostrar toda la lista</a> |
<a href="#" id="ocultarmostrar">Ocultar la lista y luego mostrarla</a>
</p>
<form name="f1">
Cambia la opacidad del elemento H1 a: <select name="opacidad" id="selopacidad">
<option value="0.2">20%</option>
<option value="0.5">50%</option>
<option value="0.8">80%</option>
<option value="1">100%</option>
</select>
<br>
<a href="#" id="pororden">Cambiar la opacidad de los elementos de la lista por orden</a>
</form>
<ul id="milista">
<li id="e1">Elemento 1</li>
<li id="e2">Segundo elemento</li>
<li id="e3">Tercer LI</li>
</ul>
</body>
</html>

sábado, 27 de diciembre de 2014

Enviando funciones callback

Los tres métodos que estamos viendo para hacer fading, como cualquiera de los existentes en jQuery, permiten el envío de un parámetro como función callback. Con este código conseguimos que se ejecute un fadeIn() después de un fadeOut(), para conseguir un efecto de parpadeo, en el que primero se oculta el elemento y cuando desaparece se vuelve a mostrar restaurando su opacidad

$("#milista").fadeOut(function(){
$(this).fadeIn();
});

Como vemos, se está indicando una función callback y dentro de la misma, this es una referencia al objeto jQuery que recibió el anterior método. Osea, con $("#milista").fadeOut() se hace un efecto de fundido para que desaparezca el elemento "#milista". Luego la función callback se ejecutará cuando ese elemento termine de desaparecer. Dentro de esa función callback se accede a $(this) para tener una referencia a "#milista" y sobre ese elemento invocamos al método fadeIn() para hacer que aparezca de nuevo la lista. 
Ahora vamos a mostrar otro ejemplo de callback un poco más adelantado, en el que se encadenan varias funciones callback, que se ejecutarían una detrás de la otra.

var opacidad_deseada = $("#selopacidad").attr("value");
$("#e1").fadeTo(500, opacidad_deseada, function(){
$("#e2").fadeTo(500, opacidad_deseada, function(){
$("#e3").fadeTo(500, opacidad_deseada);
});
});

En este código hacemos un efecto de fadeTo() sobre cada uno de los elemento de la lista. Para definir qué opacidad queremos aplicar a esos elementos utilizamos de nuevo el campo SELECT que habíamos visto anteriormente en este artículo. Pero en esta ocasión utilizamos una manera distinta de acceder al valor de opacidad que hay seleccionado, a través del método attr() de jQuery. 
En el código anterior primero se ejecuta el cambio de opacidad en el primer elemento, luego en el segundo y por último en el tercero, siempre hacia la misma "opacidad_deseada" que se había recuperado en el SELECT.

viernes, 26 de diciembre de 2014

Ejemplo con fadeTo()

El método fadeTo es bastante más versátil, como ya se había adelantado. Para hacer un ejemplo interesante con este método tenemos que ver cómo se le pueden pasar distintos valores de opacidad y para ello hemos creado un campo select con distintos valores.
<select name="opacidad" id="selopacidad">
<option value="0.2">20%</option>
<option value="0.5">50%</option>
<option value="0.8">80%</option>
<option value="1">100%</option>
</select>

Como se puede ver, este SELECT tiene diferentes OPTION con algunos valores de opacidad. Los valores (atributos value de los OPTION) son números entre 0 y 1. Ahora vamos a mostrar el código de un evento que asociaremos a este campo SELECT, para ejecutar acciones cuando el usuario cambia el valor que aparece en él. Cuando el SELECT cambie, queremos actualizar el valor de opacity de los elementos H1 de la página.

$("#selopacidad").change(function(e){
var opacidad_deseada = e.target.options[e.target.selectedIndex].value
$("h1").fadeTo(1000,opacidad_deseada);
});

En este código estamos definiendo un evento "onchange" sobre el SELECT anterior. En la primera línea de la función se está extrayendo la opacidad deseada y para ello se accede a la propiedad target del objeto evento que se recibe en la función que enviamos al método change(). 
Nota: en el objeto evento, target es una referencia al objeto del DOM sobre el que se está codificando el evento. Es decir, en este ejemplo, e.target es una referencia al campo SELECT sobre el que estamos definiendo el evento. Con e.target.options[] tengo el array de options que hay dentro de ese SELECT. Con e.target.selectedIndex obtengo el índice del elemento seleccionado, para poder acceder a la opción seleccionada a través del array de options. Con e.target.options[e.target.selectedIndex].value estamos accediendo a la propiedad value del OPTION que se encontraba seleccionado. Así accedemos a la opacidad deseada que queríamos aplicar. 

Una vez tenemos esa opacidad deseada, recogida del value del OPTION seleccionado, podemos ver la siguiente línea de código, en la que hacemos el fadeTo(). Veamos que fadeTo() recibe en principio dos métodos. El primero es la duración en milisegundos del ejemplo. El segundo es el valor de opacidad que queremos aplicar

martes, 23 de diciembre de 2014

Ejemplos con efectos de fundido fadeOut() y fadeIn() en jQuery

Para ilustrar el modo en el que se pueden hacer efectos de fundido con el cambio de opacidad hemos hecho un ejemplo de página donde se pueden ver todos los métodos de fading en funcionamiento, con algunas variantes interesantes. Para hacernos una idea de lo que vamos a conseguir en este ejercicio, podemos ver el ejemplo en marcha. En el ejemplo vamos a tener una lista como esta:

<ul id="milista">
<li id="e1">Elemento 1</li>
<li id="e2">Segundo elemento</li>
<li id="e3">Tercer LI</li>
</ul>
Como vemos, tanto la lista (etiqueta UL) como los elementos (etiquetas LI) tienen identificadores (atributos id) para poder referirnos a ellos desde jQuery.
Ahora veamos cómo hacer que la lista desaparezca con un fundido hacia transparente, a partir de una llamada a fadeOut().
$("#milista").fadeOut();
Como se puede ver, fadeOut() en principio no recibe ningún parámetro. Aunque luego veremos que le podemos pasar un parámetro con una función callback, con código a ejecutarse después de finalizado el efecto.
Este sería el códio para que la lista vuelva a aparecer, a través de la restauración de su opacidad con una llamada a fadeIn().
$("#milista").fadeIn();

lunes, 22 de diciembre de 2014

Fading en jQuery

Efectos de cambio de opacidad de los elementos en la página, con los métodos de fading en jQuery, fadeIn(), fadeOut() y fadeTo(). 
Vamos a conocer otra manera de aplicar efectos a elementos de la página, a través de los métodos de fading de jQuery. Son métodos muy sencillos de aplicar y que sirven para crear efectos bastante atractivos, donde se produce un fundido a través del cambio de la propiedad opacity de CSS. A lo largo del Manual de jQuery que venimos publicando en DesarrolloWeb.com hemos utilizado alguno de estos métodos para hacer efectos rápidos en jQuery, pero ahora los vamos a explicar de manera más detenida. Además, realizaremos nuevas prácticas con estos tipos de efectos de cambio de opacidad y trabajaremos con las funciones callback para realizar una pequeña cadena de efectos, que se ejecutan cuando los anteriores hayan acabado. Recordemos que CSS tiene una propiedad para alterar la opacidad de los elementos. Todos los valores de Opacity se expresan con números de 0 al 1. Con un valor de cero haría que el elemento fuera totalmente transparente y opacity con un valor de 1 sería totalmente opaco. Con los métodos de fading de jQuery se puede cambiar esa propiedad. Existen tres métodos para crear efectos de fundido, los siguientes: 
Método fadeOut() Este método hace que el elemento que lo recibe desaparezca de la página a través del cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity cero. 
Método fadeIn() El método fadeIn() hace que el elemento que lo recibe aparezca en la página a través del cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de opacity 1. Este método sólo podremos observarlo si el elemento sobre el que lo invocamos era total o parcialmente transparente, porque si era opaco al hacer un fadeIn() no se advertirá ningún cambio de opacidad. 
Método fadeTo() El tercer método para hacer efectos de fundidos es fadeTo() y es el más versátil de todos, puesto que permite hacer cualquier cambio de opacidad, a cualquier valor y desde cualquier otro valor. Este método recibe la duración deseada para el efecto, el valor de opacidad al que queremos llegar y una posible función callback.

domingo, 21 de diciembre de 2014

Ejemplo jQuery del método animate()

Para acabar vamos a ver un ejemplo del método animate(), pero bastante simplificado. En realidad sólo vamos a utilizar el primero de los parámetros, para indicar las propiedades CSS que deseamos animar. 
Tendremos un titular en la página H1 con algunos atributos de estilos:

<h1 style="border-bottom: 1px solid #ff8800; font-size: 15pt;">Animacion jQuery</h1>


Nuestra animación hará que el borde del elemento pase a tener 20 píxeles de anchura y que el tamaño de la fuente suba para 25pt. Para ponerla en marcha utilizaríamos un código como el siguiente

$("h1").animate({
'border-bottom-width': "20",
'font-size': '25pt'
});

Como se puede ver, en notación de objeto indicamos dos atributos CSS y los dos valores a los que queremos animarlos. El primero de los valores, que no tiene unidades, es considerado como píxeles. El segundo valor, que se indica en puntos (pt), hará que jQuery utilice ese tipo de unidades en vez de los píxeles. Además, podemos fijarnos que en este caso a animate() sólo le hemos pasado unparámetro, con la lista de las propiedades CSS a animar. 
Por tanto, dejamos a jQuery que utilice los valores por defecto de tiempo de animación y función de animación. Pero veamos una página que hace uso de ese método, con el código completo. Como veremos, en la página tendremos además dos enlaces, uno para poner en marcha la animación y otro para restaurar el CSS de los elementos a los valores originales. Así que, de paso que vemos como hacer un animate(), aprenderemos además a lanzar la ejecución de las animaciones como respuesta a eventos de usuario.

<html>
<head>
<title>Método animate jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#animar").click(function(e){
e.preventDefault()
$("h1").animate({
'border-bottom-width': "20",
'font-size': '25pt'
});
});
$("#restaurar").click(function(e){
e.preventDefault()
$("h1").css({
'border-bottom-width': "1",
'font-size': '15pt'
});
});
})
</script>
</head>
<body>
<h1 style="border-bottom: 1px solid #ff8800; font-size: 15pt;">Animacion jQuery</h1>
Trabajando con el método animate:
<a href="#" id="animar">Animar</a>
<br>
<br>
Vuelvo a lo que había antes:
<a href="#" id="restaurar">Restaurar</a>
</body>
</html>

sábado, 20 de diciembre de 2014

Parámetros del método animate()

Para invocar al método animate() tenemos que indicar una serie de parámetros, aunque sólo uno de ellos será obligatorio. La lista es la siguiente: .animate( Propiedades, [ Duración], [ Función de animación ], [ Callback ] ) 
Propiedades: Este es el único parámetro que de debe indicar obligatoriamente y es para indicar qué atributos CSS queremos actualizar, con sus nuevos valores. Se tiene que indicar en notación de objeto, de manera similar a como se puede indicar en el método css() de jQuery y sólo permite el cambio de propiedades CSS que tengan valores numéricos. Por ejemplo, podríamos cambiar la anchura de un borde, pero no el tipo de borde (si queremos que sea sólido, con línea de puntos, etc.) porque no tiene valores numéricos. Generamente, si no especificamos otra cosa los valores se entienden en píxeles. Los nuevos valores se pueden indicar de manera absoluta, o incluso de manera relativa, con un string del tipo "+=50", que indica que se debe aumentar en 50 ese atributo. En los ejemplos de este y siguientes artículos que publiquemos en desarrolloweb.com veremos varias maneras de indicar las propiedades para realizar varias animaciones. 
Duración: Sirve para indicar la duración de la animación, en un valor numérico en milisegundos, o en un valor de cadena de caracteres como "fast" o "slow". 
Función de animación: Esta función sirve para indicar cómo se realizará la animación, si más suave al principio y rápida al final, o igual de rápida todo el tiempo. Es decir, la velocidad con la que se realizará el cambio de valores en diferentes puntos de dentro de la animación. En principio, los dos posibles valores son "swing" (por defecto) y "linear". 
Callback: Ofrece la posibilidad de indicar una función a ejecutarse cuando se ha terminado totalmente de producir el efecto. Es decir, una función que se invoca cuando se ha llegado al valor final de los atributos CSS que se solicitaron cambiar.

viernes, 19 de diciembre de 2014

Efectos en jQuery

jQuery animate(): Animación de propiedades CSS 

El método animate() de jQuery permite animar varias propiedades, con valores numéricos, de CSS en un solo paso. 

Hemos avanzado bastante en el Manual de jQuery y con los conocimientos adquiridos hasta el momento ya estamos en disposición de aprender cualquier cosa más avanzada en este framework Javascript. Ha llegado el momento de dedicarnos a mostrar las maneras con las que podemos crear efectos para adornar nuestras páginas y hacer que la experiencia de uso sea más atractiva. En pasados artículos de DesarrolloWeb.com ya mostramos algunas maneras de hacer efectos sencillos en jQuery y en adelante vamos a explicar el funcionamiento de otros métodos, más complejos pero también más versátiles. 
En el presente artículo vamos a comenzar a aprender cosas sobre el método animate(), uno de los más interesantes para hacer efectos en jQuery a partir de la modificación de propiedades CSS. Este método, como veremos, resulta bastante polivalente, pues con él podemos crear muchos tipos de animaciones, tantos como combinaciones de atributos CSS podemos tener. Sirve básicamente para ofrecer un listado de atributos CSS, con los nuevos valores a los que deseamos actualizarlos y jQuery se encargará de hacer esa modificación de manera que sea bastante suave. 
Por ejemplo, tenemos un elemento con los atributos CSS width y height con valores "X e Y" y queremos animarlos para que esos atributos pasen a tener valores "Z y T" Con el método animate() podemos conseguir que esos atributos pasen de unos valores a otros sin cambios bruscos, y en lugar de ello lo hagan con una animación suavizada desde uno a otro valor.

jueves, 18 de diciembre de 2014

Conclusión: una envoltura segura y sencilla para tus plugins

Como podemos entender, colocar esa envoltura en tus plugins, no interfiere en nada a cómo se tienen que diseñar y todo lo que hemos aprendido anteriormente sobre creación de plugins se puede aplicar a este pequeño pero interesante truco. No obstante, para completar las informaciones, a continuación se puede ver un plugin donde realizamos un plugin utilizando esta técnica para ocultar el código y utilizar el alias de $. 
Como hemos visto en este artículo, utilizar esa envoltura para nuestros plugins es una tarea simple, no requiere mucho código y las ventajas son importantes.

miércoles, 17 de diciembre de 2014

Alias personalizado y ocultar código en plugins jQuery

Cómo crear un alias personalizado a $, para mejorar la compatibilidad en todos los contextos, y ocultar el código privado de los plugins jQuery. 
En principio un plugin jQuery está pensado para que todas las personas lo puedan usar en sus páginas web y de hecho, hemos aprendido muchas convenciones para potenciarlo a lo largo de los capítulos dedicados a la creación de plugins en el Manual de jQuery. En este artículo vamos a aprender otra buena práctica que ayudará a que nuestros plugins funcionen correctamente en todos los sitios web. Se trata de ocultar de una manera sencilla todo el código de nuestros plugins y utilizar un alias para la variable $ que puede dar conflictos con otras librerías. 
Algo que nos ayudará de dos maneras: El símbolo $ se utiliza en muchos otros frameworks y componentes Javascript y si el web donde se coloque el plugin utiliza alguno de ellos, pueden ocurrir conflictos, algo que no ocurrirá en el caso que utilicemos un alias. En el código de los plugins puedes utilizar tus propias variables o funciones, que tendrán el nombre que hayas querido. 
Pero alguno de esos nombres puede que ya los utilicen otros programadores en sus páginas, lo que puede generar conflictos también. Por eso no es mala idea ocultar tu código y hacerlo local a un ámbito propio. Todo esto se consigue colocando todo tu código dentro de una función que se invoca según se declara.

(function() {
//Código de tu plugin
//puedes crear tus variables o funciones
//sólo serán visibles aquí
var loquesea;
function algo(){
}
})(); //la función se ejecuta instantáneamente

Además, a esa función podríamos enviarle la variable "jQuery" que contiene toda la funcionalidad del framework. Esa variable la recibirás en el parámetro con cualquier alias, como se puede ver en el siguiente código:
(function($) {
//código del plugin
})(jQuery);
Como la variable jQuery siempre es una referencia al framework correcta, puedes estar seguro que no tendrá conflictos con otras librerías. Luego la recibimos con el nombre $, pero en ese caso ya estamos en el ámbito de la función, donde las variables locales pueden tener el nombre que nosotros queramos.
Nota: En este caso estamos recibiendo la variable jQuery con el nombre $, pero podríamos utilizar cualquier otro nombre para el alias a
jQuery

martes, 16 de diciembre de 2014

Invocar al plugin checkbox personalizado con jQuery

Ya que hemos hecho un checkbox personalizado, por un objeto de options, vamos a mostrar cómo se pueden crear varios
tipos de checkbox con este código. Veamos el siguiente HTML:
<span class="ch">Seleccionar</span>
<span class="ch">Me interesa</span>
<span class="ch">Oooo</span>
<br>
<br>
<span id="otro">otro suelto</span>
Se puede apreciar que tenemos simples elementos SPAN. Por un lado tenemos 3 SPAN con la clase "ch" y por otro lado otro SPAN suelto con identificador "otro". Ahora veamos cómo los convertiríamos en campos de formulario checkbox
personalizados:
$(".ch").checkboxPersonalizado();
Así crearíamos 3 checkbox, en los 3 primeros SPAN que tenían la class "ch". Estos checkbox personalizados se crearían con las opciones por defecto.
$("#otro").checkboxPersonalizado({
activo: false,
colorTextos: {
activo: "#f80",
pasivo: "#98a"
},
imagen: {
activo: 'images/weather_cloudy.png',
pasivo: 'images/weather_rain.png'
},
textos: {
activo: 'Buen tiempo :)',
pasivo: 'Buena cara ;)'
},
cssAdicional: {
border: "1px solid #dd5",
width: "100px"
},
nameCheck: "buen_tiempo"
});
En este segundo caso de invocación al plugin estamos convirtiendo en un checkbox personalizado el último SPAN, que tenía identificador "otro". En este segundo caso estamos utilizando multitud de variables de configuración específicas, que harán que el checkbox tenga un aspecto radicalmente diferente a los anteriores

domingo, 14 de diciembre de 2014

Personalización del plugin por medio de objeto de opciones - III

El código está convenientemente comentado para que se pueda entender mejor. Pero lo que queremos mostrar en este caso es que hemos creado dos funciones dentro del código del plugin: activar() y desactivar(). Esas dos funciones, al estar dentro del bloque this.each(), se pueden acceder desde cualquier parte del plugin y comparten el mismo ámbito de variables que el propio plugin, luego podremos acceder desde ellas a cualquier variable definida en el bloque this.each(). 
Para que quede un poco más clara la estructura completa del plugin, coloco a continuación su código completo:

jQuery.fn.checkboxPersonalizado = function(opciones) {
//opciones de configuración por defecto
var conf = {
activo: true,
colorTextos: {
activo: "#00f",
pasivo: "#669"
},
textos: {
activo: "",
pasivo: ""
},
imagen: {
activo: 'images/thumb_up.png',
pasivo: 'images/thumb_down.png'
},
cssElemento: {
padding: "2px 2px 2px 24px",
display: "block",
margin: "2px",
border: "1px solid #eee",
cursor: "pointer"
},
cssAdicional: {
},
nameCheck: ""
};
//Las extiendo con las opciones recibidas al invocar el plugin
jQuery.extend(conf, opciones);
this.each(function(){
var miCheck = $(this);
var activo = conf.activo
var elementoCheck = $('<input type="checkbox" style="display: none;" />');
if(conf.nameCheck==""){
elementoCheck.attr("name", miCheck.text());
}else{
elementoCheck.attr("name", conf.nameCheck);
}
miCheck.before(elementoCheck);
miCheck.css(conf.cssElemento);
miCheck.css(conf.cssAdicional);
if (activo){
activar();
}else{
desactivar();
}
miCheck.click(function(e){
if(activo){
desactivar();
}else{
activar();
}
activo = !activo;
});
function desactivar(){
miCheck.css({
background: "transparent url(" + conf.imagen.pasivo + ") no-repeat 3px",
color: conf.colorTextos.pasivo
});
if (conf.textos.pasivo!=""){
miCheck.text(conf.textos.pasivo)
}
elementoCheck.removeAttr("checked");
};
function activar(){
miCheck.css({
background: "transparent url(" + conf.imagen.activo + ") no-repeat 3px",
color: conf.colorTextos.activo
});
if (conf.textos.activo!=""){
miCheck.text(conf.textos.activo)
}
elementoCheck.attr("checked","1");
};
});
return this;
};

sábado, 13 de diciembre de 2014

Personalización del plugin por medio de objeto de opciones - II

Tal como se puede ver, se han definido varias variables para configurar el objeto, que se dispondrán en un objeto que tenemos en la variable "configuracion". Entre las variables de configuración tenemos una llamada "activo" con un valor boleano para decidir si el elemento checkbox estaría o no seleccionado desde el principio. Tenemos una variable "colorTextos", para definir el color del texto cuando el elemento está activo y pasivo. También tenemos otra serie de configuraciones para los estados de activo y pasivo (seleccionado o no seleccionado), como la imagen que se tiene que mostrar al lado del texto. 
Ahora veamos el código del plugin, lo que iría dentro de this.each(). Recordemos que cada variable creada aquí es accesible dentro de todo el bloque de código definido por las llaves del this.each(). Así mismo, las funciones declaradas aquí son accesibles desde cualquier parte de este bloque.

//variables locales al plugin
var miCheck = $(this);
var activo = conf.activo
//el elemento checkbox interno pero no visible
var elementoCheck = $('<input type="checkbox" style="display: none;" />');
//el nombre del checkbox puede ser configurado desde options o con el propio texto del campo
if(conf.nameCheck==""){
elementoCheck.attr("name", miCheck.text());
}else{
elementoCheck.attr("name", conf.nameCheck);
}
//inserto el checkbox en la página
miCheck.before(elementoCheck);
//aplico estilos que vienen en la configuración
miCheck.css(conf.cssElemento);
miCheck.css(conf.cssAdicional);
//si el elemento estaba marcado para estar activo
if (activo){
//lo activo
activar();
}else{
//lo desactivo
desactivar();
}
//defino un evento para el elemento
miCheck.click(function(e){
//compruevo la variable activo, definida dentro del plugin
if(activo){
desactivar();
}else{
activar();
}
activo = !activo;
});
//función local en el plugin para desactivar el checkbox
function desactivar(){
//cambio los estilos para el elemento a los marcados como pasivos
miCheck.css({
background: "transparent url(" + conf.imagen.pasivo + ") no-repeat 3px",
color: conf.colorTextos.pasivo
});
//si hay un texto específico para cuando estaba pasivo
if (conf.textos.pasivo!=""){
miCheck.text(conf.textos.pasivo)
}
//desmarcho el checkbox interno que es invisible, pero que se envía como elemento de formulario.
elementoCheck.removeAttr("checked");
};
function activar(){
miCheck.css({
background: "transparent url(" + conf.imagen.activo + ") no-repeat 3px",
color: conf.colorTextos.activo
});
if (conf.textos.activo!=""){
miCheck.text(conf.textos.activo)
}
elementoCheck.attr("checked","1");
};

viernes, 12 de diciembre de 2014

Personalización del plugin por medio de objeto de opciones - I

Podemos comenzar por ver el principio de código del plugin, donde estamos definiendo las variables de configuración por defecto y las estamos extendiendo con las variables de configuración definidas al invocarlo.

jQuery.fn.checkboxPersonalizado = function(opciones) {
//opciones de configuración por defecto
var conf = {
activo: true,
colorTextos: {
activo: "#00f",
pasivo: "#669"
},
textos: {
activo: "",
pasivo: ""
},
imagen: {
activo: 'images/thumb_up.png',
pasivo: 'images/thumb_down.png'
},
cssElemento: {
padding: "2px 2px 2px 24px",
display: "block",
margin: "2px",
border: "1px solid #eee",
cursor: "pointer"
},
cssAdicional: {
},
nameCheck: ""
};
//Las extiendo con las opciones recibidas al invocar el plugin
jQuery.extend(conf, opciones);
this.each(function(){
//CÓDIGO DEL PLUGIN
});
return this;
};

jueves, 11 de diciembre de 2014

Plugin checkbox personalizado con jQuery

Un plugin en jQuery para hacer un campo de formulario checkbox pero con un diseño distinto, totalmente personalizable por el desarrollador. 

A veces los campos de formulario que tenemos disponibles en HTML son un poco "aburridos", por decirlo de alguna manera. Quiero decir que son siempre iguales para todas las páginas y existen pocas opciones para configurar su aspecto, sobre todo en el caso de los elementos checkbox. Como diseñadores caprichosos, nosotros podríamos desear que nuestros checkboxes tuvieran un aspecto o color determinado, que haga mejor combinación con otros elementos de nuestro layout. Y estas son cosas que podemos conseguir fácilmente con un poco de jQuery. 
En este artículo pretendemos hacer un plugin para crear campos checkbox personalizados, con las mismas funcionalidades de los checkbox normales, pero que tengan un aspecto configurable por el desarrollador. 
Para ello utilizaremos el modelo de creación de plugins en jQuery, de modo que haremos todo el trabajo en un plugin que cualquier persona podría utilizar en su sitio web y configurar los checkbox según sus preferencias. Para seguir las explicaciones de este artículo necesitaremos saber acerca de la creación de plugins en jQuery y en concreto vamos a practicar con dos cosas que hemos aprendido recientemente: 
• Gestión de opciones en plugins jQuery 
• Crear Funciones y variables dentro de plugins jQuery 
Para apreciar con exactitud cómo serán algunos ejemplos de checkbox que vamos a realizar, podemos echar un vistazo al ejemplo en marcha.

miércoles, 10 de diciembre de 2014

Esquema de programación de un plugin - II

Nota: Antes del this.each() se pueden colocar también variables, pero tenemos que tener en cuenta que existirá una misma copia de esa variable para todos los elementos donde se está aplicando el plugin.
Veamos el siguiente HTML.
<div id="esteDiv">
Este div
</div>
<span class="misspan">span1</span>
<span class="misspan">span2</span>
<span class="misspan">span3</span>
Ahora veamos estas dos llamadas al plugin anterior.
$("#esteDiv").miPlugin();
$(".misspan").miPlugin(); 

 Como se puede ver, con la primera llamada se ejecuta el plugin sobre un elemento de la página con id="esteDiv". Es un único elemento de la página, luego el plugin sólo se aplica una vez. Sin embargo, en la segunda llamada, se ejecuta el plugin sobre varios elementos con la class de CSS "misspan". En este segundo caso el plugin se ejecutará sobre tres elementos y entonces podremos comprobar que las variables que se habían definido fuera del this.each() sólo existen una vez y su valor es común para los tres elementos sobre los que se aplicó el plugin en la segunda llamada. 
Lo cierto es que quizás todo esto quede un poco confuso, o no se entienda muy bien para qué podremos querer todas esas variables y funciones locales al plugin. Pero a medida que vayamos trabajando y planteándonos plugins más complicados, veremos que nos son de mucha utilidad para almacenar datos a los que queremos acceder más tarde, o para organizar el código de nuestro plugin en distintas funciones, que se pueden llamar repetidas veces y desde varios sitios. 
Para los que conocen un poco de programación orientada a objetos, quizás les aclare un poco este simil: Si un plugin fuese como un objeto, las variables de dentro del bloque this.each() de los plugins serían como las propiedades de ese objeto y las funciones serían como métodos de ese objeto. 
Aunque hay que salvar las distancias, porque un plugin no sigue exactamente el modelo que conocemos en las clases de programación orientada a objetos. Para que veamos un caso práctico de plugin que tiene varias variables y funciones locales hemos realizado el ejemplo del siguiente artículo: Checkbox con diseño personalizado con jQuery.

martes, 9 de diciembre de 2014

Esquema de programación de un plugin - I

A continuación vamos a mostrar el esquema de código de un plugin que incluye funciones y variables. Este plugin no sirve para nada, simplemente es una prueba que estoy realizando para ver cómo puedo crear esas variables, acceder a ellas y comprobar su ámbito en distintos puntos del código del plugin.

jQuery.fn.miPlugin = function() {
//variables que son comunes a todos los elementos
//que había en el objeto jQuery que recibe el método del plugin
mivariableComun = "comun";
alert("Nueva invocación de plugin. Mi variable común: " + mivariableComun)
this.each(function(){
//CÓDIGO DEL PLUGIN
//Elemento sobre el que itero y estoy aplicando el plugin
elem = $(this);
//elem es una variable que podremos utilizar en todo el plugin
//variables específicas para cada elemento
var miVariable = "x";
//miVariable se podrá acceder dentro de todo el código que pongamos aquí
//funcion que será accesible desde cualquier parte del plugin
function miFuncion(){
//puedo acceder a variables del plugin
miVariable = elem.text();
//Muestro el contenido de la variable
alert("mi variable local y particular de cada plugin: " + miVariable);
//cambio la variable comun a todos los elementos de este plugin
mivariableComun = "Otra cosa comun!"
}
//puedo invocar las funciones del plugin
miFuncion();
//evento, que tiene una función. Puedo acceder a variables y funciones del plugin
elem.click(function(){
//puedo acceder a variables del plugin
alert("Dentro del evento: " + miVariable);
//puedo acceder a funciones
miFuncion();
});
});
};

Para definir esas variables y funciones locales al plugin, de manera que estén accesibles dentro del plugin y a su vez tengan acceso a todos los datos del mismo, debemos colocarlas dentro de la iteración que se hace con this.each(). Como se puede entender del código del plugin anterior, todas esas variables y funciones se pueden invocar o acceder en cualquier parte, siempre y cuando estemos dentro del this.each(), donde fueron creadas. Este plugin, aunque no valga para mucho, lo hemos publicado y se puede ver en marcha en una página aparte.

lunes, 8 de diciembre de 2014

Funciones y variables dentro de plugins jQuery

Las funciones en los plugins pueden verse como funciones y variables privadas del plugin, que nos sirven para definir una mejor lógica de programación y estructura de datos y código. 

Igual que en cualquier lenguaje de programación, podemos utilizar funciones para estructurar el código de nuestros plugins. Del mismo modo, en los plugins podemos tener variables, donde guardar datos u objetos que tengan validez dentro del ámbito de ese plugin. Todo ello nos ayudará bastante a hacer un código más claro, autónomo y compacto. 
En este artículo vamos a mostrar cómo sería el esquema de programación de un plugin jQuery un poco más avanzado, que incluye las mencionadas variables y funciones "locales" (o "privadas", como las queramos llamar). Veremos también cómo es posible acceder a esas variables y funciones desde cualquier parte del flujo de código de un plugin, incluso desde el código de otras funciones, como los eventos.

domingo, 7 de diciembre de 2014

Invocar al plugin con o sin las opciones de configuración

Para acabar, vamos a invocar al plugin del tip con opciones, pero lo vamos a hacer de dos modos, uno con las opciones por defecto y otro con opciones específicas. Así se llamaría al plugin con las opciones por defecto: 

$("#elemento1").creaTip("todo bien..."); 

En realidad le estamos pasando un parámetro, pero no son las opciones, sino es el texto que tiene que aparecer en el tip. Como no se indican opciones, ya que no hay segundo parámetro, se toman todas las definidas por defecto en el plugin. Las opciones, según se puede ver en el código del plugin, se deberían enviar en un segundo parámetro cuando se llama al plugin, tal como se puede ver a continuación:

$("#elemento2").creaTip("Otra prueba...", {
velocidad: 1000,
claseTip: "otroestilotip",
animacionMuestra: {
opacity: "show",
padding: '25px',
'font-size': '2em'
},
animacionOculta: {
height: "hide",
padding: '5px',
'font-size': '1em'
}
});

Ahora hemos indicado varias opciones específicas, que se tendrán en cuenta al crear el plugin con este segundo código. Para acabar, dejamos un enlace para ver el ejemplo en funcionamiento.

sábado, 6 de diciembre de 2014

Código completo del plugin tip con opciones

Veamos todo el código de nuestro primer plugin en implementar el sistema de opciones:

jQuery.fn.creaTip = function(textoTip, opciones) {
var configuracion = {
velocidad: 500,
animacionMuestra: {width: "show"},
animacionOculta: {opacity: "hide"},
claseTip: "tip"
}
jQuery.extend(configuracion, opciones);
this.each(function(){
elem = $(this);
var miTip = $('<div class="' + configuracion.claseTip + '">' + textoTip + '</div>');
$(document.body).append(miTip);
elem.data("capatip", miTip);
elem.mouseenter(function(e){
var miTip = $(this).data("capatip");
miTip.css({
left: e.pageX + 10,
top: e.pageY + 5
});
miTip.animate(configuracion.animacionMuestra, configuracion.velocidad);
});
elem.mouseleave(function(e){
var miTip = $(this).data("capatip");
miTip.animate(configuracion.animacionOculta, configuracion.velocidad);
});
});
return this;
};

viernes, 5 de diciembre de 2014

Método jQuery.extend()

variable "configuracion", con las opciones específicas para el plugin concreto, recibidas por medio del parámetro "opciones". jQuery.extend(configuracion, opciones); Esta sentencia es una llamada al método extend() que pertenece a jQuery. 
Esta función recibe cualquier número de parámetros, que son objetos, y mete las opciones de todos en el primero. Luego, después de la llamada a extend(), el objeto del primer parámetro tendrá sus propiedades más las propiedades del objeto del segundo parámetro. Si alguna de las opciones tenía el mismo nombre, al final el valor que prevalece es el que había en el segundo parámetro. Si tenemos dudas con respecto a este método, leer el artículo jQuery.extend(). 
Así, podemos ver cómo con extend() las propiedades por defecto del plugin se combinan con las que se envíen en las opciones. Luego, en el código del plugin, podremos acceder a las propiedades a través de la variable configuración, un punto y el nombre de propiedad que queramos acceder. 
configuracion.velocidad

jueves, 4 de diciembre de 2014

Plugin Tip con opciones en jQuery

Un ejemplo de plugin en jQuery para hacer un sistema de tip más avanzado, que permite configurarse por medio de unas opciones en el plugin. 
Hace poco tiempo publicamos un artículo en DesarrolloWeb.com sobre un plugin para mostrar un tip con un mensaje que aparecería en una capa al pasar el ratón sobre un elemento caliente. Eso es lo que llamamos un tip y lo explicamos en el artículo Plugin jQuery para hacer un Tip simple. 
Ahora vamos a hacer una modificación en ese plugin para implementar una serie de opciones, que nos permitirán configurar de una manera más versátil el comportamiento del plugin. Las opciones que vamos a implementar serán las siguientes: 
• Velocidad de la animación de mostrar y ocultar el tip 
• Animación a utilizar para mostrar el tip 
• Animación a utilizar para ocultar el tip 
• Clase CSS para la capa del tip Todas esas opciones se definen, junto con los valores por defecto que van a tomar, al crear el código del plugin. 
En el anterior artículo ya explicamos de manera general cómo funciona el sistema de options en plugins, que vamos a utilizar a continuación. Comenzamos por especificar, con notación de objeto, las opciones de configuración por defecto para el plugin:

var configuracion = {
velocidad: 500,
animacionMuestra: {width: "show"},
animacionOculta: {opacity: "hide"},
claseTip: "tip"
}

Ahora veamos el inicio del código del plugin, donde debemos observar que en la función que define el plugin se están recibiendo un par de parámetros. El primero es el texto del tip, que necesitamos para crear la capa del tip (Este parámetro ya aparecía en el código del plugin del artículo anterior). El segundo son las opciones específicas para configurar el plugin.

jQuery.fn.creaTip = function(textoTip, opciones) {
//opciones por defecto
var configuracion = {
velocidad: 500,
animacionMuestra: {width: "show"},
animacionOculta: {opacity: "hide"},
claseTip: "tip"
}
//extiendo las opciones por defecto con las opciones del parámetro.
jQuery.extend(configuracion, opciones);
this.each(function(){
//código del plugin
});
});

miércoles, 3 de diciembre de 2014

Concusión sobre la configuración de plugins con el objeto de opciones

Hasta el momento no hemos visto más que un código parcial de lo que sería un plugin con options para su configuración. Pero esperamos haber despejado ya algunas dudas. No obstante, veremos mejor cómo funciona todo por medio de un ejemplo en un artículo siguiente. 
Continuar la lectura con el ejercicio Plugin Tip con opciones en jQuery.

martes, 2 de diciembre de 2014

Invocar al plugin enviando el objeto de opciones

Ahora podemos ver el código que utilizaríamos para invocar al plugin pasando las opciones que deseamos:

$("#elemento).miPlugin({
dato1: "Hola amigos!",
dato2: true
});

O podríamos enviar sólo alguno de los datos de configuración, para que el resto se tomen por defecto:

$("<div></div>").miPlugin({
dato2: 2.05
});

O no enviar ningún dato al crear el plugin para utilizar los valores por defecto en todas las opciones de configuración.

$("p").miPlugin();

lunes, 1 de diciembre de 2014

Definir opciones por defecto en el código del plugin

Con el siguiente código podemos definir las variables de configuración por defecto de un plugin y combinarlas con las variables de options enviadas por parámetro al invocar el plugin.

jQuery.fn.miPlugin = function(cualquierCosa, opciones) {
//Defino unas opciones por defecto
var configuracion = {
dato1: "lo que sea",
dato2: 78
}
//extiendo las opciones por defecto con las recibidas
jQuery.extend(configuracion, opciones);
//resto del plugin
//donde tenemos la variable configuracion para personalizar el plugin
}
La función principal del plugin recibe dos parámetros, uno "cualquierCosa" y otro "opciones". El primero supongamos que es algo que necesita el plugin, pero la configuración, que es lo que nos importa ahora, se ha recibido en el parámetro "opciones".
Ya dentro de la función del plugin, se define el objeto con las opciones de configuración, con sus valores por defecto, en una variable llamada "configuracion". En la siguente línea se mezclan los datos de las opciones de configuración por defecto y las recibidas por el plugin al inicializarse. Luego podremos acceder por medio de la variable "configuracion" todas las opciones del plugin que se va a iniciar. 
Nota: El modo en cómo se mezclan los datos por medio de extend(), podéis revisar en el artículo sobre el método jQuery.extend().

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.