JQuery UI: JQuery para seres humanos XD

Asi con esta mención de Ubuntu, quiero comentarles sobre esta herramienta muy importante: JQuery UI. Considero yo que es una forma más sencilla de hacer uso de este potente framework.

Muchos ya sabemos lo que es JQuery, y para quienes no, un poco de wikipedia para estar en sintonía:

JQuery

Ahora bien, JQuery UI (JQuery User Interface) viene siendo como una compilación de widgets, efectos, etc. que son parte de JQuery y que nos permite hacer uso de ellos de una manera más sencilla que con el propio JQuery (o al menos así lo concibo yo).

JQuery UI se divide en 4 partes:

• Interactions (interacciones): proporciona ciertas propiedades a los elementos, por ejemplo: que se puedan arrastrar, redimensionar, etc.
• Widgets (se traduce igual XD): proporciona elementos que podemos utilizar en nuestra aplicación web, por ejemplo: selectores de fecha, menús tipo acordión, barras de progreso, etc.
• Utilities (utilidades): Proporciona interacciones con los elementos.
• Effects (Efectos): Proporciona efectos de transición para las interacciones.

La utilización es bastante sencilla, sería más o menos así:

Ver para Creer

Bueno, primeramente podemos ver su funcionamiento desde su página de demostración Demos de JQuery UI

En la página de Demos solo se selecciona el elemento que se desea ver, cada página de demostración esta bien documentada, ofreciendo distintos tipo de configuración para cada elemento y su respectivo código fuente para su utilización. Lamentablemente hay que dominar el inglés (aunque con super Google Traductor todo es posible).

Descargar 

Lo siguiente, luego de ver y decidir que se quiere ocupar, el tema preferido (si, se le pueden aplicar temas o skins muy bonitos) procedemos a descargar los archivos necesarios para implementarlo en nuestra aplicación. Para ello nos dirigimos a la página de descargas descargas de JQuery UI.

En el sitio de descargas, seleccionamos los componentes que deseamos tener, el tema y la versión de JQuery UI. Al seleccionar todos los componentes, la descarga va ser de aprox: 1 MB (:O). No es tan pesado.

La descarga es un archivo zip, que tenemos que descomprimir en un sitio conveniente. Dentro tenemos 3 carpetas y un archivo index.html. Lo que nos interesa son las carpetas css y js donde se encuentran el estilo css (tema o skin), y los archivos javascript que hacen que la magia funcione. Pues bien, solo bastaría con copiar estos archivos a nuestra carpeta web para empezar a usar esta maravillosa herramienta de los dioses :D

Usar

Ya con los archivos copiados en nuestra carpeta web, su utilización es sencilla, basta con referenciar los archivos necesarios (css y js) al código fuente:

<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../estilos/blitzer/jquery-ui-1.8.16.custom.css"> 

Importante mencionar que hay que tener cuidado de dejar el archivo JQuery antes del de JQuery UI ya que de lo contrario no funciona (¬¬ me ha pasado).

Con esto ya estamos listos para usar cualquiera de los elementos que se incluyen en nuestro jquery ui. Para ello solo insertamos el codigo del elemento deseado. Este codigo podemos tomarlo de la pagina de demostracion de JQuery UI y combinar las configuraciones deseadas. Como ejemplo aquí un selector de fechas:

<script>
$(function() {
    $(".date-pick").datepicker({
        minDate: "-100Y",
        maxDate: "+1M +10D",
        changeMonth: true,
        changeYear: true
     });
});
</script> 

En esta código, seria prudente modificar unas cuantas cosas. Por ejemplo $(".date-pick"), esto nos indica que para convertir un elemento a selector de fecha, se le debe pasar al atributo class ( es class debido al ".", si fuera "#" entonces sería por medio del atributo id) el valor "date-pick", esto se puede modificar a conveniencia.

Espero que este post sea de utilidad y les hay gustado. No soy la gran eminencia programando, pero me gusta compartir lo poco que sé :) si les ha gustado comenten.