JqueryUI - Guía rápida
JqueryUI es una poderosa biblioteca Javascript construida sobre la biblioteca jQuery JavaScript. UI significa interfaz de usuario. Es un conjunto de complementos para jQuery que agrega nuevas funcionalidades a la biblioteca principal de jQuery.
El conjunto de complementos en JqueryUI incluye interacciones de interfaz, efectos, animaciones, widgets y temas creados sobre la biblioteca jQuery JavaScript.
Fue lanzado en septiembre de 2007, anunciado en una publicación de blog de John Resig en jquery.com. La última versión, 1.10.4, requiere jQuery 1.6 o una versión posterior. jQuery UI es un software gratuito de código abierto, con licencia MIT.
Caracteristicas
JqueryUI se clasifica en cuatro grupos, interacciones, widgets, efectos, utilidades. Estos se analizarán en detalle en los capítulos siguientes. La estructura de la biblioteca es como se muestra en la siguiente imagen:
Interactions - Estos son los complementos interactivos como arrastrar, soltar, cambiar el tamaño y más que le dan al usuario la capacidad de interactuar con elementos DOM.
Widgets - Usando widgets que son complementos de jQuery, puede crear elementos de interfaz de usuario como accordian, datepicker, etc.
Effects- Estos se basan en los efectos internos de jQuery. Contienen un conjunto completo de animaciones y transiciones personalizadas para elementos DOM.
Utilities - Se trata de un conjunto de herramientas modulares que la biblioteca JqueryUI utiliza internamente.
Beneficios de JqueryUI
Los siguientes son algunos de los beneficios de Jquery UI:
- API coherentes y coherentes.
- Soporte completo para navegadores.
- Código abierto y de uso gratuito.
- Buena documentación.
- Potente mecanismo de tematización.
- Estable y de fácil mantenimiento.
Este capítulo discutirá sobre la descarga y configuración de la biblioteca JqueryUI. También estudiaremos brevemente la estructura del directorio y su contenido. La biblioteca JqueryUI se puede usar de dos maneras en su página web:
Descargue la biblioteca de interfaz de usuario de su sitio web oficial
Cuando abres el enlace http://jqueryui.com/, verá que hay tres opciones para descargar la biblioteca JqueryUI:
Custom Download - Haga clic en este botón para descargar una versión personalizada de la biblioteca.
Stable - Haga clic en este botón para obtener la versión estable y más reciente de la biblioteca JqueryUI.
Legacy - Haga clic en este botón para obtener la versión principal anterior de la biblioteca JqueryUI.
Descarga personalizada con Download Builder
Con Download Builder, puede crear una compilación personalizada para incluir solo aquellas partes de la biblioteca que necesita. Puede descargar esta nueva versión personalizada de JqueryUI, según el tema elegido. Verá la siguiente pantalla (la misma página está dividida en dos imágenes):
Esto es útil cuando solo necesita complementos o características específicas de la biblioteca JqueryUI. La estructura de directorios de esta versión se muestra en la siguiente figura:
Los archivos sin comprimir se encuentran en el directorio del paquete de desarrollo . El archivo sin comprimir se utiliza mejor durante el desarrollo o la depuración; el archivo comprimido ahorra ancho de banda y mejora el rendimiento en producción.
Descarga estable
Haga clic en el botón Estable, que conduce directamente a un archivo ZIP que contiene las fuentes, los ejemplos y la documentación de la última versión de la biblioteca JqueryUI. Extraiga el contenido del archivo ZIP en un directorio jqueryui .
Esta versión contiene todos los archivos, incluidas todas las dependencias, una gran colección de demostraciones e incluso el conjunto de pruebas unitarias de la biblioteca. Esta versión es útil para comenzar.
Descarga heredada
Haga clic en el botón Legacy, que conduce directamente a un archivo ZIP de la versión principal anterior de la biblioteca JqueryUI. Esta versión también contiene todos los archivos, incluidas todas las dependencias, una gran colección de demostraciones e incluso el conjunto de pruebas unitarias de la biblioteca. Esta versión es útil para comenzar.
Descargar la biblioteca de IU de CDN
Una CDN o Content Delivery Network es una red de servidores diseñada para entregar archivos a los usuarios. Si utiliza un enlace CDN en su página web, traslada la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si el visitante de su página web ya ha descargado una copia de JqueryUI del mismo CDN, no tendrá que volver a descargarla.
La Fundación jQuery , Google y Microsoft proporcionan CDN que alojan el núcleo jQuery y la interfaz de usuario jQuery.
Debido a que una CDN no requiere que alojes tu propia versión de jQuery y jQuery UI, es perfecta para demostraciones y experimentación.
Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial.
Ejemplo
Ahora escribamos un ejemplo simple usando JqueryUI. Creemos un archivo HTML, copiemos el siguiente contenido en la etiqueta <head> -
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Los detalles del código anterior son:
La primera línea, agrega el tema jQuery UI (en nuestro caso ui-lightness ) a través de CSS. Este CSS hará que nuestra interfaz de usuario sea elegante.
Segunda línea, agrega la biblioteca jQuery, ya que la interfaz de usuario jQuery está construida sobre la biblioteca jQuery.
Tercera línea, agrega la biblioteca jQuery UI. Esto habilita la interfaz de usuario de jQuery en su página.
Ahora agreguemos algo de contenido a la etiqueta <head> -
<script type = "text/javascript">
$(function () {
$('#dialogMsg').dialog();
});
</script>
En el <body> agregue esto -
<body>
<form id = "form1" runat = "server">
<div id = "dialogMsg" title = "First JqueryUI Example">
Hello this is my first JqueryUI example.
</div>
</form>
</body>
El código HTML completo es el siguiente. Guardarlo comomyfirstexample.html
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type = "text/javascript">
$(function () {
$('#dialogMsg').dialog();
});
</script>
</head>
<body>
<form id = "form1" runat = "server">
<div id = "dialogMsg" title = "First JqueryUI Example">
Hello this is my first JqueryUI example.
</div>
</form>
</body>
</html>
Abra la página anterior en su navegador. Producirá la siguiente pantalla.
jQueryUI proporciona draggable()método para hacer que cualquier elemento DOM sea arrastrable. Una vez que el elemento se puede arrastrar, puede mover ese elemento haciendo clic en él con el mouse y arrastrándolo a cualquier lugar dentro de la ventana gráfica.
Sintaxis
los draggable() El método se puede utilizar de dos formas:
$ (selector, contexto) .draggable (opciones) Método
El método arrastrable (opciones) declara que un elemento HTML se puede mover en la página HTML. El parámetro de opciones es un objeto que especifica el comportamiento de los elementos involucrados.
Sintaxis
$(selector, context).draggable(options);
Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:
$(selector, context).draggable({option1: value1, option2: value2..... });
La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:
No Señor. | Opción y descripción |
---|---|
1 | addClasses Si esta opción se establece en false, evitará el ui-draggableclass para que no se agregue a la lista de elementos DOM seleccionados. Por defecto su valor estrue. |