Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.)
jQuery
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 6:22 PM 2009-04-21
Hay muchos de Uds que iban utilizando JQuery y los plugins adicionales, han chocado con un problema: después de la actualización del sistema uCoz los plugins han dejado de funcionar y firebug informa sobre el error (jQuery...is not a function();).
Generalmente, esto está provocado por el conflicto de JQuery que Uds conectan, y aquel que se conecta por el sistema. (O si tiene una parte del código que está basada sobre Prototype).

Pero los especialistas de jQuery han previsto esa situación y han inventado una función llamada jQuery.noConflict() que devuelve su su función vieja $ en caso de que necesitan su función anterior $.

¿Cómo funciona esto?
Es suficiente escribir en el cuerpo (después de <body>) de la página:

Code
<script type="text/javascript">jquery.noConflict();</script>

o directamente ante el código de cualquiera función.

Pero, ¿porqué después de <body>?, tal vez pregunten Uds. Explico: por que el orden de conexión de los scripts es así que jQuery uCoz se conectará siempre último, lo que significa que éste ocupará $, y para devolver el control $, Prototype'y, la función noConflict ha de llamarse sólo después de conectar jQuery uCoz, lo que quiere decir que es más razonable y correcto es poner esto después de <body> y antes de todos los scripts en el cuerpo.

¡Lo importante acerca de Prototype!
En caso de que Uds utilizan Prototype, es importante recordar que si han pasado $ ya atrás a Prototype, ahora todas sus funciones jQuery han de empezar con jQuery(“...”).hide();.
También pueden indicar su variable:

Code
<script type="text/javascript">var $ucoz = jquery.noConflict();</script>

Entonces respectivamente – $ucoz(“...”).hide();

En caso de que pasan $ de un jQuery al otro, no hay sentido de escribir su variable o empezar con jQuery una línea.

Por ejemplo: Uds tienen un plugin de la galería.

Su código.

Code

<html>
         <head>
         <title></title>

         <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
         <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
         </head>
         <body>
         ...
         <script type="text/javascript">
          $(document).ready(function() {
           var gallery = $('#gallery').galleriffic('#navigation', {
            ...
           }
          }
         </script>
         </body>
         </html>

Será suficiente ante $(document)... añadir jQuery.noConflict() en una línea más arriba.

Ya. ¡Ahora todos a tomar cerveza pues sí hemos hecho un trabajito!

P.S.

Documentación oficial – http://docs.jquery.com/Core/jQuery.noConflict

También la documentación acerca de jQuery propone el siguiente método:

Code
(function($) {
        // Dentro de este bloque $ se refiere a jQuery
})(jQuery);
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 1:58 PM 2010-02-26
jQuery: crear un contador de caracteres para un textarea (estilo Twitter)

Con un plugin de jQuery podremos lograr la misma funcionalidad que utiliza Twitter en sus cajas de texto, alertando (con cada modificación del texto ingresado) la cantidad de caracteres restantes.

Imagina que al escribir un mensaje, de pronto, se terminan los caracteres disponibles. Si lo hubieses sabido antes habrías sido más sintético. Aprende cómo mejorar la usabilidad en este aspecto.

Cómo funciona
La primera cosa que este plugin hace es crear un elemento hermano ("sibling", que se añade inmediatamente después del elemento form), que será el contador ("counter"), donde se almacena la información de caracteres restantes.

En cada evento en que se presiona una tecla o el valor de campo de texto cambia la función de conteo se dispara y el contenido de este elemento contador se cambia en consecuencia.

Si el recuento de caracteres restantes llega al “warning” (se acerca a cero) una clase de CSS es añadida. Esta clase lo que hará es cambiar el color de la información del contador de caracteres (por ejemplo, pondrá los números en amarillo). Si el contador llega a cero y va más allá, se añade otra clase por lo que podemos utilizar otro estilo para el límite excedido (de nuevo, por ejemplo, color rojo).

Sólo para que puedas entenderlo un poco mejor, este es el código que el plugin genera por defecto:

Quote
<span class="counter">140</span>

Opciones del plugin (y valores por defecto)

limit: 140
El límite de caracteres que deseas setear para tu textarea o input. Debe ser un número.

warning: 25
Cuando los caracteres restantes llegan al número seteado con esta opción la clase css de nombre “warning” se aplicará al elemento contador.

counterElement: 'span'
El tipo de elemento que deseas inyectar en el DOM como contador. Por defecto, es un elemento SPAN, pero puedes utilizar p, div, etc.

css: 'counter'
Nombre de clase añadida al contador. Utiliza esta clase como un selector de css para cambiar la apariencia del elemento.

cssWarning: 'warning'
Nombre de clase añadida al contador una vez que se llega al número de “advertencia” (“warning”).

cssExceeded: 'exceeded'
Nombre de la clase añadida al elemento contador una vez que llega a cero.

counterText: ''
Si deseas añadir algún texto al número de caracteres restantes, lo puedes hacer utilizando esta opción. Por defecto se encuentra vacía.

Así es como luce el código de implementación por defecto:

Quote
$("#mensaje1").charCount();

Y esta es la implementación del plugin con algo de personalización:

Quote
$("#mensaje2").charCount({
allowed: 50,
warning: 20,
counterText: 'Caracteres restantes: '
});

Aquí podrán echar un vistazo al CSS utilizado en los demos:

Quote
form .counter{
position:absolute;
right:0;
top:0;
font-size:20px;
font-weight:bold;
color:#ccc;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}

Aquí tienes una demo del plugin en funcionamiento.
También puedes descargar los archivos desde la página del autor.

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 5:09 PM 2010-05-27
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().

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.

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.

En el ejemplo vamos a tener una lista como esta:

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

Quote
$("#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().

Quote
$("#milista").fadeIn();

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.

Quote
<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.

Quote
$("#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 [/b]fadeTo()[/b] 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.

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.

Quote
$("#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.

Quote
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 post. 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.

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.

Quote
<!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>

Si lo deseamos, podemos ver el ejemplo en marcha en una página aparte.

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 1:07 PM 2010-06-10
Crear tabs o pestañas con jQuery y CSS – Estructurando el contenido de una página web

Cada vez nos gusta más jQuery y las cosas que se pueden hacer con este framework.

Un efecto en particular que me parece muy útil cuando quieres desplegar una cantidad grande de información en poco espacio es el uso de los tabs o pestañas.

El uso de tabs o pestañas, es una buena forma de estructurar la información de una página web de forma clara y diferenciada, ayudando al usuario a distinguir grupos de contenidos, así como los subgrupos que estos contienen.

Mediante el uso de jQuery suavizamos el comportamiento que las pestañas tendrían con CSS puro. Puedes ver un ejemplo de tabs hechos con CSS puro aquí: CSS Tabs.

Como puede apreciarse el cambio de una pestaña a otra es muy brusco. Con jQuery podemos solventar este aspecto del CSS.

Para que te hagas una idea de lo que vamos a hacer en este tutorial, aquí tienes una imagen de ejemplo:

Y puedes ver el ejemplo en marcha aquí: ejemplo de tabs.

Esta página es de Soh Tanaka, un diseñador de Los Angeles y un maestro del CSS.

El código para crear los tabs con jQuery y CSS
Bueno, para crear este efecto de pestañas en las páginas en las que trabajo, utilizo el código que el mismo Soh Tanaka publicó hace un tiempo en su blog, tabs simples con CSS y jQuery. Este diseñador creó un tutorial para incluir contenido en Tabs usando jQuery y CSS.

Un sencillo HTML

Básicamente el código HTML es el siguiente:

Quote
<ul>
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>

<div>
<div id="tab1">
<!--Content-->
</div>
<div id="tab2">
<!--Content-->
</div>
</div>

La magia viene con CSS

Este el CSS de los tabs:

Quote
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not
listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with
its content--*/
}

Y este el CSS del contenido de los tabs:

Quote
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

Y para rematar los tabs, jQuery en acción

Y este el JavaScript para activar jQuery en los tabs (pestañas). Va en el header de la página, o mejor aún, en un archivo externo:

Quote
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to
identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});

Hay que acordarse también de cargar el core de jQuery en el head para que funcione. Se recomienda cargarlo del CDN de Google en lugar de almacenarlo en el servidor, para evitar sobrecargar el hosting:

Quote
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 4:57 PM 2010-06-15
Cómo dar un efecto de “desvanecimiento” a tus links con jQuery

Algunos sitios web poseen un lindo efecto en el pie de página, que hace que los links en la parte inferior de una lista se desvanezcan, haciendo énfasis por medio de la intensidad del color en los links más importantes.

En esta nota, te daremos una pequeña guía con la que podrás fundir un color en una serie de elementos utilizando jQuery. También podrás ver como valerte de CSS para lograr el mismo efecto con menos código.

Descarga aquí el código fuente»
Visualiza el demo aquí»

En el ejemplo de este tutorial vamos a desvanecer links de una lista desordenada como se muestra en el ejemplo a continuación:

Quote
<ul id="links">
<li><a href="#">Some text here</a></li>
<li><a href="#">Some text here</a></li>
...
</ul>

Fundir links utilizando la propiedad de opacidad
En el primero ejemplo, usaremos la propiedad opacidad (opacity) de CSS y aplicaremos distintos niveles de opacidad a cada link de la lista desordenada. Para hacer esto necesitamos dos variables: el número de links y el número que determinará el paso para que la opacidad disminuya. En el código podrán ver que para el paso determinante, dividimos 90 por la cantidad de links. Esto significa que el ultimo link será 90% transparente. Si dividiéramos 100 con la cantidad de links, el último enlace sería completamente transparente, es decir, invisible.

Quote
function fadeElements(color) {
var count = $("ul#links li").size();
var step = 90 / count;
$("ul#links li").each(function(i) {
var currentOpacity = 100 - (step * i);
$(this).find("a").css("color", color)
.css("opacity", currentOpacity = 100 ? "1" : "0." + parseInt(currentOpacity));
});
}

A continuación, determinamos la intensidad de la opacidad para cada link (currentOpacity) y a asignamos a través de CSS, junto con el color seleccionado (el cuál se pasa a la función por medio de parámetro). Noten que se utiliza la declaración “id” para asignar el valor de opacidad 1 si se trata del primer link, y menos que uno para todos los demás.

Quote
$(document).ready(function() {
fadeElements("#000");
});

Luego puedes llamar a la función fadeElements y pasarle el color que deseas que se funda. En el ejemplo de arriba es negro.

Fundir links utilizando valores RGB
Descarga aquí el código fuente»
Visualiza el demo aquí»

Si por alguna razón no deseas utilizar opacidad, aquí está la versión complicada: utilizar valores RGB. Las primeras cuatro funciones del código que sigue convierten valores de color Hex en valores rojo, verde y azul.

Quote
function HexToR(h) { return parseInt((cutHex(h)).substring(0, 2), 16) }
function HexToG(h) { return parseInt((cutHex(h)).substring(2, 4), 16) }
function HexToB(h) { return parseInt((cutHex(h)).substring(4, 6), 16) }
function cutHex(h) { return (h.charAt(0) == "#") ? h.substring(1, 7) : h }

La función fadeElements que hemos visto antes en el tutorial, es ahora un poco más complicada. Básicamente, realiza el mismo trabajo, es decir, desvanece colores. Sólo que está vez no hará que un color sea transparente sino que escalará el color original y tendrá como resultado distintas variaciones.

function fadeElements(color) {
var count = $("ul#links li").size();
var r = HexToR(color);
var g = HexToG(color);
var b = HexToB(color);
var stepR = (230 - r) / count;
var stepG = (230 - g) / count;
var stepB = (230 - b) / count;
$("ul#links li").each(function(i) {
var valueR = parseInt(r + (stepR * i));
var valueG = parseInt(g + (stepG * i));
var valueB = parseInt(b + (stepB * i));
$(this).find("a").css("color", "rgb(" + valueR + "," + valueG + "," + valueB + ")");
});
}

La lógica es similar al primer ejemplo. También determinamos la cantidad de links y la cantidad de decrecimiento de los valores rojo, verde y azul para cada uno de estos. El número 230 es 90% de 255 el cual representa el valor más alto de un color en el modelo RGB. Luego, para cada link creamos el color haciendo que disminuyan los valores rojo, verde y azul del color original. No suena tan complicado ¿Verdad?

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 6 | 11:50 AM 2010-06-17
jQuery: plugin para darle movimiento a tus enlaces

En esta nota te presentamos un plugin jQuery que produce un tipo de efecto conocido como “link nudging“. Esto consiste en una técnica de mouseover/mouseout bastante interesante.

En este caso, les dejamos este fantástico plugin en un formato un poco más flexible, dado que le permite al desarrollador programar la propiedad y dirección para animar el elemento y la forma.

El Javascript jQuery

Quote
//Define el plugin
$.fn.nudge = function(params) {
//setea parametros por default
params = $.extend({
amount: 20, //cantidad de pixels para paddear / marginizar
duration: 300, //cantidad de milisegundos que debe tomarse
property: 'padding', //la propiedad de animar (también puede usarse margen)
direction: 'left', //dirección hacia la qué animar
toCallback: function() {}, //función para ejecutar cuando la animación MO se completa
fromCallback: function() {} //función para ejecutar cuando la animación MOut se completa
}, params);
//Para cada elemento que deba ser sacudido...
this.each(function() {
//variables
var $t = $(this);
var $p = params;
var dir = $p.direction;
var prop = $p.property + dir.substring(0,1).toUpperCase() + dir.substring(1,dir.length);
var initialValue = $t.css(prop);
/* fx */
var go = {}; go[prop] = parseInt($p.amount) + parseInt(initialValue);
var bk = {}; bk[prop] = initialValue;

//Proceder a zumbar el hover
$t.hover(function() {
$t.stop().animate(go, $p.duration, '', $p.toCallback);
}, function() {
$t.stop().animate(bk, $p.duration, '', $p.fromCallback);
});
});
return this;
};

/* usages */
$(document).ready(function() {
/* usage 1 */
$('#nudgeUs li a').nudge();
/* usage 2 */
$('#nudgeUs2 li a').nudge({
property: 'margin',
direction: 'left',
amount: 30,
duration: 400,
toCallback: function() { $(this).css('color','#f00'); },
fromCallback: function() { $(this).css('color','#000'); }
});
});

Este plugin también detecta las programaciones originales de las propiedades de la animación para que el desarrollador no tenga que programarlas. Además, también le permite al desarrollador ajustar el callback animado en caso de que desee realizar algo verdaderamente creativo.

Haz clic aquí para ver un demo»

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 7 | 12:10 PM 2010-06-17
Plugin de jQuery para hacer zoom

Todo diseñador que tenga un poco de inventiva y creatividad, seguramente encontrará muy útil este plugin llamado AnythingZoomer, un plugin jQuery pensado para sorprender a nuestros visitantes.

Con este plugin, al posar el mouse sobre un área pequeña, nos desplegará una mini-ventana en la que podremos ver un acercamiento del lugar donde nos hemos establecido. ¿Lo quieres en tu sitio web? En esta nota te contamos cómo.

Se trata de un plugin flexible dado que es bastante fácil de personalizar mediante CSS, poniendo a nuestra disposición tres tipos de vista distintas: “pequeña”, “grande” y “zoom”.

A continuación podrán ver varias demostraciones de cómo funciona este interesante plugin.

Ver algunos ejemplos de uso »

Descargar el plugin »

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 8 | 3:14 PM 2010-06-18
Increíble efecto hover con jQuery

Este puede ser una especie de continuación del post anterior. En este breve tutorial aprenderás cómo hacer un efecto hover increíble en pocos pasos, porque no todo lo bueno tiene que costar un gran esfuerzo.

Para lograr el efecto sólo es necesario un poco de CSS y algo de jQuery. La idea es armar una galería de imágenes con 9 thumbnails. Al posar el mouse o ratón sobre cualquiera de los thumbnails, éste se agrandará creando un efecto óptimo de acercamiento. Echa un vistazo…

Construye las bases (XHTML)
Nuestro markup será muy sencillo, se tratará simplemente de una lista desordenada de tres columnas.

Quote
<ul class="thumb">
<li><a href=”#”><img src=”thumb1.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb2.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb3.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb4.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb5.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb6.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb7.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb8.jpg” alt=”" /></a></li>
<li><a href=”#”><img src=”thumb9.jpg” alt=”" /></a></li>
</ul>

Diseña la apariencia (CSS)
Es fundamental que le prestes atención a las propiedades de posicionamiento entre los ítems de la lista y la imagen. Es necesario asegurarse de que la imagen “hovered” se encuentre sobre las otras imágenes, por lo que esta parte es clave.

Quote
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Aquí ponemos posicionamiento absoluta */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Aquí va el tamaño del thumbnail pequeño */
-ms-interpolation-mode: bicubic; /* Arreglo para IE para escalar de forma cúbica */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center; /* La imagen que usamos de fondo en el efecto hover*/
border: none; /* Quitamos el border cuando estamos en hover */
}

Dale vida (jQuery)
Básicamente todo lo que estamos haciendo es animar el tamaño del thumbnail, posicionando absolutamente las coordenadas y haciendo padding al pasar el mouse por encima. Durante esta animación, también cambiamos el valor del z-index, para que la imagen seleccionada se mantenga sobre las demás.

Quote
$("ul.thumb li").hover(function() {
$(this).css({’z-index’ : ‘10′}); /*Agregamos un valor de z-index mayor para que la imagen se mantenga arriba */
$(this).find(’img’).addClass(”hover”).stop() /* Le agregamos la clase “hover” */
.animate({
marginTop: ‘-110px’, /* Las siguientes 4 líneas alinearán verticalmente la imagen */
marginLeft: ‘-110px’,
top: ‘50%’,
left: ‘50%’,
width: ‘174px’, /* Aquí va la nueva medida para el ancho */
height: ‘174px’, /* Aquí va la nueva medida para el alto */
padding: ‘20px’
}, 200); /* Este valor de “200″ es la velocidad de cuán rápido/lento se anima este hover */
} , function() {
$(this).css({’z-index’ : ‘0′}); /* Volvemos a poner el z-index nuevamente a 0 */
$(this).find(’img’).removeClass(”hover”).stop() /* Quitamos la clase “hover” y detenemos la animación*/
.animate({
marginTop: ‘0′, /* Volvemos a poner el valor de alineación como el default */
marginLeft: ‘0′,
top: ‘0′,
left: ‘0′,
width: ‘100px’, /* Volvemos el valor de ancho como al inicio */
height: ‘100px’, /* Volvemos el valor de ancho como al inicio */
padding: ‘5px’
}, 400);
});

No será tan eficiente como la versión Flash pero es un efecto bastante genial. Y si cambias las coordenadas del posicionamiento absoluto podrás crear varias formas distintas de que el efecto hover aparezca. ¡Pon a prueba tu creatividad!

Haz clic aquí para ver cómo funciona en vivo »

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 9 | 6:13 PM 2010-06-18
Cómo diseñar un sitio web con scroll horizontal con CSS y jQuery

Lo natural en la web parece ser el flujo vertical de los elementos, cuanto más contenidos hay en una página, más larga se vuelve la misma. Esto responde a criterios de usabilidad dado que estamos acostumbrados a leer líneas de texto cortas que, una debajo de otra, conforman los párrafos de un texto.

Pero ¿se pueden romper los estándares? La respuesta es: “depende de tu propósito”. Si lo que quieres es distinguirte, tu público tiene el ojo entrenado y el tipo de contenido de tu sitio amerita dinamismo ¡bienvenido sea el scroll horizontal! Entérate cómo conseguirlo y conoce los mejores ejemplos.

Scroll horizontal en tu sitio web
Seguramente algunos peguen un grito porque voy a sugerir una estructura de tabla para el layout. Pero déjenme explicar el por qué. Lo que necesitamos es un elemento que se pueda expandir horizontalmente como una fila de celdas de una tabla. Las celdas se expandirán lo suficiente como para contener cualquier elemento/s que le pongamos dentro sin cambiar a la línea de abajo si no se ha especificado una nueva fila.

Supongamos que por ahora sólo queremos mostrar una serie de posts de nuestro blog en forma horizontal. Necesitaríamos la siguiente estructura:

Quote
<table>
<tr>
<td>
.. blog post #1
</td>
<td>
.. blog post #2
</td>
<td>
.. blog post #3
</td>
</tr>
</table>

Asqueroso ¿no? Nó sólo porque estamos usando una tabla, sino porque nada de lo que hicimos fue semántico. Pero este código lo generaremos dinámicamente. La estructura que vamos a usar en nuestro HTML, de acuerdo con el formato anterior, sería:

Quote
<div class="post">
.. blog post #1 ..
</div>
<div class="post">
.. blog post #2 ..
</div>
<div class="post">
.. blog post #3 ..
</div>

¡Usando jQuery podemos tener lo mejor de ambos mundos!

El scroll funcionará incluso cuando Javascript o CSS estén desactivados.

Aplicando jQuery y Javascript para lograr el scroll horizontal
Pensemos en lo que queremos por resultado:

• Reunir todos los posts en una misma tabla y en una única fila.
• Asignar a cada post una celda de la tabla.

Este es el script que necesitamos incluir en el head de nuestra página para utilizar jQuery:

Quote
<script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td>");
});
</script>

¡Eso es lo que hace la magia! Fíjate cómo el cellspacing es agregado como un atributo inline del elemento tabla. Normalmente buscaríamos aplicar un padding a las celdas mediante estilos CSS, pero aquí queremos asegurarnos de que cada post del blog sea legible a pesar de que se hayan desactivado los estilos de la página.

Por ende, nuestro CSS debería ser así:

Quote
/*
RESETEO y SETUP BASICO
*/
* { margin: 0; padding: 0; }
body { font-size: 62.5%;
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: #121212; padding: 20px; color: #999; }
table tr { vertical-align: top; }
/*
ESTRUCTURA
*/
.post { width: 500px; }

/*
TYPOGRAFIA
*/
p { font-size: 1.2em; margin: 0 0 15px 0; }
h1 { font-family: Helvetica, sans-serif; font-size: 4.0em;
letter-spacing: -1px; color: #ccc; }
h2 { font-family: Helvetica, sans-serif; font-size: 3.0em;
letter-spacing: -1px; color: #ccc; }
a { color: #0066cc; }
a:hover { color: #ccc; }

El ancho estático del div .post controla el ancho de cada bloque. La propiedad vertical-align de la fila de la tabla los mantiene alineados al principio de las celdas de la tabla. Por defecto se asignaría al medio, de modo que es necesario.

  • Haz clic aquí para ver la demo de el scroll horizontal que hemos creado.
  • Descarga los archivos para editarlos tú mismo desde el sitio de CSS-Tricks.

    Algunos ejemplos de buenos sitios con scroll horizontal

    Para que te inspires:

    • norma cordova photography
    • jodi moore | portfolio
    • Urban Outfitters: Blog
    • Beca
    • Radio Zen
    • The Horizontal Way

    ¡Espero ver tu sitio con scroll horizontal muy pronto!

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 10 | 5:42 PM 2010-06-21
    Ventana Modal con jQuery en 3 pasos

    Las ventanas modal están adquiriendo cada vez más popularidad debido a su creciente uso en webs como WordPress, que han demostrado sus beneficios en cuanto a usabilidad dentro de aplicaciones online.

    Pero aunque parezca un recurso reservado a grandes aplicaciones, lo cierto es que implementar ventanas modal es más sencillo de lo que parece. Aquí les indicamos en pocos pasos cómo crear una ventana modal utilizando jQuery.

    El jQuery selecciona todas las etiquetas anchor con atributo rel configuradas en “modal” y toma el id DIV definido en el href para mostrarlo como una ventana modal.

    Este ejemplo te mostrará cómo crear una ventana modal que mostrará el contenido de un DIV #ID.

    Objetivos
    1. Poder buscar en el documento HTML completo una etiqueta REL=p de atributo "modal" para que cuando los usuarios hagan clic en ella, se muestre el contenido del #ID DIV en el atributo HREF de la ventana modal.
    2. Crear una máscara que llene la pantalla completa.
    3. Crear una ventana modal fácil y simple de modificar.

    Código HTML y atributos de etiqueta A

    Quote
    <!-- #dialog es el id de un DIV definido en el código que está a continuación -->
    <a href=”#dialog” name=”modal”>Simple Modal Window</a>

    <div id="boxes">

    <!-- #Aqui personalizas tu ventana modal -->

    <div id="dialog" class="window">
    <b>Testeo de la Modal Window</b> |

    <!-- el botón close está definido como clase close<a href="#" class="close">Close it</a>

    </div>

    <!-- No elimines el div#mask, porque lo necesitarás para rellenar la pantalla -->
    <div id="mask"></div>
    </div>

    Código CSS

    Quote
    <style>

    /* Z-index of #mask must lower than #boxes .window */
    #mask {
    position:absolute;
    z-index:9000;
    background-color:#000;
    display:none;
    }

    #boxes .window {
    position:absolute;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
    }


    /* Customize your modal window here, you can add background image too */
    #boxes #dialog {
    width:375px;
    height:203px;
    }
    </style>

    JavaScript

    Quote
    <script>

    $(document).ready(function() {

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
    //Get the A tag
    var id = $(this).attr('href');

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000);

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
    $('#mask, .window').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    });

    });

    </script>

    Es bastante directo y fácil de entender. Recuerda que debes incluir el framework jQuery.

    Conclusión
    Sí, eso es todo lo que necesitas para realizar una simple ventana modal con jQuery. En este tutorial, se muestra el concepto de cómo mostrar contenido DIV dentro de una ventana modal. Sin embargo, puedes desarrollarlo todavía más para aceptar un link y mostrarlo en un iFrame o una galería de imágenes.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 11 | 12:07 PM 2010-06-25
    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 post 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.

    Personalización del plugin por medio de objeto de opciones
    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.

    Quote
    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;
    };

    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.

    Quote
    //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");
    };

    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:

    Quote
    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;
    };

    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:

    Quote
    <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:

    Quote
    $(".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.

    Quote
    $("#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.

    Para acabar, se puede ver el ejemplo en funcionamiento en una página aparte.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 12 | 6:26 PM 2010-08-16
    Plugin para seleccionar y deseleccionar varios checkbox con jQuery

    Desarrollo de un plugin en jQuery para hacer un enlace con el que seleccionar y deseleccionar toda una lista de checkbox de una vez.



    Lo que vamos a construir es un sistema para seleccionar y deseleccionar un grupo de checkbox por medio de un enlace. Al hacer clic en un enlace se seleccionarán de una vez todos los checkboxes del grupo y al hacer clic en otro se quitará la selección de todos, ambos casos sin importar cómo estaban previamente.

    Es una utilidad sencilla de realizar, que suele verse en distintas páginas, donde hay formularios con un listado grande de checkbox. Todo ello lo haremos en formato de plugin para que se pueda utilizar en cualquier página web donde se desee.

    Adicionalmente, a este ejemplo le hemos incorporado un sistema para cargar una opción, que sirve para indicar si deseamos o no que el grupo de checkboxes esté habilitado o no. Si está habilitado podremos seleccionarlos y deseleccionarlos al pulsar sobre los checkbox y sobre los enlaces de seleccionar/deseleccionar todos. Si no están habilitados, sólo podríamos cambiar sus valores por medio de los enlaces.

    Instrucciones para marcar y desmarcar un chekbox en jQuery
    La funcionalidad de seleccionar y deseleccionar un checkbox se consigue a través del atributo HTML "checked" de la etiqueta INPUT. Si tiene el atributo el checkbox estará marcado y si no tiene el atributo, aparecerá desmarcado.

    Para marcar un checkbox utilizaríamos este código:

    Quote
    //siendo la variable campo un objeto jQuery que contiene uno o más checkboxes
    campo.attr("checked","1");

    Para quitar la marca de un checkbox se puede hacer quitando el atributo "checked":

    Quote
    //campo es uno o varios campos check en un objeto jQuery
    campo.removeAttr("checked");

    Instrucciones para habilitar/deshabilitar un checkbox
    Un checkbox, así como cualquier otro campo de formulario se puede habilitar o deshabilitar a través del atributo "disabled" del campo INPUT.

    Este sería el código para deshabilitar el campo:

    Quote
    campo.attr('disabled', true);

    Ahora podemos ver el código para habilitar el campo, que simplemente quita el atributo disabled.

    Quote
    campo.removeAttr('disabled');

    En ambos casos se supone que la variable campo es un objeto jQuery que contiene uno o más campos INPUT de formulario.

    Plugin para generar enlaces de marcar y desmarcar todos los campos checkbox
    Ahora que ya sabemos cómo realizar esos pasos básicos para alterar los checkboxes, pasemos al código del plugin jQuery, que esperamos os resulte bastante sencillo.

    Nuestra idea es que el plugin se invoque sobre un contenedor vacío, donde se generarán y se insertarán los enlaces para seleccionar y deseleccionar los checkbox.

    Como se va a comprobar, el plugin recibe un par de parámetros, uno es un selector para acceder al grupo de checkboxes que debemos marcar/desmarcar y otro es una lista de opciones en formato de objeto para configurar el plugin.

    Quote
    (function($) {
    $.fn.seleccionarDeseleccionarTodo = function(selectorCheckboxes, opciones) {
    //opciones de configuración por defecto
    var configuracion = {
    habilitados: true
    };
    //Las extiendo con las opciones recibidas al invocar el plugin
    $.extend(configuracion, opciones);

    this.each(function(){
    //todos los checkboxes
    var camosCheck = $(selectorCheckboxes);
    //capa para los controles de seleccionar/deseleccionar checkboxes
    elem = $(this);

    //creo el enlace para seleccionar todo
    var enlaceSel = $('<a href="#">Seleccionar</a>');
    //meto el enlace en la página
    elem.append(enlaceSel);
    //un separador de los enlaces
    elem.append($("<span> | </span>"));
    //creo el enlace para deseleccionar todo
    var enlaceDesel = $('<a href="#">Deseleccionar</a>');
    //meto el enlace en la página
    elem.append(enlaceDesel);

    //miro si los campos deben estar habilitados
    if(configuracion.habilitados){
    habilitarCampos();
    }else{
    deshabilitarCampos();
    }


    ////////////////////////////////////////////////////////////
    //funciones
    ////////////////////////////////////////////////////////////
    function habilitarCampos(){
    camosCheck.removeAttr('disabled');
    }
    function deshabilitarCampos(){
    camosCheck.attr('disabled', true);
    }
    function seleccionarTodosCampos(){
    camosCheck.attr("checked","1");
    }
    function deseleccionarTodosCampos(){
    camosCheck.removeAttr("checked");
    }

    //evento para el enlace de deseleccionar todos los campos
    enlaceDesel.click(function(e){
    e.preventDefault();
    deseleccionarTodosCampos();
    });
    //añado un evento al enlace para seleccionar todos los campos
    enlaceSel.click(function(e){
    e.preventDefault();
    seleccionarTodosCampos();
    });

    });
    return this;
    };
    })(jQuery);

    El código anterior está comentado para que se puedan ir entendiendo los pasos realizados. Además, hemos separado el código en diversas funciones que esperamos que ayuden que sea más claro.

    Ejemplo para poner en marcha el plugin de marcar/desmarcar checkbox
    Para poner en marcha el plugin necesitamos un HTML con un contenedor vacío para los enlaces de marcar/desmarcar y varios checkbox. Algo como esto:

    Quote
    <form method="post" action="#">
    <div id="seleccionardeseleccionar"></div>
    <input type="checkbox" name="si" class="controlseleccionar"> jQuery
    <br>
    <input type="checkbox" name="si" class="controlseleccionar"> Eventos
    <br>
    <input type="checkbox" name="si" class="controlseleccionar"> Plugins
    <br>
    <input type="checkbox" name="si" class="controlseleccionar"> Otra cosa
    </form>

    Ahora, con un poco de jQuery invocamos el plugin:

    Quote
    $("#seleccionardeseleccionar").seleccionarDeseleccionarTodo(".controlseleccionar");

    Como se puede ver, se invoca sobre el elemento DIV donde queremos ver los enlaces y luego se envía el selector para los campos checkbox, que es ".controlseleccionar", pues a todo el grupo de INPUT les pusimos esa clase CSS.

    Podríamos también invocar el código del plugin enviando el objeto de opciones en un segundo parámetro:

    Quote
    $("#seleccionardeseleccionar").seleccionarDeseleccionarTodo(".controlseleccionar", {
    habilitados: false
    });

    Eso es todo. Ahora si lo deseamos, podemos acabar echando un vistazo al ejemplo en marcha.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 13 | 6:55 PM 2010-08-30
    Método data() Core jQuery

    El método data() del core de jQuery sirve para almacenar información en los elementos de la página, en pares nombre de variable y valor. Veremos también el método removeData() para eliminar datos almacenados.

    Seguimos viendo componentes interesantes del "Core" de jQuery, donde están las clases y métodos más básicos de este framework Javascript. En esta entrada explicaremos el uso del método data() y removeData(), que sirven para almacenar, consultar y eliminar cualquier tipo de dato en elementos de la página.

    En algunas ocasiones resulta útil almacenar variables u objetos en determinados elementos de la página. Aunque quizás no es una acción muy corriente en los primeros pasos con jQuery, en el futuro encontraréis que resulta útil y veréis herramientas y plugins que utilizan este mecanismo para su operativa. De modo que conviene al menos saber que esto es posible y conocer de qué manera podemos utilizar los elementos de la página para guardar cosas en ellos.
    Para ello vamos a comentar dos métodos distintos que forman parte del core de jQuery:

    Método data()
    Este método del objeto jQuery sirve tanto para guardar un dato en un elemento como para consultarlo. Según el número de parámetros que reciba, realiza una u otra acción.
    • Si recibe un parámetro data(nombre): devuelve el valor que haya en el dato cuyo nombre se pasa por parámetro.
    • Si recibe dos parámetros data(nombre, valor): almacena un dato, cuyo nombre recibe en el primer parámetro, con el valor que recibe en el segundo parámetro.

    Como data() es un método que pertenece al objeto jQuery, podemos almacenar estos pares (dato, valor) en cualquiera de los elementos que seleccionemos con la función jQuery().

    Veamos un caso de uso simple. Por ejemplo tenemos un elemento de la página como este:

    Quote
    <div id="capa">
    En esta división (elemento id="capa") voy a guardar y leer datos sobre este elemento.
    </div>

    Ahora podríamos usar le método data() de la siguiente manera:

    Quote
    $("#capa").data("midato","mivalor");

    Con esta línea hemos guardado un dato llamado "midato" con el valor "mivalor", en el elemento con identificador (atributo id) "capa".

    Ahora podríamos leer ese dato en cualquier momento para acceder a su valor, de la siguiente manera:

    Quote
    alert($("#capa").data("midato"));

    En esta línea de código extraemos el dato "midato" del elemento con identificador "capa" y lo mostramos en una caja de alerta.

    Podemos ver una página en marcha que hace uso de esas dos funciones.

    Método removeData()
    Este método sirve para eliminar un dato de un elemento y su funcionamiento es tan simple como enviar por parámetro el dato que se quiere eliminar del elemento.

    Quote
    $("#capa").removeData("midato")

    Con esta línea habríamos eliminado el dato llamado "midato" del elemento con identificador "capa".

    Ejemplo completo de los métodos data() y removeData() del Core de jQuery
    Veamos un ejemplo completo del uso de estos métodos que acabamos de aprender. Se trata de una página que tiene un elemento sobre el que vamos a guardar datos. Además tiene tres botones para guardar un dato, leerlo y borrarlo. El dato que se guardará tendrá como valor lo que se haya escrito en un campo de texto que aparece también en la página.

    Podemos ver el ejemplo en marcha en una página aparte.

    Tenemos, para comenzar, un elemento de la página, que es donde vamos a guardar los pares dato-valor con data().

    Quote
    <div id="division">
    En esta división (elemento id="division") voy a guardar datos con la función data y luego los voy a leer.
    </div>

    Luego tendremos este formulario, que contiene el campo de texto así como los tres botones de los que hemos hablado.

    Quote
    <form name="formul">
    Escribe un valor a guardar, leer o eliminar:
    <input type="text" name="valor" id="valor">
    <br>
    <input type="button" value="guardar dato" id="guardar">
    <input type="button" value="leer dato" id="leer">
    <input type="button" value="eliminar dato" id="eliminar">
    </form>

    Ahora se trata de asignar los comportamientos a estos botones con Javascript, haciendo uso de jQuery.

    Este sería el script para agregar el evento click al botón de guardar datos.

    Quote
    $("#guardar").click(function(evento){
    var valor = document.formul.valor.value;
    //Esta misma línea de código se puede codificar así también con jQuery
    //var valor = $("#valor").attr("value");
    $("#division").data("midato",valor);
    $("#division").html('He guardado en este elemento (id="division") un dato llamado "midato" con el valor "' + valor + '"');
    });

    Como se puede ver, primero se recibe el texto del campo de texto que había en el formulario. Para ello se muestran dos maneras de hacerlo:

    • A través de la jerarquía de objetos del navegador, con document.formul.valor.value
    • A través de su identificador, con un método de jQuery llamado attr() que sirve para recuperar el valor de un atributo HTML pasado por parámetro sobre el elemento que recibe el método. Este modo de obtener el atributo value del campo de texto está comentado, pues sólo lo quería señalar, para que se vea el modo de acceder a un elemento de formulario utilizando las funciones del framework Javascript jQuery.

    Luego, se guarda el dato "midato" con el valor que se recuperó del atributo value del campo de texto. Para ello utilizamos el método data() tal como comentábamos.

    Por último se muestra un mensaje en el HTML del elemento con id="division", por medio del método html() de jQuery, para informar sobre la acción que acabamos de realizar.

    Ahora mostramos el código para asignar un comportamiento al evento click sobre el segundo botón:

    Quote
    $("#leer").click(function(evento){
    valor = $("#division").data("midato");
    $("#division").html('En este elemento (id="division") leo un dato llamado "midato" con el valor "' + valor + '"');
    });

    Como se puede ver, se recupera el valor del dato "midato" guardado sobre el elemento "#division[b]" (etiqueta HTML con [b]id="division"), y se almacena en una variable. Luego se crea un mensaje para mostrar el valor del dato.

    Para acabar, tenemos el código del evento click sobre el botón de eliminar el contenido de un dato, que hace uso de removeData().

    Quote
    $("#eliminar").click(function(evento){
    $("#division").removeData("midato");
    $("#division").html('Acabo de eliminar del elemento (id="division") el dato llamado "midato"');
    });

    Como se verá, el método removeData() se invoca sobre el elemento que tiene el dato que pretendemos eliminar. Más tarde se muestra un mensaje informando sobre la acción que se ha realizado.

    Para comprobar el funcionamiento de estos métodos habría que crear un dato, escribiendo el valor en el campo de texto y pulsando el botón “guardar dato”. Luego podríamos leer ese dato con el botón "leer dato". Por último podríamos eliminar el dato con el botón "eliminar dato". Si, una vez eliminado pulsamos sobre el botón de "leer dato" veremos que el valor del dato aparece como "undefined", puesto que ese dato ha sido borrado (esto también ocurre si no se ha guardado ningún dato todavía, por ejemplo cuando se acaba de cargar la página).

    Sería interesante ver el código fuente completo de esta página, para hacernos una idea más exacta de cómo se integrarían todos estos elementos.

    Quote
    <html>
    <head>
    <title>Ejemplos de uso de la función data del core de jQuery</title>
    <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){

    $("#guardar").click(function(evento){
    var valor = document.formul.valor.value;
    //Esta misma línea de código se puede codificar así también con jQuery
    //var valor = $("#valor").attr("value");
    $("#division").data("midato",valor);
    $("#division").html('He guardado en este elemento (id="division") un dato llamado "midato" con el valor "' + valor + '"');
    });

    $("#leer").click(function(evento){
    valor = $("#division").data("midato");
    $("#division").html('En este elemento (id="division") leo un dato llamado "midato" con el valor "' + valor + '"');
    });

    $("#eliminar").click(function(evento){
    $("#division").removeData("midato");
    $("#division").html('Acabo de eliminar del elemento (id="division") el dato llamado "midato"');
    });
    });
    </script>
    </head>

    <body>

    <div id="division">
    En esta división (elemento id="division") voy a guardar datos con la función data y luego los voy a leer
    </div>
    <br>
    <form name="formul">
    Escribe un valor a guardar, leer o eliminar:
    <input type="text" name="valor" id="valor">
    <br>
    <input type="button" value="guardar dato" id="guardar">
    <input type="button" value="leer dato" id="leer">
    <input type="button" value="eliminar dato" id="eliminar">
    </form>

    </body>
    </html>

    De nuevo, dejamos el enlace al ejemplo en marcha.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 14 | 12:45 PM 2010-08-31
    Consideraciones interesantes de data() y removeData()

    Ahora veremos algunos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los métodos data() y removeData() de jQuery.

    Existen algunos puntos que debemos conocer sobre el funcionamiento de estos métodos. Veamos a continuación una serie de consideraciones:

    Admite cualquier tipo de dato: podemos guardar lo que deseemos por medio del método data(). Los ejemplos anteriores hemos guardado simplemente cadenas de texto, pero soportaría cualquier tipo de variable, numérica, un array o incluso un objeto Javascript o jQuery.

    Se guarda un dato por cada elemento del objeto jQuery selecionado: en caso que en el objeto jQuery sobre el que estemos almacenando cosas con data() haya referencias a varios elementos de la página, el dato se almacena en todos los elementos. (Recordemos que, según lo explicado anteriormente, un objeto jQuery puede tener seleccionados varios elementos de la página, como todos los enlaces presentes, los elementos de una determinada clase CSS, etc. dependiendo del selector escogido al hacer uso de la función dólar) .

    Los objetos se almacenan por referencia: en el caso que estemos almacenando un objeto Javascript con data() sobre uno o varios elementos, no se copia el objeto, sino que se asigna por referencia. Esto quiere decir que no se harían copias independientes del objeto a guardar, sino que permanecería tal cual y lo que se asignaría como dato es una referencia a ese único objeto.

    Ahora, para investigar un poco sobre estas posibilidades, hemos creado un par de ejemplos un poco más complejos que hacen uso de los métodos data() y removeData(). Son ejemplos más avanzados, que hacen uso de algunas cosas. No obstante, vendrá bien verlos para aprender algunos usos de estas funcionalidades.

    Para empezar, quiero mostrar una página de ejemplo donde existen tres enlaces y dos botones. Al pulsar cualquiera de los enlaces mostraremos el contenido de un dato almacenado en ellos con data(). Los botones, por su parte, servirán para almacenar contenidos en datos sobre esos enlaces. Además tendremos una capa con id="mensaje" que nos servirá para mostrar cosas por pantalla.

    Podemos ver el ejemplo en marcha en una página aparte.
    El código de los elementos HTML será el siguiente:

    Quote
    <a href="#" id="enlace1">Enlace 1</a>
    <br>
    <a href="#" id="enlace2">Enlace 2</a>
    <br>
    <a href="#" id="enlace3">Enlace 3</a>
    <br>
    <br>
    <div id="mensaje">
    Mensaje...
    </div>
    <br>
    <button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
    <br>
    <button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button>

    Ahora veamos cómo aplicar eventos a los elementos de la página, para almacenar datos y mostrarlos.

    Comencemos por el código de los eventos de los botones.

    Quote

    $("#guardar").click(function(evento){
    $("a").data("midato","mivalor");
    $("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor "mivalor"');
    });

    Con este código estamos almacenando datos en todos los enlaces. Cabe fijarse que con la función jQuery $("a") obtenemos un objeto jQuery donde están todos los enlaces de la página. Luego, al invocar data() sobre ese objeto, estamos almacenado ese dato en todos los enlaces existentes.

    Quote
    $("#guardarenlace1").click(function(evento){
    $("#enlace1").data("midato","otro valor");
    $("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro valor"');
    });

    En este otro código del evento click para el segundo botón, almacenamos "otro valor" sobre el dato de antes, pero sólo lo hacemos sobre el enlace 1, dado que hemos utilizado el selector $("#enlace1"), con el identificador único del primer enlace.

    Y ahora podríamos ver el código para asignar un evento a todos los enlaces, para que al pulsarlos nos muestre lo que haya en el dato almacenado con data(), si es que hay algo.

    Quote
    $("a").click(function(evento){
    evento.preventDefault();
    valorAlmacenado = $(this).data("midato");
    $("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como " + valorAlmacenado);
    });

    Como se puede ver, estamos creando un evento click, pero lo estamos haciendo sobre los tres enlaces que hay en la página a la vez, dado el selector utilizado en la función jQuery $("a"). Luego el código del evento será el mismo para los tres enlaces.

    Lo primero que se hace es un evento.preventDefault() que permite que el enlace no tenga el comportamiento típico (ir a la URL del href). A continuación hacemos:

    Quote
    valorAlmacenado = $(this).data("midato");

    Como se puede ver, se está extrayendo el valor almacenado en el enlace actual, que recibe el evento. Con $(this) obtenemos el objeto jQuery del elemento que ha recibido el evento, que es el enlace sobre el que se ha pulsado y no todos los enlaces. Con el método data("midato"), invocado sobre $(this), obtenemos el valor del dato "midato" almacenado en el enlace que fue pulsado solamente.

    Luego se muestra un mensaje para indicar el valor que había en el dato. Pero claro, este código, como es común para todos los enlaces, tiene que acceder también a $(this) para saber qué enlace en concreto fue el que se pulsó. Para identificar el enlace se hace $(this).attr("id"), que devuelve el atributo "id" del enlace sobre el que se hizo clic.

    A continuación se puede ver el código completo de esta página.

    Quote
    <html>
    <head>
    <title>Ejemplos de uso de la función data del core de jQuery</title>
    <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){

    $("a").click(function(evento){
    evento.preventDefault();
    valorAlmacenado = $(this).data("midato");
    $("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como " + valorAlmacenado);
    });

    $("#guardar").click(function(evento){
    $("a").data("midato","mivalor");
    $("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor "mivalor"');
    });

    $("#guardarenlace1").click(function(evento){
    $("#enlace1").data("midato","otro valor");
    $("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro valor"');
    });
    });
    </script>
    </head>

    <body>

    <a href="#" id="enlace1">Enlace 1</a>
    <br>
    <a href="#" id="enlace2">Enlace 2</a>
    <br>
    <a href="#" id="enlace3">Enlace 3</a>
    <br>
    <br>
    <div id="mensaje">
    Mensaje...
    </div>
    <br>
    <button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
    <br>
    <button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button>

    </body>
    </html>

    Si se desea, se puede ver el ejemplo en marcha en una página aparte.

    Datos de tipo objeto asignados por referencia con data()
    Sobre el punto que comentábamos antes, sobre los objetos Javascript que se asignan por medio de data(), que siempre se hace por referencia, se ha creado otro ejemplo.

    El ejemplo es bastante similar al anterior, con la salvedad que se ha creado un par de acciones adicionales para almacenar en los elementos variables de tipo objeto.

    Luego, al operar sobre esos datos de tipo objeto, comprobamos que en realidad sólo existe un objeto compartido por todos los elementos a los que fue asignado. Es decir, no se hicieron copias del objeto, sino que se asignaron en los datos simplemente su referencia.

    El código completo se puede ver a continuación.

    Quote
    <html>
    <head>
    <title>Ejemplos de uso de la función data del core de jQuery</title>
    <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){

    $("a.enlacealmacenar").click(function(evento){
    evento.preventDefault();
    var valorAlmacenado = $(this).data("midato");
    var mensaje = "En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como " + valorAlmacenado;
    var valorAlmacenado2 = $(this).data("miobjeto");
    mensaje += "<br>Además, he leído un dato llamado 'miobjeto' con valor " + valorAlmacenado2;
    $("#mensaje").html(mensaje);
    });

    $("#guardar").click(function(evento){
    evento.preventDefault();
    $("a").data("midato","mivalor");
    $("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor "mivalor"');
    });

    $("#guardarenlace1").click(function(evento){
    evento.preventDefault();
    $("#enlace1").data("midato","otro valor");
    $("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro valor"');
    });

    $("#guardarobjeto").click(function(evento){
    evento.preventDefault();
    $("a").data("miobjeto",$("#capapruebas"));
    $("#mensaje").html('He guardado todos los enlaces un dato llamado "miobjeto" con el valor un objeto que es el objeto jquery de seleccionar la capa con id "capapruebas"');
    });

    $("#operarobjetoenlace1").click(function(evento){
    evento.preventDefault();
    $("#enlace1").data("miobjeto").html("cambio el html del objeto que hay en el dato 'miobjeto' del 'enlace1'");
    });

    $("#operarobjetoenlace2").click(function(evento){
    evento.preventDefault();
    $("#mensaje").html("Este es el HTML que hay en el objeto asociado a enlace2 en el dato 'miobjeto':<br>" + $("#enlace2").data("miobjeto").html());
    });

    });
    </script>
    </head>

    <body>

    <a href="#" id="enlace1" class="enlacealmacenar">Enlace 1</a>
    <br>
    <a href="#" id="enlace2" class="enlacealmacenar">Enlace 2</a>
    <br>
    <a href="#" id="enlace3" class="enlacealmacenar">Enlace 3</a>
    <br>
    <br>
    <div id="mensaje">
    Mensaje...
    </div>
    <br>

    <ol style="line-height: 200%;">
    <li>
    <a id="guardar" href="#">guardar "midato" con valor "mivalor" en todos los enlaces</a>
    </li>
    <li>
    <a id="guardarenlace1" href="#">guardar "midato" con valor "otro valor" en el enlace 1</a>
    </li>
    <li>
    <a id="guardarobjeto" href="#">guardar "miobjeto" con una referencia a la capa de pruebas</a>
    </li>
    <li style="line-height: 100%;">
    <a id="operarobjetoenlace1" href="#">Recuperar un objeto del enlace1 para hacer cosas con él
    <SPAN style="font-size: 8pt; font-weight: bold">
    PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE ESTA LISTA MARCADO COMO 3)
    </SPAN>
    </a></li>
    <li style="line-height: 100%;">
    <a id="operarobjetoenlace2" href="#">Recuperar un objeto del enlace2 para hacer cosas con él
    <SPAN style="font-size: 8pt; font-weight: bold">
    PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE ESTA LISTA MARCADO COMO 3)
    </SPAN>
    </a></li>
    </ol>
    <br>
    <br>

    <div id="capapruebas">
    Este es el texto de una capa de pruebas... con id="capapruebas"
    </div>

    </body>
    </html>

    Hemos visto diversos ejemplos de uso de data() y removeData(), métodos básicos de jQuery. Puede que ahora no se les encuentre mucha utilidad, pero nos servirán para resolver problemas futuros y entender cómo funcionan diversos plugins o componentes más avanzados de jQuery.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 15 | 1:05 PM 2010-09-01
    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.

    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:

    Quote
    $(".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()).

    Quote

    $(".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.

    Ejemplo de asignación de manejador de evento por live()
    Veamos la siguiente demostración del funcionamiento de live(). Tenemos varios elementos:

    Quote
    <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():

    Quote
    $(".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.

    Quote
    <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:

    Quote
    $("#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í:

    Quote
    $("#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.

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

    Quote
    <!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>
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.)
    Búscar: