13
May
aNieto2k hace 5066 días en: estandares, javascript, Programacion, web, webdev
Hace ya más de un año vimos como hacer gráficas con Google Chart, un ejemplo muy básico pero muy potente. Si despues de eso has jugado un poco más con Google Chart te habrás dado cuenta de que realmente es mucho más complejo y potente, por eso jQuery Google Charting nos ayuda a hacer las cosas más fáciles.
(Ver Imagen)
Despues de añadir el fichero Javascript necesario(jquery.gchart.js) y el núcleo de jQuery, simplemente tendremos que añadir un código similar a este para disponer del gráfico.
$('div selector').gchart({series: [$.gchart.series([20, 50, 30])]});
Indicamos el selector y la serie de parámetros que queremos pintar en el gráfico. Mediante una API bastante completa podremos personalizar nuestros gráficos consiguiendo que se ajusten a las necesidades de nuestras aplicaciones.
24
Abr
aNieto2k hace 5085 días en: Asides, javascript, Programacion, webdev
Estos 11 plugins de jQuery no son solo interesantes por su funcionalidad sinó por el peso de los mismos. En menos de 4kb es posible tener un plugin funcional y listo para integrar en nuestras aplicaciones.
16
Abr
aNieto2k hace 5093 días en: Accesibilidad, javascript, Programacion, usabilidad, webdev
Javascript Image Combobox es un plugin jQuery que permite que nuestros elementos <select/> tenga una vida que hasta ahora no podían tener.
(Ver Imagen)
Se trata de una extensión que permite que los items de los <select /> tengan una imagen para facilitar la selección de items dentro de un listado de opciones.
Para ello hacen uso de un atributo (no estandar) del elemento <option /> llamado icon, que indicará de donde coger la imagen que mostraremos junto al <option />.
<select name="webmenu" id="webmenu" onchange="showValue(this.value)">
<option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" icon="icons/icon_cd.gif">CD</option>
<option value="email" selected="selected" icon="icons/icon_email.gif">Email</option>
<option value="faq" icon="icons/icon_faq.gif">FAQ</option>
<option value="games" icon="icons/icon_games.gif">Games</option>
<option value="music" icon="icons/icon_music.gif">Music</option>
<option value="phone" icon="icons/icon_phone.gif">Phone</option>
<option value="graph" icon="icons/icon_sales.gif">Graph</option>
<option value="secured" icon="icons/icon_secure.gif">Secured</option>
<option value="video" icon="icons/icon_video.gif">Video</option>
</select>
Despues con una línea de Javascript este atributo se convertirá en una imagen alojada dentro del <select />.
MSDropDown.init();
Si quieres ver una demo de como quedaría, puedes echarle un vistazo aqui.
1
Abr
aNieto2k hace 5108 días en: estandares, javascript, Programacion, web, webdev
FullSize es un plugin jQuery que esconde una propuesta muy interesante. Este plugin se apoya en la idea de implementar un nuevo atributo HTML para los elementos IMG.
<img src="imagen.png" alt="Imagen de prueba" fullsize="imagen-grande.png" />
La idea es muy interesante por que de llegar a buen puerto, este atributo podría pasar a formar parte de la especificación HTML y delegar esta tarea al navegador (algo que siempre es mucho más recomendable que implementarlo mediante un plugin).
Hasta el momento, esto lo podíamos hacer embebiendo la imagen en un enlace haciendo que al hacer click sobre ella esta se abriera en una página nueva (o no) mostrando la imagen grande.
<a href="imagen-grande.png" title="Imagen grande">
<img src="imagen.png" alt="Imagen de prueba" />
</a>
Esta opción actualmente es la más accesible para conseguir que todo el mundo pueda ver la imagen grande, y es la principal técnica usada por todas (o casi todas) las implementaciones de Lightbox.
El plugin
En solo 8kb, podemos disponer de un lightbox que se apoya en el atributo longdesc (me parece horrible) y que podemos usar de la siguiente forma:
Declaración
<link href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script>
// Javascript
$("img").fullsize();
Despues nuestras imagenes deberán indicar la imagen grande en el atributo longdesc que será de donde sacará el plugin la dirección para mostrarla.
<img src="me.jpg" alt="me" longdesc="me-big.jpg" />
