3 de octubre de 2009

jqDock Menú con jQuery

jqDock-jQuery He estado escribiendo algunos post sobre el Framework jQuery y algunos plugin que a mi entender aportan diseños interesantes a nuestros proyectos web. Hoy escribiré sobre uno de ellos que sin dudas es bien vistoso y agrega un plus a nuestros diseños, me refiero al plugin jqDock.

Si estas pensando en dotar a tu sitio de un menú que le de vistosidad a tu portal, debes valorar incluir jqDock. Con este plugin diseñado para jQuery podemos transformar un conjunto de imágenes, en un menú al estilo Dock de Mac, además podríamos orientarlo horizontal o verticalmente. Pero bien, sin mas preámbulo pasemos a la practica.

jqDock, Menú Dock con jQuery

Lo primero como de costumbre será descargarnos los js de jQuery y el de jqDock y ponerlos en uso:

jqDock-jQuery Code1

Veremos en la imagen que hay 2 cosas a destacar:

Hacemos referencia a los js jQuery y jqDock:

<script type='text/javascript' src='../Scripts/jquery-1.3.2.min.js'></script>

<script type='text/javascript' src='../Scripts/jquery.jqDock.js'></script>

Efectuamos la llamada a la función jqDock() o jqDock(option), que se encarga de tratar y dar la vistosidad a nuestro menú:

<script type="text/javascript">

  jQuery(document).ready(function() {

    jQuery('#menú').jqDock();

  });

</script> 

Llegados a este punto ya hemos echo toda la referencias que necesitamos y la llamada a la función jqDock,  solo nos basta crear nuestro menú:

<body>
  <form id="form1" runat="server">
      <div id='menu' style="padding: 100px;">   
        <a href='jqDockMenu.aspx' title='Clock'>
            <img src='Images/2/Clock.png' alt='' />
        </a> 
        <a href='jqDockMenu.aspx' title='iMac'>
            <img src='images/2/iMac.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='Notebook'>
            <img src='images/2/Notebook.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='Camera'>
            <img src='images/2/Camera.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='iPod'>
            <img src='images/2/iPod.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='Trash'>
            <img src='images/2/Trash.png' alt='' />
        </a>
      </div>  
  </form>
</body>

Con esto ya hemos implementado un jqDock menú basado en jQuery.

Como vemos en el código, en cada uno de los enlaces o entradas del menú, he hecho una llamada a la propia página (jqDockMenu.aspx), esto es para simplificar el ejemplo, en un caso real debemos hacer el enlace a las páginas que deseemos.

jqDock Menú, Configuración Adicional

Hasta aquí hemos visto un ejemplo práctico,  muy básico, de jqDock, y aunque aún así es bien vistoso, podemos configurar algunas opciones adicionales que nos ayuden a exprimir aún más este interesante menú.

Veamos como configurar algunas de estas opciones, y aunque no las veremos todas, al menos nos dará una idea de como hacerlo. Para ello tendríamos que modificar la llamada a la función jqDock():

<script type="text/javascript">

   jQuery(document).ready(function() {

      var options1 = {align: 'left', labels: 'tr'};

      $('#menu').jqDock(options1);

   });  

</script> 

En este ejemplo hemos configurado 2 de las opciones:

align: 'left': Con esta opción le indicamos que muestre el menú en la parte izquierda del explorador. Las opciones posibles son: (default = bottom, top, middle, left, center, right)

labels: 'tr': Con esta opción indicamos que muestre o no y en que parte el texto o label asociado al enlace, el texto se obtiene de lo que hallamos definido en el atributo Title. Las opciones posibles son: (default = false, true, tl, tc, tr, ml, mc, mr, bl, bc, br).

 

jqDock, Error Frecuente

  • Las imágenes que seleccionemos para nuestro menú jqDock no deben ser demasiado pequeñas, de lo contrario no obtendremos el efecto de zooming o Dock, lo recomendable es que las imágenes escogidas para el menú jqDock midan al menos 48x48 o que la menor de las dimensiones sea de 48 pixeles, por ejemplo 56x48. En realidad las imágenes podrían ser un poco menores pero sería necesario configurar algunas opciones mas que no son objetivo de este post.
  • A medida que encuentre mas sugerencias o aspectos a tener en cuenta, los iré agregando en esta sección.

 

Bueno y este post lo termino aquí; te invito a que continúes profundizando sobre este menú y que comentes en este mismo artículo sobre las distintas opciones.

Nota: Podemos usar este menú en nuestros proyectos ASP.NET y dotarlos de estos llamativos efectos.

3 comentarios:

  1. lo probe y no funciona da este error

    Microsoft JScript runtime error: Object expected
    en esta función

    jQuery(document).ready(function()
    {

    jQuery('#menú').jqDock();

    });

    ResponderEliminar
  2. fijate que en el código
    jQuery('#menú').jqDock();
    '#menú' está con tilde en la ú. El control debe tener el mismo nombre

    ResponderEliminar
  3. Que tal amigo, fijate que tengo implementado el Dock en mi proyecto, pero extramente en firefox e IE9 me funcionan a la perfección, pero en chrome y safari el dock, que lo tengo alineado a la izquierda, el efecto se va hacia fuera, es decir, normalmente lo que aria es ir hacia adentro cuando pasas el mouse, espero puedas ayudarme o por lo menos una idea, el codigo este:
    var dockOptions = {
    align : 'right', // horizontal menu, with expansion UP/DOWN from the middle
    labels : 'tl',// add labels (override the 'tl' default)
    size : 45
    };
    // ...and apply...

    $('#dock2').jqDock(dockOptions);

    ResponderEliminar