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().