Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

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

Posted: 12/4/2010 5:12 por Gonzalo Perez | con 2 comment(s)
Archivado en: ,,
Comparte este post:

Comentarios

Sergio ha opinado:

Interesante, lo aplicaré en mis desarrollos.

Saludos.

# April 12, 2010 6:13 AM

Francisco Javier Aranda ha opinado:

Muy bueno, en verdad:D

Ya lo implemente el mi pequeño proyecto...

Sale Full...

Gracias heermano.

# April 12, 2010 4:49 PM