JQuery UI

jQuery UI es un conjunto de widget o aplicaciones pequeñas que permiten personalización e interactividad, desarrolladas utilizando JQuery se pueden utilizar para desarrollas aplicaciones altamente interactivas y de gran calidad.

jquery-ui.gif

El corazón de esta librería contiene funciones para diferentes interacciones con el mouse, arrastrar y soltar, ordenamiento, selecciones y redimensión de elementos. Basado en estas funciones se implementan widgets como: acordeon, selectores de fechas, pantallas de dialogo, sliders, ordenamiento de tablas y tabs.

Puedes ver los ejemplos en la web oficial y se encontrarán con una amplia variedad de formas de utilizar esta librería.

jquery-ui-samples.gif

Descargar jQuery UI
Esta librería necesita JQuery para su funcionamiento, para descargarlo puedes hacerlo desde: jquery.ui-1.0.zip con un tamaño de 101Kb es muy ligero comparado con lo que se puede lograr. Además existe la posibilidad de seleccionar los elementos y/o temas que se desean descargar.

Ejemplo
Veamos un ejemplo muy sencillo, crearemos un elemento html y lo convertiremos en arrastrable o draggable, para ello empleamos la propiedad draggable, donde se le define que elemento sera el que se puede arrastrar.

  1. $(".block").draggable();

Entonces implementando el HTML para verlo funcionar se tendría:

  1.   <script src="js/jquery.js"></script>
  2.   <script src="js/ui.mouse.js"></script>
  3.   <script src="js/ui.draggable.js"></script>
  4.   <script src="js/ui.draggable.ext.js"></script>
  5.   <script>
  6.   $(document).ready(function(){
  7.     $(".block").draggable();
  8.   });
  9.   </script>
  10.   <style>.block {
  11.    border: 2px solid #0090DF;
  12.    background-color: #68BFEF;
  13.    width: 150px;
  14.    height: 70px;
  15.    margin: 10px;
  16. }</style>
  17. </head>
  18. <div class="block"></div>
  19. </body>
  20. </html>

El resultado del ejemplo lo pueden ver en jquery-ui.htm, como ven sencillo y con un resultado de buena calidad. Para muchos desarrolladores esta librería contribuirá a lograr mejores interfaces en el desarrollo de nuestras aplicaciones.

Comentarios Total 1 comentario


Jesus
Publicado: 31/08/2010 3:11 am

Buenos días,
Solo quería decir que el ejemplo me parece muy interesante, pero en el momento en que intentas cargarlo no encuentra las librerías:
Failed to load source for: http://dev.jquery.com/view/trunk/plugins/ui/ui.mouse.js
Un saludo

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)