Moderador del foro: ZorG  
jQuery
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 16 | 1:51 PM
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 con 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 adelante vamos a explicar el funcionamiento de otros métodos, más complejos pero también más versátiles.

En el presente post 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.

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:

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

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:

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

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

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

Este ejemplo puede verse en marcha en una página aparte.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 17 | 2:30 PM
Efectos rápidos con jQuery

Algunos efectos dinámicos se pueden hacer con jQuery con rapidez impactante y extremadamente poco código Javascript.

Una de las ventajas más destacadas de jQuery es la realización de efectos especiales para páginas web, que se desarrollan rápido y con poco código fuente. Estos efectos sirven para aplicar dinamismo a una página web y una respuesta atractiva frente la interacción con el usuario, lo que hace que las páginas programadas con jQuery ofrezcan una imagen puntera.

Los efectos con jQuery, al menos un buen puñado de ellos, se pueden realizar sin muchas complicaciones, ya que existen unas funciones que simplifican la tarea de los desarrolladores. En muchos casos conseguir un efecto nos llevará una línea de código en nuestro programa, como esta:

Quote
$("#capaefectos").hide("slow");

Con esto conseguimos que el elemento con id="capaefectos" desaparezca de la página. Pero además, el efecto no es un simple fundido del elemento en la página (hacerse transparente), sino que también va acompañado de una reducción de tamaño progresiva hasta desaparecer.

Combinando los efectos con la interacción de usuario, por medio de eventos, podemos conseguir que los efectos respondan a las acciones del visitante, lo que multiplica las posibilidades, manteniendo la sencillez, elegancia y facilidad de manutención del código Javascript. Lo vamos a ver en un ejemplo a continuación.

Ejemplo de efectos e interacción en jQuery
En el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de jQuery. Vamos a implementar un simple efecto de ocultar y mostrar un elemento de la página web.

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

Como hemos podido ver, vamos a tener una capa y un par de enlaces. Con jQuery haremos que al pulsar los enlaces se oculte y se muestre la capa, con las funciones de la librería Effects.

Para comenzar, este es el código HTML del ejemplo, que comprende tanto la capa como los enlaces.

Quote
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">

Esto es una capa que nos servirá para hacer efectos!

Quote
</div>
<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>

Ahora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y codificamos las llamadas a las funciones de Effects, que harán que se muestre y oculte la capa.

El código Javascript, que hace uso de jQuery sería el siguiente:

Quote
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});

$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});

Como se puede ver, primero tenemos que definir el evento ready del objeto $(document), para hacer cosas cuando el documento está preparado para recibir acciones.

Luego se define el evento click sobre cada uno de los dos enlaces. Para ello invoco el método click sobre el enlace, que hemos seleccionado con jQuery a través del identificador de la etiqueta A.

Quote
$("#ocultar").click(function(event){

Con esto estoy definiendo el evento clic sobre el elemento con id="ocultar".

Dentro de la función a ejecutar cuando se hace clic, se coloca la llamada a la función de los efectos.

Quote
$("#capaefectos").hide("slow");

Esto hace que nuestra capa, a la que habíamos puesto el identificador (atributo id) "capaefectos", se oculte. Pasamos el parámetro "slow" porque queremos que el efecto sea lento.

Ahora veamos la función de los efectos con otra llamada:

Quote
$("#capaefectos").show(3000);

Esto hace que se muestre el elemento con id "capaefectos", y que el proceso de mostrarse dure 3000 milisegundos.

No hay más complicaciones, así que si habéis entendido esto ya sabéis hacer efectos simples pero atractivos con jQuery en vuestra página web. Ahora podréis ver el código completo de este ejemplo para demostrar el uso de efectos.

Quote
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Efectos con jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});

$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
</script>
</head>

<body>

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>

</body>
</html>

Por último, pongo el enlace de nuevo al ejemplo en marcha.

Como se ha podido comprobar, hacer efectos con jQuery es bastante sencillo. Claro que hay otros detalles importantes y otros tipos de efectos y funcionalidades de personalización de los mismos, pero esto nos ha servido para demostrar lo sencillo que es trabajar con este framework Javascript.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 18 | 2:50 PM
jQuery: Truco para hacer expandible el contenido de tu sitio como en YouTube

YouTube posee la genial funcionalidad “cambiar vista” que permite cambiar entre modo “normal” y "wide" para así expandir o reducir el área del video.

Pero lo mejor de este efecto es que aunque el diseño cambia, se mantiene con un aspecto similar, y toda la información se mantiene fácilmente accesible. ¿Deseas implementarlo en tu sitio?

  • Haz clic aquí para ver una demostración »

  • Puedes descargar los archivos haciendo clic aquí »

    La imagen muestra lo que sucede cuando se cambia el punto de vista. Al cambiar a la visualización amplia, la sidebar desciende y el contenido se extiende totalmente. La creación de esto es muy simple. El truco está en la definición adecuada de la estructura y un poco de jQuery.

    Estructura
    Esta es la parte más importante. Para poder simular la estructura YouTube definiremos cinco secciones: cabecera, contenido, comentarios, sidebar y pie de página. La estructura que necesitamos es bastante simple:

    Quote
    <div id="header"></div>
    <div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="comments"></div>
    </div>
    <div id="footer"></div>

    La clave está en el CSS. Las áreas de contenido y comentario flotarán a la izquierda, mientras que la sidebar lo hará a la derecha. Esto permitirá que la sidebar baje cuando el contenido se estreche, para no perturbar el diseño. Ellos se colocarán dentro del contenedor "main" que limpiará todas las flotas. No habrá ningún estilamiento especial para la cabecera y el pie de página.

    Quote
    #header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
    #header { width:900px; margin:0px auto;}
    #main {width:960px; margin:0px auto; overflow:hidden;}
    #content { width:540px; float:left;}
    #comments { width:540px; float:left;}
    #sidebar { width:280px; margin-left:20px; float:right;}
    #footer { width:900px; margin:0px auto;}

    Inicialmente, el contenido tendrá 600px de ancho (incluyendo paddings). Cuando el usuario cambie a la vista amplia se estirará a 960px. Para lograr esto colocaremos un link de comando en algún sitio de la página, digamos adentro del área de contenido. En la demostración se ha usado Sprites de CSS para el link de comando, pero puedes crear un simple link textual como en el código a continuación.

    Quote
    <a id="wideView" href="#">Change View</a>

    Interacción
    Ahora añadiremos una simple función jQuery que alternará la clase CSS llamada "wide". Esta clase determinará la forma en que se ve la sección contenido en el modo wide.

    Quote
    $(document).ready(function() {
    $("#wideView").click(function() {
    $("#content").toggleClass("wide");
    });
    });

    Por lo que la clase CSS "wide" no contendrá nada más que la propiedad del ancho programada en 900px (con paddings será 960px total).

    Quote
    #content.wide { width:900px;}

    Lo único que debes hacer a continuación es verificar la demostración y ver si puedes hacer clic en "wide window".


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 19 | 4:22 PM
    jQuery: Crear pestañas más orgánicas en tu web

    ¿Alguna vez has visto a un área de contenido con pestañas en una barra lateral que era un poco "desigual"? Las irregularidades pueden ser causadas por muchas cosas, pero le dan un look muy desalineado al sitio.

    A falta de un término mejor, llamaremos "pestañas orgánicas" a aquellas que se comportan con más facilidad y soltura. ¿Quieres saber cómo lograrlas?

  • Haz clic aquí para visualizar el demo»

    El Plan
    El plan es construir un área que tenga pestañas, algo bastante fácil de hacer desde cero con jQuery, y luego lograr que se comporte mejor. Por supuesto, lo mantendremos simple, y dejaremos el código limpio y semántico. Lo central de la funcionalidad estará basado en el cálculo de la altura y la animación entre esas alturas sobre la marcha.

    El HTML
    Tenemos un contenedor, luego una lista desordenada para las mismas pestañas. Estas pestañas tienen atributos rel equivalentes al ID de las listas desordenadas de abajo con las cuáles están relacionadas. El contenido es la lista desordenada dentro del div contenedor “all-list-wrap”. Esa es la clave aquí, el envoltorio del contenido.

    Quote
    <div id="organic-tabs">

    <ul id="explore-nav">
    <li id="ex-featured"><a rel="featured" href="#" class="current">Featured</a></li>
    <li id="ex-core"><a rel="core" href="#">Core</a></li>
    <li id="ex-jquery"><a rel="jquerytuts" href="#">jQuery</a></li>
    <li id="ex-classics" class="last"><a rel="classics" href="#">Classics</a></li>
    </ul>

    <div id="all-list-wrap">

    <ul id="featured">
    <li><a href="#">Full Page Background Images</a></li>
    <li><a href="#">Designing for WordPress</a></li>
    <!-- More... -->
    </ul>

    <ul id="core">
    <li><a href="#">The VERY Basics of HTML & CSS</a></li>
    <li><a href="#">Classes and IDs</a></li>
    <!-- More... -->
    </ul>

    <ul id="jquerytuts">
    <li><a href="#">Anything Slider jQuery Plugin</a></li>
    <li><a href="#">Moving Boxes</a></li>
    <!-- More... -->
    </ul>

    <ul id="classics">
    <li><a href="#">Top Designers CSS Wishlist</a></li>
    <li><a href="#">What Beautiful HTML Code Looks Like</a></li>
    <!-- More... -->
    </ul>

    </div> <!-- END List Wrap -->

    </div> <!-- END Organic Tabs -->

    El CSS
    No hay nada demasiado complicado, sólo programamos las cosas para que luzcan de la forma correcta:

    Quote
    ul { list-style: none; }
    ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
    ul li a:hover { background: #fe4902; color: white; }
    ul li:last-child a { border: none; }

    #organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

    #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
    #explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
    #explore-nav li.last { margin-right: 0; }
    #explore-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
    #explore-nav li a:hover { background-color: #111; }

    #jquerytuts, #core, #classics { display: none; }

    #explore-nav li#ex-featured a.current, ul#featured li a:hover { background-color: #0575f4; color: white; }
    #explore-nav li#ex-core a.current, ul#core li a:hover { background-color: #d30000; color: white; }
    #explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; }
    #explore-nav li#ex-classics a.current, ul#classics li a:hover { background-color: #FE4902; color: white; }

    Algunas cosas interesantes que remarcar aquí:

    En primer lugar, se trata sólo de formato de línea única con interlineado sencillo entre todo. Nada de tabulación extravagante.

    En segundo lugar, hay un par de trucos. El selector .last elimina el margen derecho de las pestañas, por lo que puedes conseguir que la pestaña derecha se alinee correctamente. El selector .last hijo elimina el borde del último ítem de la lista, por lo que podemos conseguir líneas entre cada enlace, pero no antes del primer elemento o después del último.

    El jQuery
    El plan básicamente explicado:
    1. Programa el envoltorio exterior en una altura particular del contenido actual;
    2. Al hacer clic en una pestaña...;
    3. Programando el resaltado de la pestaña a la pestaña correcta;
    4. Hacer fade out del contenido actual;
    5. Hacer fade in del contenido actual;
    6. Anima la altura del envoltorio exterior a la altura del contenido nuevo.

    Quote
    $(function() {

    $("#explore-nav li a").click(function() {

    // Figure out current list via CSS class
    var curList = $("#explore-nav li a.current").attr("rel");

    // List moving to
    var $newList = $(this);

    // Set outer wrapper height to height of current inner list
    var curListHeight = $("#all-list-wrap").height();
    $("#all-list-wrap").height(curListHeight);

    // Remove highlighting - Add to just-clicked tab
    $("#explore-nav li a").removeClass("current");
    $newList.addClass("current");

    // Figure out ID of new list
    var listID = $newList.attr("rel");

    if (listID != curList) {

    // Fade out current list
    $("#"+curList).fadeOut(300, function() {

    // Fade in new list on callback
    $("#"+listID).fadeIn();

    // Adjust outer wrapper to fit new list snuggly
    var newHeight = $("#"+listID).height();
    $("#all-list-wrap").animate({
    height: newHeight
    });

    });

    }

    // Don't behave like a regular link
    return false;
    });

    });

    ¡Y a disfrutar!

  • Haz clic aquí para visualizar el demo»
  • Haz clic aquí para descargar los archivos»

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 20 | 4:58 PM
    Plugin jQuery para hacer desaparecer elementos de una página

    Desde unl sitio nos traen un excelente plugin jQuery para darle un toque distintivo y extremadamente original a nuestra página, de una manera muy sencilla y rápida de implementar.

    Fly Off Page” se trata de un plugin que nos permitirá hacer que los elementos seleccionados de nuestra web desaparezcan “volando” de la misma ya sea en una dirección predefinida o en una aleatoria.

    Las propiedades que podemos personalizar son:
    La duración, es decir, la cantidad de tiempo (en milisegundos) en que la animación se activará.

    La dirección en que el elemento seleccionado desaparecerá. Las opciones posibles son: para arriba, para abajo, para la izquierda, la derecha, al azar, la esquina superior derecha, la esquina inferior izquierda, la esquina inferior izquierda o la esquina inferior derecha.

    Se puede mantener el espacio, esta propiedad se puede activar como verdadera o falsa o como un objeto que se mostrará como una animación en el marcador de posición.

    Por ejemplo:

    Quote
    $(elem).flyOffPage({
    retainSpace: {
    height: 0,
    width: 0
    }
    });

  • Puedes ver una demostración aquí>>
  • Para bajar el plugin haz clic aquí>>
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 21 | 5:14 PM
    Paneles que desaparecen con jQuery

    El conocido efecto de iGoogle, donde podemos eliminar paneles a nuestro gusto, es algo muy sofisticado que le da mayor control al usuario sobre qué le interesa y qué no de nuestro sitio web, blog o aplicación online, o borrar las noticias que ya ha leído, etc.

    Este efecto se logra con un poco de código por medio de jQuery. Así podemos incluirlo en nuestro sitio para volverlo más dinámico y también más efectivo a la hora de hacer sentir cómodos a nuestros usuarios. Entérate cómo hacerlo.

    Cómo usar jQuery y Javascript para crear paneles eliminables
    1. Lo primero es, por supuesto, contar con jQuery (haz clic aquí).
    2. Luego deberías crear un botón donde el usuario pueda hacer clic para cerrar el panel.
    img
    3. Dentro del head hacemos el llamado con el siguiente script:

    Quote
    <script type="text/javascript" src="jquery.js"></script>

    4. Luego agregamos la función que usa la librería y le dice que al cliquear el elemento con clase “eliminar” (en este caso el botón) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje).

    Quote
    <script type="text/javascript">
    $(document).ready(function(){

    $(".contenedor .eliminar").click(function(){
    $(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow");
    });

    });
    </script>

    5. Ahora sólo resta usar las clases de este script dentro de la estructura (HTML).

    Quote
    <div class="contenedor">
    <h2>Lorem ipsum 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. </p>
    <p><a href="">Regresar al tutorial</a></p>
    <img src="eliminar.png" alt="cerrar" class="eliminar" />
    </div>

    6. Luego podemos darle estilo a la clase (el contenedor) y también al botón.

    Quote
    .contenedor {
    margin:20px auto;
    background:#F5E38E;
    border:2px solid #EBCA4F;
    padding:10px;
    width:500px;
    position:relative;
    }
    .contenedor .eliminar {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    }
    h2 { color:#ff0000; font-size:15px; }
    p { font-size:11px; padding: 0 0 11px; color:#333; }
    a { color:#ff8400; }
    body { font-family:verdana, arial; }

    Las posibilidades son infinitas, no dudes en experimentar con otras combinaciones.

  • Haz clic aquí para ver un ejemplo.
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 22 | 5:57 PM
    Truco para sombrear un enlace al cliquearlo con MooTools o jQuery

    Una de las cosas más interesantes de Safari en el iPhone es que posee un efecto que hace que se oscurezca el fondo cuando se hace clic en un link. Es un detalle sútil, pero acentúa el hecho de que una acción está ocurriendo.

    Entonces ¿Porqué no implementar este bonito efecto en tu sitio web? Esto se puede lograr fácilmente con un poco de MooTools o jQuery...¿Quieres ver? Es más fácil de lo que parece.

    El CSS

    Quote
    .clicked { padding:1px 2px; -moz-border-radius:5px; background:#aaa; }

    Dale el estilo que desees.

    El Javascript MooTools

    Quote
    window.addEvent('domready',function() {
    var lynx = $$('a');
    lynx.addEvent('click',function(e) {
    lynx.removeClass('clicked'); //remove from others
    this.addClass('clicked');
    });
    });

    El Javascript jQuery

    Quote
    $(document).ready(function() {
    var lynx = $('a');
    lynx.click(function(e) {
    lynx.removeClass('clicked');
    $(this).addClass('clicked');
    });
    });

    La sintaxis entre los dos frameworks es muy similar.

    Este ejemplo muestra el fondo gris pero lo que es genial es que dado que el snippet utiliza una clase CSS, puedes hacer que el color de fondo sea el que prefieras.

    Ver una demostración »

    ¿Qué esperas para empezar a experimentar?


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 23 | 6:07 PM
    Dar efecto de reflejo a las imágenes en tu sitio con jQuery y Mootools

    El reflejo espejado tan 2.0 tiene muchas aplicaciones. Sin embargo, no es muy práctico si a cada imagen a la que queremos dar este efecto la tenemos que abrir y editar en Photoshop.

    Deja de perder el tiempo y conoce cómo hacer este efecto con Reflection.js de forma automática, aplicando JavaScript.

    Reflection.js es una utilidad JavaScript disponible tanto para jQuery como para MooTools que crea reflexiones para cualquier imagen. Lo que hace es crear un nuevo elemento IMG con filtros especiales por si el cliente utiliza IE. Y si el cliente no usa IE, Reflection.js genera un elemento CANVAS y construye la reflexión a través de este elemento.

    El HTML

    Quote
    <img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />

    Y la clase CSS reflect para cualquier imagen que desees reflejar.

    La implementación del MooTools Javascript

    Quote
    window.addEvent('domready',function() {
    var options = { height: 0.5 };
    $$('img.reflect').each(function(img) {
    img.reflect(options);
    });
    });

    La versión MooTools de Reflection.js implementa el método reflect para crear las reflexiones.

    La implementación del jQuery Javascript

    Quote
    document.ready(function() {
    var options = { opacity: 0.75 };
    $('.reflect').reflect(options);
    });

    Bastante parecido al método MooTools, ejecutas el método reflect de cada elemento.

  • Mira el demo »
  • Descarga Reflection.js »

    ¡No malgastes más el tiempo haciendo reflejos en Photoshop! ¡Utiliza el poder de JavaScript!

    Adherido: 3155696.jpg (47.2 Kb)

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 24 | 6:51 PM
    Ocultar y revelar texto detrás de imágenes con CSS y jQuery

    En el siguiente artículo les traemos un genial efecto hover que les resultará extremadamente útil y sencillo para dar un toque especial a sus diseños.

    Se trata de un efecto que nos permite ocultar y mostrar texto que se encuentra detrás de una imagen y lo podemos lograr simplemente implementando algo de CSS y jQuery.

    Paso 1: Crear el código
    Crea un documento HTML nuevo y añade las etiquetas estándar HTML (html, body, etc.). Luego, dentro de la etiqueta body, necesitamos crear un div contenedor que se llamará "teaser-wrap".

    Ahora, también necesitamos crear un envoltorio para cada imagen y descripción. Para el demo 1, hemos añadido unos seis. Sin embargo, para mantener la simplicidad, sólo creamos uno. Es recomendable duplicar éste X cantidad de veces.

    Quote
    <div id="teaser-wrap"><!--end teaser--></div>
    <!--end teaser-wrap-->

    Paso 2: Añadir los detalles
    Ahora que tenemos nuestro div teaser, insertemos la imagen, una etiqueta encabezadora, descripción y un link "Leer más". Esto es sólo un ejemplo que pueden reajustar como deseen.

    Quote
    <div class="teaser"><img src="image.jpg" alt="photo" />
    <h3>Envato's Birthday</h3>
    Just a preview goes here.
    <a href="#">Read More...</a></div>
    <!--end teaser-->

    Nota: Si deseas seis imágenes/descripciones, duplica este bloque seis veces.

    Paso 3: CSS rápido
    Como pueden ver en la imagen de arriba, el teto se encuentra debajo de la misma. Sin embargo, nosotros deseamos que esté detrás. ¿Cómo logramos esto? Es bastante simple. La respuesta es "posicionamiento absoluto". Crea una hoja de estilos nueva, referénciala con etiquetas head e inserta los siguientes estilos:

    Quote
    .teaser {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    }

    .teaser img {
    position: absolute;
    top: 0;
    left: 0;
    }

    #teaser-wrap .teaser {
    float: left;
    margin: 1em;
    }

    Observen cómo hemos establecido nuestro div teaser igual al mismo ancho y altura de nuestras imágenes. Además hemos establecido un nuevo contexto de posicionamiento, ya que la imagen tendrá que ser posicionada absolutamente en la esquina superior izquierda del div. Esto llevará la imagen fuera del flujo del documento, y permitirá que todo el texto de abajo aparezca. Por último, también hemos hecho flotar todos los divs teaser a la izquierda y añadido un poco de márgenes para proporcionar algunos espacios. La página ahora debe lucir así:

    Paso 4: jQuery simple
    Ahora para el código. Primero, aseguramos la referencia jQuery al final de la página, justo antes de la etiqueta body finalizadora.

    Quote
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    Necesitamos notar cuándo el usuario hace hover sobre el div teaser. Cuándo lo haga, necesitamos decirle a la imagen dentro de este div que se displace a la izquierda (el mismo valor que el ancho de la imagen) y cuando el usuario deje de hacer hover, nosotros hacemos lo opuesto.

    Quote
    $('.teaser').hover(function() {
    // over

    $(this).children('img').stop().animate({
    left : '-200px'
    }, 500);

    },

    function() {
    // out

    $(this).children('img').stop().animate({
    left : '0'
    }, 500);
    });


    ¿Qué es esa función "Stop()"?
    Intenta removerla y luego actualiza la página. A continuación, quita el mouse de la imagen rápidamente. ¿Notan cómo el efecto sigue pasando? No queremos esto. "Stop()" simplemente quiere decir que paren las animaciones y luego comiencen nuevamente.

    ¿Qué pasa si no conozco el ancho de la imagen?
    Si necesitar determinar este valor de forma dinámica, puedes utilizar la función "outerWidth()". Esto devolverá el valor del ancho de la imagen, más sus márgenes y padding.

    ¿Por qué no aplicamos la función hover directamente a las imágenes en lugar de al div Teaser?
    Porque no se puede hacer de esta forma. Una vez que la imagen se deslice del mouse, inmediatamente se volverá a cerrar.

    Completo

    ¡Ahí lo tienen! Un efecto muy bueno y sencillo para añadir en sus templates.

    Haz clic en este enlace para ver una demostración
    Haz clic aquí para descargar el código utilizado


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 25 | 1:31 PM
    jQuery: Redimensiona las imágenes de tu web junto con el navegador

    En los diseños fluidos es fácil dar formato al texto para ajustarse bien cuando la ventana del navegador sea redimensionada, pero con las imágenes no suele ser tan sencillo el tema.

    El rápido consejo que te damos en esta nota te enseñará cómo cambiar entre dos tamaños de imágenes distintos dependiendo del tamaño que posea la ventana del navegador en ese momento dado.

    La técnica que utilizaremos puede usarse también para causar otros cambios en el redimensionamiento, más allá del simple cambio de las imágenes.

    El HTML que necesitamos

    Quote
    <div id=”content”>
    <img class=”fluidimage” src=”big.jpg”/>
    <p>(Type words here)</p>
    </div
    >

    Es fundamental notar que adjuntamos .fluidimage a la imagen que deseamos “togglear”.

    Y ahora el CSS

    Quote
    body{ text-align:center; }
    img{ float: right; margin: 0px 10px 10px 10px;}
    #content{ width:70%; margin: 0px auto; text-align: left; }

    Para mantener la simplicidad en el CSS se ha excluido todo tipo de estilos gráficos, tales como bordes o fuentes.

    Activando el cambio con jQuery

    Quote
    <script type=”text/javascript” src=”<a class=”linkification-ext” title=”Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js” href=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.js”>http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>”></script>
    <script type=”text/javascript”>
    $(document).ready(function() {
    function imageresize() {
    var contentwidth = $(’#content’).width();
    if ((contentwidth) < ‘700′){
    $(’.fluidimage’).attr(’src’,'little.jpg’);
    } else {
    $(’.fluidimage’).attr(’src’,'big.jpg’);
    }
    }
    imageresize();//Triggers when document first loads
    $(window).bind(”resize”, function(){//Adjusts image when browser resized
    imageresize();
    });
    });
    </script>

    Cuando el documento esté preparado, establecemos una función (imageresize) que realiza el cambio de las imágenes dependiendo del ancho del navegador. Si el ancho del navegador es menos que 700px, se utilizará la imagen más pequeña, sino se mostrará la imagen de tamaño completo. Esta función se active ni bien carga la página y en cualquier momento que el navegador sea redimensionado.

    ¡Y listo!

  • Haz clic aquí para ver un demo»
  • Haz clic aquí para descargar esta técnica»
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 26 | 1:43 PM
    jQuery: Optimizando el ingreso de contraseñas en tu sitio al estilo iPhone

    Esconder la contraseña del usuario a medida que la ingresa es una mala práctica que reduce la confianza del usuario en lo que está tipeando y genera que los usuarios seleccionen palabras muy fáciles o copien y peguen las más complejas.

    El encubrimiento de contraseñas se creó con el fin de evitar que la gente pueda ver la pantalla y conocer nuestra palabra secreta. En esta nota te mostramos cómo emular el sistema por el que iPhone optó, con buenos resultados.

    Cómo maneja el iPhone el ingreso de contraseñas
    El iPhone convierte el texto que ingresamos en asteriscos, como lo hacen los sitios web, pero lo hace luego de un rápido intervalo, cosa que nos permite visualizar los caracteres tipeados por un breve lapso de tiempo. El teclado del iPhone posee un popup a medida que presionamos cada carácter, lo que nos permite verificar visualmente qué letra hemos tipeado.

    Esta es una forma bastante buena y útil de manejar el ingreso de contraseñas, que puede ser transaladada al uso en sitios web. Este sistema es una combinación entre el otorgamiento de un mejor feedback al usuario y el aumento de la confianza del mismo, pero a la vez, se esconde mayoritariamente la contraseña haciendo que sea difícil para los “mirones casuales” conocer nuestra clave.

    Podemos replicar esta idea, mediante jQuery.

    Mostrar las teclas presionadas
    Aquí hay un markup formal muy simple con una entrada de contraseña:

    Quote
    <form action="#" id="login-form-1">
    <div>
    <label for="user-password">Password</label>
    <input type="password" id="user-password" name="user-password" />
    </div>
    </form>

    Utilizamos el div interno para programar algo de posicionamiento relativo, y luego programar algo de estilo para un div especial que insertaremos para mostrar la tecla presionada.

    Quote
    #login-form-1 div {
    position: relative;
    }
    #login-form-1 div #letterViewer {
    display: none;
    position: absolute;
    left: 240px;
    top: -30px;
    width: 100px;
    font: bold 72px Helvetica, Sans-Serif;
    }

    Luego con jQuery, podemos añadir ese div y adjuntar un evento keypress en la entrada. Cuando una tecla sea presionada, ese div se desvanecerá con la letra, y volverá a aparecer. Esto simulará la verificación de presionamiento de tecla del iPhone.

    Quote
    $(function() {
    $("#login-form-1 div").append("<div id='letterViewer'>");
    $("#user-password").keypress(function(e) {

    $("#letterViewer")
    .html(String.fromCharCode(e.which))
    .fadeIn(200, function() {
    $(this).fadeOut(200);
    });
    });
    });

    Por supuesto, esto se puede estilar de la forma que cada uno desee.

    Cambiar el texto por asteriscos/ sólo mostrar el último carácter
    Hacer que el texto se transforme en un asterisco luego de un breve lapso de tiempo es algo un poco más complicado. Cambiar la entrada de la contraseña para que sea del tipo =”text”, para luego cambiar el valor a asteriscos sería muy problemático porque se necesita ingresar el valor real del campo y no asteriscos. Y tampoco se puede dejar la entrada como tipo =”password”, porque nada se puede mostrar en esas entradas excepto asteriscos.

    La solución es duplicar el campo de la contraseña, cambiarlo por una entrada de texto y esconder el original. De esta forma se puede usar el nuevo campo y manipularlo de la forma en que deseemos, pero en última instancia se enviará la entrada de contraseña oculta que se mantiene actualizada con la información que está siendo tipeada.

    Existe precisamente un plugin de jQuery creado especialmente para esto.
    Simplemente etiqueta tu entrada de contraseña e invoca el plugin:

    Quote

    $('#user-password-2').dPassword();

    Por supuesto, como en cualquier buen plugin, existen varias opciones que pueden utilizarse como parámetros: como el retraso antes de que se cambien las letras por asteriscos, el prefijo para la entrada duplicada, y más.

  • Haz clic aquí para ver el Demo»
  • Descarga los archivos aquí»
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 27 | 4:30 PM
    jQuery: Cómo comunicar iframes de dominio cruzado y redimensionarlos

    jQuery postMessage permite la comunicación window.postMessage de forma fácil y sencilla en navegadores que la soportan, cayendo en un método de comunicación document.location.hash para todos los otros navegadores.

    Con la incorporación del método window.postMessage, JavaScript finalmente obtiene un método fantástico para la comunicación de iframes de dominio cruzado. En esta nota te explicamos cómo hacerlo.

    Ejemplo
    Supongamos que tienes una página en http://benalman.com/test.html la cual posee un Iframe. Desafortunadamente, el contenido del Iframe se aloja en http://rj3.net/test.html, y debido a las restricciones de seguridad de dominio cruzado, el mensaje "hello world" que el Iframe (hijo) desea enviar a su padre no puede ser recibido.

    Bueno, sí se puede, pero sólo en ciertos navegadores, entre los que por supuesto no se incluye IE7, que sigue siendo el navegador más popular. Con $.postMessage esto no sólo es posible, sino que también es fácil.

    Haz clic aquí para visualizar una demo »

    Procedimiento
    Primero, tanto la página hijo como padre necesitan incluir jQuery como así también el plugin jQuery postMessage.

    Este código deberá ir en la página de recepción (padre):

    Quote
    $.receiveMessage(
    function(e){
    alert( e.data );
    },
    'http://rj3.net'
    );

    Básicamente, le avisa a la ventana que debe buscar mensajes, pero sólo de 'http://rj3.net', y cuando entren, alertarlos.

    La página de envío (hija) ejecuta este código:

    Quote
    $.postMessage(
    'hello world',
    'http://benalman.com/test.html',
    parent
    );

    En navegadores dónde window.postMessage sea soportado, el mensaje 'hello world' simplemente se pasa del frame hijo a la ventana padre, y se lleva a cabo la alerta. ¡Muy Simple!

    En otros navegadores, la ventana hija setea la locación de la ventana padre a http://benalman.com/test.html#hello%20world. A pesar del hecho de que la URL completa ha sido seteada, como sólo la location.hash fue modificada realmente, el navegador no recarga por completo la página. En su lugar, el cambio de hash es detectado, se realiza un callback y el mensaje es alertado. Por esta razón, es absolutamente obligatorio que la URL entera de la página padre sea pasada dentro de $.postMessage como segundo parámetro. Esta URL podría ser no modificable dentro de la página de envío, o aprobada de forma directa.

    Esto se entiende mejor con un ejemplo en vivo, dónde un iframe le permite a su padre saber que su contenido ha cambiado, para que el Iframe pueda ser redimensionado.

    Notas
    • La referencia MDC window.postMessage es muy útil, así que asegúrate de revisarla si tienes alguna duda sobre cómo funciona el método.
    • En los navegadores que no soportan window.postMessage, se añade un parámetro "cache bust" a la location.hash para asegurarse de que los mensajes múltiples secuenciales pero iguales (por ejemplo, como "toggle") activarán cada uno el evento.
    • En navegadores que no soportan window.postMessage, este script puede que entre en conflicto con un fragmento del history del plugin, ya que la location.hash es modificada. Afortunadamente, los hashes que este script crea coinciden con el regexp /^#?\d+&/, así que es posible filtrarlos.
    • En navegadores que no soportan window.postMessage, como polling es utilizado para la detección de cambios en la location.hash, debe tenerse cuidado para asegurarse de que $.postMessage no sea llamado demasiado rápido, o puede que los mensajes se pierdan. Existen métodos de no-polling ingeniosos para detectar cambios en la location.hash, pero como requieren Iframes proxy y archivos HTML adicionales, hemos decidido mantener las cosas simples y utilizar polling.

    Haz clic aquí para descargar el archivo fuente»
    Haz clic aquí para visualizar una demo »


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 28 | 6:26 PM
    Como probar y hacer más rápido tu código jQuery

    La llegada de jQuery ha hecho que el proceso de programar con JavaScript sea muy fácil. Pero tal vez hayas notado que el hacer pequeños cambios al código puede mejorar la lectura y el rendimiento significativamente. Por eso aquí te muestro algunos consejos para acelerar tú código.

    Para comenzar a hacer las pruebas primero necesitas una plataforma sólida, para esto vamos a estar usando Firebug para registrar los tiempos, para usarlo solamente tienes que ir a consola y presionar “perfilar” para comenzar a registrar y presionar otra vez “perfilar” para ver el resultado. Pero también debes agregar el script entre console.profile(); y console.profileEnd(); de esta manera:

    Quote
    <script>
    console.profile() ;
    // Aquí va el código que vas a evaluar
    console.profileEnd();
    </script>

    Entonces Firebug te va a mostrar cuanto tiempo se tardó en realizar ciertas tareas. Las siguientes son las pruebas que debemos hacer para poder optimizar nuestro código.

    Detectar la presencia de elementos
    En la mayoría de los casos casi siempre se sirve un archivo JS con el script para todas tus páginas, usualmente este script ejecuta acciones para elementos no existentes en la página, esos son problemas que debes corregir, para esto simplemente basta con un IF para determinar si el elemento existe en la página y si sí existe ejecutar las acciones.

    Usa selectores de manera efectiva
    Aquí el mejor consejo es usar IDs en lugar de Class esto porque jQuery por default usa directamente el método getElementById y es más rápido que si lo hacemos por medio de clases, además en navegadores viejos esto puede traer problemas.

    Usa selectores más específicos
    Por ejemplo tenemos el siguiente selector: $("#someList .selected"); cuando jQuery busca este selector primero escanda toda la estructura DOM del documento descartando elementos que no tienen la class que se busca, y por cada clase encontrada busca si tiene el ID llamado #someList, esto lo podemos optimizar usando li.selected en lugar de .selected así acortamos el número de nodos que hay que escanear.

    Evita el desperdicio de consultas
    Evita obtener un mismo elemento varias veces, esto reduce el rendimiento, la mejor opción es rehusar la referencia, por ejemplo si tienes un código que como el siguiente:

    Quote
    $("#mainItem").hide();
    $("#mainItem").val("Hello");
    $("#mainItem").html("Oh, hey there!");
    $("#mainItem").show();

    La mejor forma de hacer es de esta forma:

    Quote

    $("#mainItem").hide().val("Hello").html("Oh, hey there!").show();

    Pero si el elemento no es concurrente entonces puede cachearlo poniéndolo en una variable como se muestra a continuación:

    Quote
    var elem = $("#mainItem");

    elem.hide();

    //Some code
    elem.val("Hello");

    //More code
    elem.html("Oh, hey there!");

    //Even more code
    elem.show();

    Manipula el DOM de una forma más inteligente
    Para esta prueba vamos a crear 50 elementos la y agregarlos al final de una lista, con este método toma demasiado tiempo:

    Quote
    var list = $("#someList");

    for (var i=0; i<50; i++)
    {
    list.append('<li>Item #' + i + '</li>');
    }

    Pero si lo hacemos de esta otra manera tomará mucho menos tiempo debido que la manipulación se hace hasta el final con todos los elementos al mismo tiempo y no de uno por uno.

    Quote
    var list = $("#someList");
    var items = "";

    for (var i=0; i<50; i++){
    items += '
    <li>Item #' + i + '</li>';
    }

    list.append(items);


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 29 | 5:01 PM
    jQuery Tabs y registro en el historial

    Es muy común el uso de navegación de tipo tabs para contenidos dentro de una misma página y funcionan bastante bien; el usuario ya está acostumbrado a este tipo de elementos y los utiliza sin problemas, además que resulta liviano y relativamente fácil implementarlos.

    Pero recientemente un cliente pidió que los tabs se pudieran navegar con el historial del browser, o sea que si vas seleccionado diferentes tabs e incluso saliendo a otras páginas, puedas volver a ellas con el botón ‘Back’ o ‘Volver’ del navegador, y volver a pasar por ellos. Esto me resultó en un problema no menor que me costó solucionar, ya que los tabssuelen reaccionar ante eventos del click del mouse (como por ejemplo para mostrar tal <div> al clickear tal enlace <a> y que a éste se le agregue una class="selected" que indique su estado de seleccionado). Y esto suelo no quedar registrado en el caché del browser para que pueda ser navegado como se pidió. Pero bueno, pude solucionarlo y aquí lo comparto por si lo necesitan; implica 2 pasos diferentes los cuales deben funcionar en conjunto:

    Primero, crearemos una simple función en jQuery para que funcionen los tabs. Esta es una de las maneras más simples de crear este tipo de menúes. Para el HTML:

    Quote
    <div class="tabs"><!-- .tabs -->
    <ul id="menu_tabs">
    <li><a href="#item1">Item 1</a></li>
    ...
    </ul>
    <div id="item1" class="caja"><!-- #item1 -->
    <h2>Item 1</h2>
    <p>Donec gravida posuere arcu.</p>
    </div><!-- /#item1 -->
    ...</div><!-- /.tabs -->

    Le aplicamos la siguiente instrucción en jQuery:

    Quote
    $(function(){
    // definimos variables para el contenedor y los<div>'s de los tabs
    var tabContainers = $('.tabs > div');
    // creamos el evento click para cada uno de los items del menu de tabs
    $('div.tabs ul a').each(function() {
    $(this).click(function(){
    // guardamos el ancla (#item1 por ej.) en una variable del link clickeado
    var hash = $(this).attr('href');
    // escondemos todos los tabs
    tabContainers.hide();
    // mostramos el <div> que sea igual al ancla guardado
    $(hash).show();
    // jugamos agregando y quitando classes del menu
    $('div.tabs ul a').removeClass('selected');
    $('a[href='+hash+']').addClass('selected');
    });
    });
    // para comenzar, hacemos que el primer elemento sea el clickeado
    $('div.tabs ul a:first').click();
    });

    Ver demo tabs

    Bien, con esto tienes tu menú de tabs funcionando de manera básica pero práctica. Ahora como notarás, al ir por los tabs y volver con el botón del navegador éstos no seguirán el mismo recorrido devuelta, aunque en la URL sí se vea que van cambiando. Para que esto ocurra, debemos comparar no el hash del enlace (<a href="#item1"> por ej.), sino comparar con la URL que va cambiando. Además se debe incluir el plugin jQuery BBQ, el que realiza el ingreso de la URL con tabs al caché del browser. Con el mismo HTML, miren la nueva función:

    Quote
    $(function(){
    var tabContainers = $('.tabs > div');
    // creamos un nuevo evento y lo incluimos al browser
    $(window).bind('hashchange', function () {
    // nuestra variable no la sacamos del <a> sino de la URL y dejamos el primero seleccionado
    var hash = window.location.hash || '#item1';
    // el resto es prácticamente lo mismo
    tabContainers.hide();
    $(hash).show();
    $('div.tabs ul a').removeClass('selected');
    $('a[href='+hash+']').addClass('selected');
    });
    // ejecutamos este nuevo evento 'hashchange' mediante un trigger
    $(window).trigger('hashchange');
    });

    Ver demo Tabs + History

    En este ejemplo, incluso podemos abrir mediante la URL en el tab que queramos, por ejemplo con el siguiente link abriremos el demo en el tab 3:

    Ver demo Tabs + History en el tercer tab


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 30 | 6:00 PM
    jQuery Blox
    Una nueva manera de mostrar más información

    Con jQuery Blox puedes desplegar información de una manera diferente, y con una fácil y rápida configuración. Basta con que armes tu HTML siguiendo un simple patrón de bloques, y definirle al plugin los nombres de los elementos que estás construyendo (o mantener los pre-configurados); Blox se encarga de crear una mayor interacción de tu información hacia el usuario.

    Ver Demo 1

    Blox ofrece 3 estados:

    1. Normal: cuando el usuario no interviene con la caja HTML que contiene los bloques.
    2. Hover: cuando el mouse está sobre alguna de las cajas, por defecto Blox hace las otras semi-transparentes.
    3. Click: cuando se hace click a alguna caja, ésta se amplía animándose hasta cubrir el total de la caja contenedora por sobre las demás y muestra la información anexa a esa caja.

    El uso de Blox no debería limitar la creatividad de quien la vaya a usar, pero es necesario conocer y mantener ciertas reglas para su correcto y total funcionamiento, principalmente de estructura HTML y de estilos CSS:

    Estructura HTML
    Primero necesitas una caja que contenga las demás cajas; por defecto Blox la define con el id blox. Esta caja contenedora #blox es la que soportará a las demás cajas, las que Blox denomina por defecto con una class blox_content. Esta caja .blox_content es la que tiene 2 importantes funciones: soporta al contenido que estará oculto en el primer estado, y a una tercera caja llamada .blox_box que es la gatillante de toda la interacción de Blox.

    El HTML básicamente debe ser como la siguiente estructura:

    Quote
    <div id="blox"> /* un contenedor */
    <div class="blox_content" id="box_1"> /* varias cajas de contenido */
    <div class="blox_box"> /* caja que soporta el click */
    Box 1
    </div>
    Contenido desplegado cuando Box 1 es clickeado.<a href="#" class="blox_close">Cerrar Bloque</a> /* contenido oculto pero que se muestra al click en la caja anterior */
    </div>
    /* otras cajas con el mismo patron */
    </div>

    Estilo CSS
    La magia está en el uso de posición absoluta para que las cajas se muevan con libertad y fluidez. Para que las cajas se comporten así, deben tener un estilo específico. La que contiene a todas las cajas, #blox, debe tener un alto fijo, un ancho fijo y posición relativa ya que será quien soporte a las cajas menores .blox_content, las que tienen posición absoluta, alto fijo y ancho fijo. Cada una de las cajas .blox_content, deberían tener ubicaciones diferentes mediante id único, respecto a #blox utilizando las propiedades left y top.

    La tercera caja .blox_box también debería tener un ancho y alto fijo, seguramente el mismo que su caja padre .blox_content, y para el resto de los elementos tienes libertad total de hacer lo que quieras con su estilo.

    Finalmente, el CSS básico es el siguiente:

    Quote
    #blox {
    width: 400px;
    height: 400px;
    position: relative;
    }
    .blox_content {
    width: 200px;
    height: 400px;
    position: absolute;
    }
    #box_1 {
    top: 0;
    left: 0;
    }
    #box_2 {
    top: 0;
    left: 200px;
    }
    /* asi con cada una de las otras cajas */
    .blox_box {
    width: 200px;
    height: 400px;
    }

    Configuración

    Por defecto Blox viene pre-configurado de fábrica, y su programación permite que alteres los siguientes parámetros:
    container: id de la caja contenedora, por defecto #blox
    content: class de las cajas con contenido, por defecto .blox_content
    box: class de la caja que inicia la secuencia para mostrar el contenido, por defecto .blox_box
    close: class del link o botón que cierra caja caja desplegada, por defecto .blox_close
    transparency: [yes/no]¿requieres transparencia? por defecto yes
    fadein: nivel de transparencia (de 0 a1) de las cajas al mouseover, por defecto 0.2
    fadeout: nivel de transparencia (de 0 a1) de las cajas al mouseout, por defecto 1
    animation: [yes/no]¿requieres animación? por defecto yes
    timein: tiempo en ms en que cada caja se demora en abrir, por defecto 100
    timeout: tiempo en ms en que cada caja se demora en cerrar, por defecto 200
    direction: [lefty/righty] hacia donde se abrirá cada caja, por defecto a la izquierda lefty

    Para utilizarlo con estos valores por defecto, sólo debes seguir 2 pasos básicos:

    1. Agregar tu librería de jQuery favorita y este humilde plugin:

    Quote
    <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="jqueryblox-v0.9.js" type="text/javascript"></script>

    2. Activarlo:

    Quote
    <script type="text/javascript">
    $(function(){
    $().blox();
    });
    </script>

    Si quieres configurarlo según tus necesidades, basta ir modificando los parámetros como te sean necesarios:

    Quote
    <script type="text/javascript">
    $(function(){
    $().blox({
    container: '#contenedor_blox',
    close: '.boton_cierra',
    direction: 'righty',
    fadein: 0.6
    });
    });
    </script>

    Ver Demo 2
    Ver Demo 3


    Baja el plugin:
    Bajar plugin (.zip 1kb)
    Bajar plugin+demos (.zip 220kb)


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Búscar: