JQuery BubbleUp Plugin, Dale más vida a tus ImageButtons

Hola, yo de nuevo con un dato de JQuery y otro de Diseño que me gustaron bastante y quería compartirlos con ustedes 🙂

Buenos Datos 🙂

Vamos a utilizar el plugin BlubbleUp http://aext.net/2010/02/learn-jquery-first-jquery-plugin-bubbleup/, que nos va a dar el efecto que queremos sobre los imageButtons.

image

Ahora , una buena opción para crear este tipo de botones es la página http://www.mycoolbutton.com/ , si bien hace unos meses era totalmente gratuita, ahora el autor ha puesto un precio, 5.99 Dólares al año, lo que es la nada misma, por mi parte ya estoy inscrito, y me ha servido bastante (hace poco terminé una aplicación para Windows Mobile, y los botones del menú los hice con esto.). Los botones de este ejemplo fueron creados con esta herramienta online:

image

El Código Declarativo

<div id=”demo”>
<ul id=”menu”>
  <li><asp:ImageButton ID=”b1″ runat=”server”ImageUrl=”~/img/b1.png”/></li
  <li><asp:ImageButton ID=”b2″ runat=”server”ImageUrl=”~/img/b2.png”/></li>
  <li><asp:ImageButton ID=”b3″ runat=”server”ImageUrl=”~/img/b3.png”/></li>
  <li><asp:ImageButton ID=”b4″ runat=”server”ImageUrl=”~/img/b4.png”/></li>
 
<li><asp:ImageButton ID=”b4″ runat=”server”ImageUrl=”~/img/b5.png”/></li>
</ul>
</div>

Bastante sencillo, solo dejamos nuestros imageButtons dentro de una lista, y luego el CSS nos dará el diseño que queremos:

Incluimos las librerías JQuery (desde el CDN de Microsoft) y luego la librería del plugin (bubbleup.js)

<script src=”http://ajax.Microsoft.com/ajax/jquery/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”js/jquery.bubbleup.js”></script>

Luego agregamos el siguiente código Javascript dentro de las etiquetas Body o Head

<script type=”text/javascript”>
        $(function () {
            $(“ul#menu li input”).bubbleup();
        });
</script>

En el ejemplo original, nos encontrábamos con un selector a ul#menu li img lo cual tenemos que cambiar, ya que ahora estamos utilizando imagebuttons, que despliegan en el cliente etiquetas Input:
  <input type=”image” name=”b2″ id=”b2″ src=”img/b2.png”/>

El CSS utilizado lo vas a encontrar en el ejemplo que se adjunta a este artículo, tengo que admitir que el tamaño de las imágenes no me quedó uniforme, pero para el ejemplo, sirven :P.

El resultado

Como siempre, un video vale más que mil palabras:

Descarga el Ejemplo Completo desde Acá

Espero que te haya servido!, nos vemos en otro post 🙂
Saludos
Gonzalo

2 comentarios en “JQuery BubbleUp Plugin, Dale más vida a tus ImageButtons”

Deja un comentario

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