jqPlot utiliza el elemento Canvas para renderizar en cliente gráficos dinámicos por medio de programación. Una de las ventajas fundamentales de usar este plugin de jquery es la posibilidad de incluir en nuestras páginas gráficos interactivos sin necesidad de sobrecargarlas con pesados flash.

Ejemplo de jqPlot

Al igual que todos los la mayoria de los plugin de jquery jqPlot nos brinda una configuración bastante asequible para todos aquellos que conocemos el framework de Jquery .

Ejemplo de implementación de jqPlot

Resultado del código implementado

var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
   cosPoints.push([i, Math.cos(i)]);
}
plot1 = $.jqplot('chart1', [cosPoints], {
    series:[{showMarker:false}],
    axes:{
      xaxis:{
        label:'Angle (radians)',
        autoscale: true
      },
      yaxis:{
        label:'Cosine',
        autoscale: true
      }
    }
});

Ademas jqPlot cuenta con una excelente documentación que nos permitira sacar el máximo rendimiento a este gran plugin. ]]> http://www.unprogramadormas.com/27/09/2009/plugins-imprescindibles-para-jquery-jpplot/feed/ 0 http://www.unprogramadormas.com/21/08/2009/plugins-imprescindibles-para-jquery-%e2%80%93-slideviewer/ http://www.unprogramadormas.com/21/08/2009/plugins-imprescindibles-para-jquery-%e2%80%93-slideviewer/#comments Fri, 21 Aug 2009 07:40:21 +0000 jmnieves http://yokese.wordpress.com/?p=114 Bienvenidos a la segunda entrega de la  serie Plugins imprescindibles para Jquery en esta ocasión os hablare del plugin de jquery slideViewer.

SlideViewer es un plugin de jquery cuya utilidad es la de generarnos a partir de una lista html de imagenes una galeria de imagenes con una interficie y transiciones atractivas.

jQuery slideViewer

SlideViewer nos permite modifiar su aspecto desde la hoja de estilos pudiendose adaptar de esta manera al diseño de nuestra interficie.

Ejemplo Simple

Dentro del tag HEAD

jQuery(function(){jQuery("div#<code>ejemploSlideviewId</code>").slideView({toolTip: false});

Dentro del tag BODY

<ul>
<li><img src="img1.jpg" alt="alt img 1" /></li>
<li><img src="img2.jpg" alt="alt img 2" /></li>
<li><img src="img3.jpg" alt="alt img 3" /></li>
<li><img src="img4.jpg" alt="alt img 4" /></li>
<!--eccetera-->
</ul>
</div>

Tambien podemos usar slideViewer con otros plugins como jQuery lightBox plugin (del que os hablare en un próximo articulo) para usar slidwViewer como visor de vistas en miniatura y máximizarlas con lightBox dotando a nuestra interficie de una sencillez y elegancia dignas del Iphone .

SlideViewer interactuando con Ligthbox

Ejemplo con LigthBox

Dentro del tag HEAD

jQuery(function(){
jQuery("div#<code>ejemploSlideviewId</code>").slideView({toolTip: false});
jQuery("div#<code>ejemploSlideviewId</code>").lightBox({fixedNavigation:true});
});

Dentro del tag BODY

<div id="ejemploSlideviewId">
<ul>
<a href="rutaimg1" title="title img1"><li><img src="img1.jpg" alt="alt img 1" /></li></a>
<a href="rutaimg1" title="title img1"><li><img src="img2.jpg" alt="alt img 2" /></li></a>
<a href="rutaimg1" title="title img1"><li><img src="img3.jpg" alt="alt img 3" /></li></a>
<a href="rutaimg1" title="title img1"><li><img src="img4.jpg" alt="alt img 4" /></li></a>
 <!--eccetera-->
</ul>
</div>

Pasadas las presentaciones pertinentes en esta serie de articulos tratare de mostraros en mi opinión los plugins imprescindibles para Jquery que debeis conocer para poder llevar a buen puerto vuestros desarrollos web con interfaces usables e intuitivas para el usuario. En este primer capitulo os mostrare blockui uno de mis últimos descubrimientos en la extensa materia de los plugins para jquery

jquery.blockUI.js

BlockUI es uno de los magnificos plugins realizados por malsup ; concretamente blockui como su nombre indica sirve para bloquear al usuario ciertas zonas de una página web. Si usamos AJAX en nuestras aplicaciones esto nos será muy útil para mostrar el típico mensaje de loading espere… mientras efectuamos las operaciones en el lado del servidor.

BlockUI Iphone style

BlockUI nos brinda tambien la posibilida de mostrar Growl messages notificaciones al usuario cuando realicemos alguna operación que no actualice el contenido activo

Growl message con BlockUI

Para más información acerca de este plugins no dudes en visitar su página oficial