jQuery Blox

25/may/2009 23

jQuery Blox in CSSLab.cl

Una nueva manera de mostrar más información / A new way to show more info

Selecciona tu idioma / Select your language:

ES

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.

jQuery Blox: 3 states of interaction

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:

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

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

jQuery Blox: box structure

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:
    <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="jqueryblox-v0.9.js" type="text/javascript"></script>
  2. Activarlo:
    <script type="text/javascript">
    $(function(){
    $().blox();
    });
    </script>

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

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

Ver Demo 2

Ver Demo 3

EN

With jQuery Blox you can display information on a whole new way with a quick and easy setup. Just write yout HTML in a simple block pattern, and tell the plugin your element names (or maintain the pre-configured ones); Blox will display your information with a new interaction for your user.

See Demo 1

Blox offers 3 states:

  1. Normal: when the user does not interfere with the box containing the HTML blocks.
  2. Hover: when the mouse is over one of the boxes, by default Blox makes the others semi-transparent.
  3. Click: when you click on any box, it will animate its expansion to cover the total of the container above all other blocks, to show the information attached to that block.

jQuery Blox: 3 states of interaction

Using Blox should not limit the creativity of who will use it, but it needs to maintain certain rules for their correct and full operation, mainly HTML strucuture and CSS styles:

HTML Structure

First you’ll need a box containing all other boxes, by default Blox calls it with the id blox. This container #blox will support all the blocks which Blox names with the class box_content. This block .box_content have 2 major functions: support the content hidden in the first state, and contains a third block called with the class .blox_box which is the one that fires the Blox interaction, expanding and moving the boxes to display the hidden information.

The HTML should be basically as follows:

<div id="blox"> /* a container */
<div class="blox_content" id="box_1"> /* many content blocks */
<div class="blox_box"> /* box that fires the interaction */
Box 1
</div>
Content displayed when Box 1 is clicked, above Box 2.<a href="#" class="blox_close">Close Box</a> /* hidden content displayed at .blox_box click */
</div>
/* other boxes with the same pattern */
</div>

CSS Style

The magic is in the use of absolutely positioned blocks to move them freely and smoothly For the blocks to behave like we want, they must have a specific style. The box that contains all other blocks #blox must have fixed height and width and relative position to support the smaller boxes named .blox_content which must have fixed height and width as well but absolute positioned. Each one of this boxes .blox_content should have different placements, givven through an unique #id using the properties left and top.

The third box .blox_box should also have a fixed width and height, probably the same as its parent .blox_content. For the rest of the elements you have total freedom to do whatever you want with their style.

Finally, the basic CSS is as follows:

#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;
}
/* like this for each of other boxes */
.blox_box {
width: 200px;
height: 400px;
}

jQuery Blox: box structure

Configuration

By default, Blox comes preconfigured from the factory, and its programming allows you to alter the following parameters:

  • container: container box id, default to #blox
  • content: class of each content box, default to .blox_content
  • box: class of the box that fires the content display, default to .blox_box
  • close: class for the link (button) that closes the content box, default to .blox_close
  • transparency: [yes/no] do you want transparency on hover? default to yes
  • fadein: transparency level (from 0 to 1) when you mouseover a box, default to 0.2
  • fadeout: transparency level (from 0 to 1) when you mouseout a box, default to 1
  • animation: [yes/no] do you want the boxes to animate? default to yes
  • timein: time in ms that each box takes to display the content, default to 100
  • timeout: time in ms that each box takes to hide the content, default to 200
  • direction: [lefty/righty] which direction each box is opened, default to left lefty

To use it with the default values, just follow this 2 simple steps:

  1. Add your favorite jQuery library and this humble plugin:
    <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="jqueryblox-v0.9.js" type="text/javascript"></script>
  2. Activate it:
    <script type="text/javascript">
    $(function(){
    $().blox();
    });
    </script>

If you want to customize it to suit your needs, just change the necessary parameters:

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

See Demo 2

See Demo 3

Baja el plugin / Get the plugin

Bajar/Download plugin (.zip 1kb)

Bajar/Download plugin+demos (.zip 220kb)

Blox logo by youfeelme.biz

Comentarios

  1. Twitted by csslab [#]

    […] This post was Twitted by csslab – Real-url.org […]

  2. Juan Jorquera [#]

    excelente post Jorge! me estoy motivando cada vez mas x Jquery

  3. Cristóbal Morales [#]

    Otro muy buen dato, gracias mr. por esta nueva nota.

  4. Davo [#]

    Hola, oye perdon por la pregunta, pero ¿esto se puede usar en wordpress?, gracias, es que no se mucho de esto y pues no se si se puede utilizar

  5. Jorge Epuñan [#]

    Davo: claro, puedes usar Blox en lo q se te ocurra, solo debes llamarlo desde WP y crear un articulo/pagina con la estructura q propongo, o modificarla para la tuya.

    exito!

  6. jqueryuser [#]

    Awesome thanks! added to jquerys.ru

  7. joaquin núñez [#]

    excelente … sobre todo el demo 3

    muy bueno felicidades …
    mis plugins de jquery no son graficos pero hago el empeño de hacer cosas utiles :)

    saludos de otro amante de jquery chileno

  8. Nima [#]

    hey,
    Thanks for the amazing blox.
    I have a question:
    I was trying to use blox on my web site and it seems every time i close a box, it jumps to the top of the page so I can’t see the animation for closing and have to scroll down again.
    Any suggestion?
    thanx

  9. Jorge Epuñan [#]

    Nima: look at the sourcecode of blox and after the end of the click() for the close event, add return false; (line 89).

    Good luck!

  10. Nima [#]

    Thank you

    works like a charm!!!!

  11. Pol moneys [#]

    muchas gracias, sigue iluminándonos por favor :)

  12. Mauro [#]

    tengo un problema:
    cuando paso el estado del .box de jquery
    a hover no me cierra el contenido

    que sera??

  13. Jorge Epuñan [#]

    Mauro: tienes un link para ver el problema?

  14. Mauro [#]

    no, no tengo como

    pero el problema es que si cambio la modalidad del .box que en vez de hacer click sea hover el parametro de cerrar deja de funcionar o se desabilita

  15. Jorge Epuñan [#]

    te entiendo Mauro, Blox no fue pensado en una total interaccion con hover, mas q el efecto del mouseenter/mouseleave; para abrir la caja debes hacer click (como esta en el demo 1).

    Vale decir no puedes configurarlo de esa manera mediante los parametros q yo estableci.

    Si lo has modificado para ello, y me lo envias podria tratar de hacer q el cerrar funcione.

    Espero sea eso, saludos.

  16. Mauro [#]

    no se si es necesario enviartelo solo cambie una linea (68) del box:

    $(this).find(settings.box).hover(function(){
    // if animation
    if(settings.animation == ‘yes’){
    $(this).parent().animate({‘top':0, ‘left':0, ‘width':widthContainer, ‘height':heightContainer},{queue: false, duration: settings.timeIn});
    } else {
    $(this).parent().css({‘top':0, ‘left':0, ‘width':widthContainer, ‘height':heightContainer});
    };

  17. Jorge Epuñan [#]

    Entiendo. Mira, en mis tests, andubo bien pero el problema surje cuando comienzas a mover l mouse sobre las cajas; el hover se sigue gatillando y las ventanas continuan abriendose a medida q aparecen; quizas este comportamiento del hover no sea ideal.

    Salu2.

  18. Mauro [#]

    que lastima a volver a flash no queda otra muchas gracias por contestar tan pronto

    saludos

  19. Alberto [#]

    Hola Jorge!

    En primer lugar darte la enhorabuena por todo lo que haces, es todo un regalo para la vista y sobretodo para el conocimiento.
    Gracias al contenido de este fantástico sitio estoy aprendiendo mucho y más “rapido” aunque lo tenga que hacer todo por mi cuenta.
    Ya he recomendado esta web a mucha gente que se dedica a esto.

    Gracias!!!

    Un Saludo desde la Costa Barcelonesa.
    Alberto

  20. Roman [#]

    Your example not work in chrome browser linux version 5.0.375.86. Also I attach screen about it: http://img171.imageshack.us/img171/2146/56015038.png

  21. Roman [#]

    Is it possible use your plugin that can start page with fade that is work in opposite?
    Thanks

  22. Tip Precoz: obtener valor numérico con JavaScript → CSSLab [#]

    […] luego construir nuevos elementos o interacciones; constantemente lo hago en plugins cono Timelinr o Blox!, pero JavaScript nos ofrece un método más rápido que el andar haciendo […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab