Sep
21
Posted on 21-09-2007
Filed Under (fun, javascript, jquery) by Lunatic on 21-09-2007

Soy un gran fan de jQuery, y como tal, me siento muy orgulloso (snif?) de presentarles la extensión de jQuery para crear interfaces de usuario:
jQuery UI

Que es jQuery UI? (Traducido)

jQuery UI es un set de interacciones y widgets personalizables, escritos en base a la librería jQuery, que puedes usar para construir aplicaciones web altamente interactivas.




Página del proyecto de jQuery ui

El núcleo de la librería se centra alrededor de interacciones del mouse, soltar y agarrar (drag & drop), sortear, seleccionar y redimensionar.

En base a esas interacciones, hay construídos varios “widgets” reusables y útiles: Acordeones, calendarios, diálogos, sliders, organizadores de tablas y pestañas :eek:

Finalmente, la librería está terminada por algunos efectos que puedes usar para dar vida a tu sitio, como magnifier (el efecto de tsunami o el del docklet de Mac) y sombras

Elementos y documentacion

Hay una graaan cantidad de elementos, con muchas las opciones para probar… muy buenos:

  • Draggables : Hace que items sean arrastrables por el mouse
  • Droppables : Hace que los items sean soltables por el mouse
  • Sortables : Hace que una lista de items sea sorteable
  • Selectables : Hace que una lista de items sea seleccionable con el mouse o el teclado
  • Resizables : Hace a un elemento redimensionable
  • Accordion : Un panel de contenidos colapsable
  • Calendar : Un widget dinamico para escoger fechas
  • Dialog : Ventanas modales y dialogos de confirmacion
  • Slider : Un slider deslizable con el mouse
  • Table : Una tabla que se puede sortear
  • Tabs: Un panel con pestañas.
  • Shadow : Genera sombras (drop shadows) dinamicamente
  • Magnifier : Aumenta o disminuye el tamaño de un elemento basandose en la proximidad

Demos

En el momento hay un demo bastante bueno, que muestra las posibilidades de el ui:
Update: jQuery ui demo

Adicionalmente, cada elemento del ui tiene una pagina de demo, donde podremos ver las opciones del elemento, sus combinaciones y etc. Solo buscalas en la pagina de cada elemento.

Notas de uso

Para reducir el tamaño de tu pagina y no tener que cargar todos los modulos asi no los vayas a usar, jQuery ui está dividido en varios “compenentes”. Los nombres de estos son mas o menos ui.nombre.js para cada uno.Cada componente tiene sus dependencias: Por ejemplo el componente draggable depende de ui.mouse.js, que es donde se definen las interacciones con el mouse.

Así que para, por ejemplo, usar los draggables debes hacer lo siguiente:

<script src="jquery.js"></script>

<script src="ui.mouse.js"></script>

<script src="ui.draggable.js"></script>

<!--y si quieres tener las opciones extra:-->

<script src="ui.draggable.ext.js"></script>

Cool, no? :P

Desarrollo

Actualmente se están desarrollando bastantes módulos. Algunos no están totalmente listos para usar, pero si confías en el poder luminoso de la fuerza, puedes buscar algunos en el folder “ui” de el SVN de jQuery. Ahi encontrarás (o tal vez no XD) plugins indocumentados que te puedan ser útiles.

Algunos sobre los que se está trabajando son: Menu, Control de formularios, Arbol, Splitter (?), Editor de texto enriquecido y Uploader.

So…

Ya saben, todo está en experimentar. Viendo los demos realmente te inspiras: El componente modal puede ser muy bueno para reemplazar alerts, el efecto Magnify está muy bien logrado, etc. Asi que… long live jQuery ( y si era con f, ptj :D )

    Read More   

Comments

LA100RRA on 21 September, 2007 at 11:57 pm #

Se vé muy interesante y facíl de implementar, deberías hacer un tutorial desde cero para aquellos que no tenemos NPI de programación y ésas cosas :P


[...] Este blog que estoy leyendo ultimamente escribio un post muy interesante, Aqui os pongo un extracto frikis!!: Soy un gran fan de jQuery, y como tal, me siento muy orgulloso (snif?) … tamaño de tu pagina y no tener que cargar todos los modulos asi no los vayas a usar, jQuery ui está dividido en varios “compenen Posted in Mooniverse: El blog de Lunatic Lycanthrop ( 0 links from 0 sites) [...]


elfleat on 26 February, 2008 at 11:10 pm #

Murio el link de la galeria :S


Lunatic on 26 February, 2008 at 11:14 pm #

Link de la galería arreglado ;)

Benditos testers XD


Post a Comment
Name:
Email:
Website:
AntiSpam:

Comments: