Lectura Fundamental 6 PDF

Unidad 3 / Escenario 6
Lectura Fundamental
Librerı́a jQuery UI
Contenido
1 ¿Qué es jQuery UI? 1
2 Widgets 3
3 Interacciones 5
4 Efectos 8
5 Utilidades 9
Palabras Claves: jQuery UI, librerı́a de interfaz de usuario, jQuery, widgets jQuery
Conocida como la librerı́a de interfaz de usuario de jQuery, jQuery UI es un conjunto de plugins construidos sobre
la librerı́a jQuery que facilitan la construcción de interfaces de usuario en la Web, proporcionando widgets que
agregan funcionalidad a las páginas. En esta lectura se abordan los componentes principales de la librerı́a: widgets,
interacciones, efectos y utilidades, junto con algunos ejemplos de su uso.
1. ¿Qué es jQuery UI?
jQuery UI es una librerı́a de JavaScript compuesta de una colección de extensiones (plugins) y utilidades construidas
sobre la librerı́a jQuery, que permiten la construcción de interfaces de usuario más interactivas.
jQuery UI proporciona un conjunto importante de componentes, altamente personalizables, muy bien documentados
para la creación aplicaciones Web más interactivas.
Una de las ventajas que presenta esta librerı́a, a diferencia de otros plugins de jQuery, es que se encuentra muy
bien soportada por la comunidad de jQuery Foundation y el uso de sus elementos no genera incompatibilidades
entre sı́, como suele suceder cuando se combinan plugins de terceros.
Por otra parte, una de las ventajas más importantes de la librerı́a es que sus componentes están diseñados para ser
compatibles con la mayorı́a de navegadores por lo menos en sus versiones más recientes.
El sitio oficial de la librerı́a ofrece la posibilidad de descargar el código fuente que incluye todos los componentes o
seleccionar únicamente el conjunto de componentes requeridos para nuestra aplicación.
Una de las desventajas de jQuery UI es que todos sus componentes no se encuentran optimizados o diseñados para
ser visualizados en dispositivos móviles con caracterı́sticas táctiles (touch). Por lo cual para este caso será necesario
probar otras alternativas.
Por otra parte, a pesar de ser una librerı́a orientada para la construcción de interfaces de usuario, jQuery UI no
contiene una gran cantidad de componentes.
A diferencia de jQuery UI, la librerı́a jQuery Mobile está diseñada para soportar aplicaciones que se ejecutan sobre
dispositivos móviles, las cuales contienen funcionalidades táctiles. Esta librerı́a junto con jQuery UI está construida
sobre el núcleo de jQuery, y tal como lo hace jQuery UI, la librerı́a jQuery Mobile también incluye el widget factory
y lo utiliza para la construcción de sus widgets.
jQuery UI está conformada por cuatro componentes principales.
• widgets
• interacciones
• efectos, y
• utilidades (core)
POLITÉCNICO GRANCOLOMBIANO 1
1.1. ¿Cómo utilizar la librerı́a jQuery?
Para empezar a utilizar jQuery UI bastarı́a con descargar la librerı́a del sitio oficial ((jQuery UI)), 2017 y cargarla
en nuestra página a través de las etiquetas <script>.
No obstante, es posible hacer uso de un CDN (Content Delivery Network), lo que nos evita tener que alojar en
nuestros servidores el código fuente de la librerı́a jQuery, para que en cambio estos sean obtenidos por el navegador
de otro sitio en Internet, como por ejemplo, el CDN de jQuery. La organización jQuery Foundation proporciona
uno de estos CDN por lo que utilizaremos este para nuestro ejemplo.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
// JavaScript code goes here!
</script>
</body>
</html>
Código 1: Inclusión de la librerı́a jQuery en una página HTML.
En el ejemplo 1, las dos primeras etiquetas <script> están encargadas de solicitar los archivos de código fuente de
las librerı́as jQuery y jQuery UI respectivamente directamente del CDN de jQuery. La etiqueta <link> se encarga
de solicitar el archivo de reglas de estilos CSS también del CDN de jQuery, el cual incluye el diseño por defecto de
los componentes gráficos de jQuery y jQuery UI.
En el pasado se recomendaba que las etiquetas <script> estuvieran ubicadas dentro de la etiqueta <head> en
lugar de estar ubicadas en el cuerpo del documento. Esto implicaba que cuando las etiquetas <script> eran
ejecutadas, los elementos de la página (<body>) no habı́an sido cargados aún y por ende cualquier tipo de consulta
o modificación sobre el DOM podrı́a no tener efecto debido a que los elementos aún no existı́an como tal, por ende
para resolver este problema el código JavaScript tenı́a que modificarse para esperar hasta que el DOM estuviera
listo.
Para resolver este problema jQuery proporcionó una manera para que el código no se ejecutara hasta no estar
seguros que todos los elementos hubieran sido visualizados en el navegador. Esto se lograba ubicando el código
JavaScript, que deseábamos ejecutar una vez el DOM estuviera listo, dentro de la función que pasamos en la
invocación de la función jQuery.
Debido a lo anterior, si ubicamos las etiquetas <script> al final del cuerpo del documento, los elementos del DOM
ya habrán sido cargados y están listos para poder ser consultados y modificados de ser necesarios a través de código
JavaScript. Por lo cual no será necesario utilizar la función jQuery para esperar a que los elementos de la página
$( function() {
// when code in this function executes, DOM elements are ready!
});
estén listos.
2. Widgets
Son plugins de jQuery que permiten crear elementos de interfaz de usuario que generalmente no se encuentran
dentro del estándar HTML y son de gran utilidad para facilitar la interacción de usuario. Por ejemplo, elementos
como seleccionadores de fechas, menús, barras de progreso, ventanas de diálogo, entre otros.
Accordion Autocomplete Button Checkboxradio

Controlgroup Datepicker Dialog Menu
Progressbar Selectmenu Slider Spinner
Tabs Tooltip
Cuadro 1: Lista de widgets de jQuery UI.
Uno de los widgets más simples pero a su vez útiles de jQuery UI es el widget Dialog. Este widget permite mostrar
una ventana de diálogo con un mensaje personalizado, incluir controles como botones y responder a los eventos
asociados a estos.
Figura 1: Ejemplo de ventana de diálogo personalizada.
El siguiente código de ejemplo muestra como el método dialog puede ser utilizado con el propósito de mostrar un
mensaje de confirmación para una tarea que un usuario ha realizado sobre una página.
En este ejemplo, se puede observar que el método dialog está siendo utilizado mientras recibe como argumento
un objeto que representa las opciones del widget. Estas opciones permiten personalizar la ventana de diálogo, en
donde caracterı́sticas tales, como: tı́tulo, ancho y alto, el conjunto de botones y sus respectivos manejadores de
$("<div>Are you sure you want to upload these files?</div>").dialog({
title: "Uploading",
buttons: [{
text: "Yes, I'm",
click: function() {
console.log("The files have been loaded");
$(this).dialog("close");
}
},{
text: "No, I'm not",
click: function() {
console.log("The user has canceled the file uploading");
$(this).dialog("close");
}
}]
}
);
Código 2: Código JavaScript para mostrar una ventana de diálogo.
eventos, pueden ser especificadas allı́, entre otras opciones más.
Una de las opciones que están siendo pasadas al método dialog es la opción buttons. Esta opción es especificada
por medio de un arreglo de objetos cada uno de ellos especificando uno de los botones que el widget contendrá.
En esta caso, uno de los botones tiene por texto la cadena "Yes, I’m" y el otro "No, I’m not". Ambos botones
vienen acompañados de una función para el atributo clic, las cuales tienen como propósito responder a la acción
de clic realizada por el usuario. De manera alternativa, es posible definir el valor de la opción buttons como un
objeto en lugar de un arreglo de objetos, en donde las llaves corresponden con el texto de los botones y los valores
corresponden con las funciones callbacks, esto es, la función que será invocada cuando el usuario haga clic sobre el
botón. Como ejemplo, observe el siguiente valor asociado a la opción buttons para un widget dialog.
$("<div>Are you sure?</div>"){

buttons: {
"Yes": function() {/* callback function */ },
"No" : function() {/* another callback function */ },
},
}
Como puede observar en el código 2, los manejadores para el evento clic en ambos botones incluyen la lı́nea:
$(this).dialog().close();
que da la instrucción de cerrar la ventana de diálogo por medio de la invocación del método close. Dentro del
contexto del manejador click la palabra reservada this hace referencia al elemento del DOM de la ventana de
diálogo, en este caso, al elemento <div> que es especificado en la función jQuery(), por lo cual, para poder invocar
el método close del widget dialog, primero debemos tener el objeto jQuery de tipo dialog para luego poder
invocar el método. Esto puede hacerse por medio de la función jQuery pasando como argumento la variable this:
$(this)
El widget dialog presenta un conjunto de métodos útiles tales como:
• destroy: remueve la funcionalidad de la ventana de diálogo completamente.

• isOpen: indica si la ventana de diálogo está abierta o no.
• open: abre la ventana de diálogo.
• option: obtiene el valor asociado a una de las opciones del widget.
Todos los widgets son capaces de disparar eventos que le permitirán responder a los cambios de estado del widget.
Por ejemplo, cuando el widget dialog es cerrado, independientemente de si fue debido a la interacción del usuario
o un código encargado de cerrarlo, el evento close es disparado.
El siguiente cuadro contiene una lista de los eventos disparados por el widget dialog.
beforeClose close create drag

dragStart dragStop focus open
resize resizeStart resizeStop
Cuadro 2: Lista de eventos soportados por el widget dialog.
Note además, que el mensaje de la ventana está siendo especificado dentro del selector argumento de la función
jQuery. Lo que significa que el elemento <div> será construido y agregado al DOM para poder ser mostrado en la
página.
La documentación del widget Dialog puede ser consultada directamente del sitio de jQuery UI ((jQuery UI)), 2017.
3. Interacciones
Son plugins de jQuery que permiten interactuar con elementos del DOM. Son considerados como un segundo tipo
de widgets debido a que son implementados utilizando el widget Factory. Estos widgets permiten que el usuario
manipule los elementos de la página por medio del mouse. Si bien las aplicaciones de escritorio ya implementan
caracterı́sticas como estas, hacer esto en la Web no es igual de sencillo sin el uso de librerı́as.
Una de las desventajas de las interacciones es que no funcionan con eventos táctiles.
En el cuadro 3 se listan las interacciones proporcionadas por jQuery UI.
Draggable Droppable Resizable

Selectable Sortable
Cuadro 3: Lista de interacciones de jQuery UI.
3.1. Interacción Draggable
La primera de ellas, la interacción draggable, permite que los elementos puedan ser arrastrados en la ventana.
Con el objetivo de aplicar la interacción draggable definiremos un elemento div, con un ancho y alto especificado a
través de reglas CSS que aplicaremos a este elemento utilizando la función css de jQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Draggable example</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="mybox" >Hello World!</div>
<script type="text/javascript">
$('#mybox').css('width', '150px')
.css('height', '150px')
.css('border-width', '1px')
.css('border-style', 'solid')
.css('padding', '0.5em')
.draggable();
</script>
</body>
</html>
Código 3: Ejemplo interacción draggable.
Continuando con la filosofı́a de jQuery, “escribe menos hace más”, es posible aplicar esta interacción, con todas
sus opciones por defecto, simplemente invocando el método draggable sin pasar argumentos tal como se puede
observar en el código 3.
Una vez aplicada la interacción el elemento puede ser arrastrado en la pantalla por medio del mouse permitiendo
modificar su ubicación en la página entera.
No obstante, es posible que no deseemos permitir que el elemento pueda ser arrastrado por toda la página, sino que
en cambio, se pueda desplazar únicamente dentro de una región especificada.
Gracias a que las interacciones son widgets, podemos configurarlas de la misma manera que lo hacı́amos con los
widgets, pasando un objeto con las opciones que deseamos definir para la interacción. Allı́ podremos definir opciones,
métodos y eventos.
Figura 2: Ejemplo de elemento con la capacidad de poderse arrastrar en el página.
$('#mybox').draggable({
'containment': '#bigbox',
'drag' : function(event, ui) {
$(this).html(
'top: ' + ui.position.top + '<br/>' +
'left: ' + ui.position.left + '<br/>'
);
}
});
Código 4: Aplicación de la interacción draggable con opciones.
Una de las opciones que nos permitir establecer la región de la página en donde un elemento puede ser arrastrado
es la opción containment. Esta opción recibe un valor que puede ser de tipo selector, elemento, string o arreglo. Al
pasar un selector se utilizará el primer elemento que corresponda con este selector y se establecerá como región
para que el elemento pueda ser arrastrado.
En el código 4 se puede observar como la opción containment es especificada, junto con el la función callback para
el evento drag.
En este caso, se ha especificado la acción a realizar cada vez que el elemento es arrastrado. La acción consiste en
reemplazar el contenido del elemento div con la ubicación de la esquina superior izquierda del elemento arrastrable
con respecto al elemento contenedor, en este caso, un elemento div con id mybox.
En la figura 3 se puede observar un ejemplo de la aplicación de esta interacción.
El widget draggable define más opciones configurables, métodos y eventos para esta interacción. La documentación
de este widget puede ser consultada directamente del sitio de documentación de jQuery UI ((Draggable Widget —
jQuery UI API Documentation)), 2017.
Figura 3: Elemento arrastrable dentro del elemento div de borde rojo.
4. Efectos
Son un conjunto de animaciones y transiciones personalizables para elementos del DOM. Se encuentran construidos
sobre las animaciones proporcionadas por el núcleo de jQuery.
Aplicar los efectos en una página se puede hacer de dos maneras. La primera de ellas involucra la invocación de la
funciones de jQuery.
Como podrá recordar, jQuery proporciona por defecto un conjunto de funciones para ocultar y mostrar elementos de
forma básica, esto mediante las funciones show(), hide() y toggle(). Al usar estas funciones es posible configurar
caracterı́sticas como la velocidad con que se muestra u oculta un elemento.
jQuery UI extiende estas funciones permitiendo utilizar múltiples efectos al momento de mostrar u ocultar un
elemento.
La segunda manera para aplicar efectos se hace a través de la función exclusiva de jQuery UI effect. Alternativa-
mente al uso de efectos para mostrar u ocultar elementos, también es posible aplicar efectos para resaltar, realzar
o destacar elementos. Uno de estos efectos es highlight que, como su nombre lo indica, se encarga de resaltar
el elemento modificando su color de fondo por un color amarillo similar al de la opción resaltador que se puede
encontrar en algunos editores o procesadores de texto. Para aplicar este efecto sobre un elemento o una colección de
elementos cuya duración sea, por ejemplo, de dos segundos, es suficiente invocar la función effect a los elementos
de la siguiente manera:
$('myselector').effect('highlight', 2000);
Allı́, el valor del primer argumento representa el efecto que se desea aplicar al elemento o elementos, y el segundo
argumento representa la duración del efecto en milisegundos.
Otros efectos son:
• bounce: este efecto anima la aparición o desaparición de un elemento haciendo que rebote durante un tiempo
determinado.
• pulsate: .
Add Class Color Animation Easing Effect

Hide Remove Class Show Switch Class
Toggle Toggle Class
Cuadro 4: Lista de efectos de jQuery UI.
Uno de los efectos más comunes es el de ocultar (hide) que permite personalizar el efecto.
En muchas ocasiones podrı́amos tener la necesidad de querer ocultar uno de los elementos de nuestra página,
permitiendo al usuario enfocarse únicamente en el contenido que le interesa o permitiendo que el elemento se oculte
temporalmente para luego aparecer de nuevo en la página.
La manera para lograr aplicar el efecto
5. Utilidades
Son un conjunto de herramientas que la librerı́a utiliza internamente. Reúne utilidades como el widget factory que
la base sobre el cual están construidos todos los widgets de jQuery y .
5.1. jQuery UI Theme Roller
Es una herramienta que permite modificar los estilos de todo el conjunto de componentes.
Para finalizar hemos visto como la librerı́a jQuery UI pone a nuestra disposición diversos tipos de widgets, efectos
y animaciones que al integrarlos en nuestras páginas permiten hacerlas más interactivas, procurando hacerlo de la
forma más ágil posible, claramente es una herramienta que no podemos dejar de considerar en la construcción
interfaces gráficas de usuario en la Web.
Referencias
Boduch, A. (2011). jQuery UI Themes Begginer’s Guide. Packt Publishing.

Boduch, A. (2013). jQuery UI Cookbook. Packt Publishing.
Boduch, J., Adam. Chaffer & Swedber, K. (2017). Learning jQuery 3. Packt Publishing.
Dayley, B. [Brad] & Dayley, B. [Brendan]. (2015). Sams Teach Yourself Angular JS, JavaScript and jQuery All in
One in 24 Hours. Sams.
De Jonge, A. & Dutson, P. (2012). jQuery, jQuery UI, and jQuery Mobile: Recipe and Examples. Addison-Wesley
Professional.
Joshi, V. (2015). Mastering jQuery UI. Packt Publishing.
Miles, T. (2016). jQuery Essentials. Packt Publishing.
Draggable Widget — jQuery UI API Documentation. (2017, 29 de septiembre). Recuperado desde http://api.
jqueryui.com/draggable/
jQuery UI. (2017, 29 de septiembre). Recuperado desde https://jqueryui.com/
Sarrion, E. (2012). jQuery UI. O’Reilly Media, Inc.
Saywer, D. (2014). JavaScript and jQuery: The Missing Manual. O’Reilly Media, Inc.
Vantoll, T. (2014). jQuery UI in Action. Manning Publications.
Wellens, P. (2015). Practical Web Development. Packt Publishing.
INFORMACIÓN TÉCNICA
Módulo: Desarrollo de Front-End

Unidad 3: Librerı́as jQuery y jQuery UI
Escenario 6: Librerı́a jQuery UI
Autor: Diego Satoba
Asesor Pedagógico: Ingrid Ospina Posada

Diseñador Gráfico: Catalina López
Asistente: Angie Laiton
Este material pertenece al Politécnico Grancolombiano.

Por ende, es de uso exclusivo de las Instituciones
adscritas a la Red Ilumno. Prohibida su reproducción
total o parcial.

Lectura Fundamental 6 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lectura Fundamental 6 PDF

Cargado por

Copyright:

Formatos disponibles

Unidad 3 / Escenario 6

1 ¿Qué es jQuery UI? 1

1. ¿Qué es jQuery UI?

jQuery UI está conformada por cuatro componentes principales.

Código 1: Inclusión de la librerı́a jQuery en una página HTML.

Accordion Autocomplete Button Checkboxradio

Cuadro 1: Lista de widgets de jQuery UI.

Figura 1: Ejemplo de ventana de diálogo personalizada.

Código 2: Código JavaScript para mostrar una ventana de diálogo.

eventos, pueden ser especificadas allı́, entre otras opciones más.

$("<div>Are you sure?</div>"){

El widget dialog presenta un conjunto de métodos útiles tales como:

• destroy: remueve la funcionalidad de la ventana de diálogo completamente.

beforeClose close create drag

Cuadro 2: Lista de eventos soportados por el widget dialog.

En el cuadro 3 se listan las interacciones proporcionadas por jQuery UI.

Draggable Droppable Resizable

Cuadro 3: Lista de interacciones de jQuery UI.

<div id="mybox" >Hello World!</div>

Código 3: Ejemplo interacción draggable.

Código 4: Aplicación de la interacción draggable con opciones.

En la figura 3 se puede observar un ejemplo de la aplicación de esta interacción.

Otros efectos son:

Add Class Color Animation Easing Effect

Cuadro 4: Lista de efectos de jQuery UI.

La manera para lograr aplicar el efecto

5.1. jQuery UI Theme Roller

Boduch, A. (2011). jQuery UI Themes Begginer’s Guide. Packt Publishing.

Módulo: Desarrollo de Front-End

Autor: Diego Satoba

Asesor Pedagógico: Ingrid Ospina Posada

Este material pertenece al Politécnico Grancolombiano.

También podría gustarte