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