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.
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.
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.
$(".block").draggable();
Entonces implementando el HTML para verlo funcionar se tendría:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/ui.mouse.js"></script>
<script src="js/ui.draggable.js"></script>
<script src="js/ui.draggable.ext.js"></script>
<script>
$(document).ready(function(){
$(".block").draggable();
});
</script>
<style>.block {
border: 2px solid #0090DF;
background-color: #68BFEF;
width: 150px;
height: 70px;
margin: 10px;
}</style>
</head>
<body>
<div class="block"></div>
</body>
</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
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