JQuery UI

  • 18/09/2007
  • 10:15 am
  • unijimpe

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.

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

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

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

Posts Relacionados

Enviar Comentario

(*)

(*)