JQuery UI Widgets

Integracin de Componentes Software en Pginas Web
Cristbal Fernndez Guerra 1 21.- jQuery UI

21.- JQUERY UI WIDGETS
21.1.- Configurando jQuery UI

22.2.- El Widget button (botn)

22.3.- El Widget progressbar (barra de progreso)

22.4.- El Widget slider (deslizador)

22.5.- El Widget autocomplete (auto-completar)

22.6.- El Widget accordion (acordeon)

22.7.- El Widget tabs (pestaas)

22.8.- El Widget dialog (cuadro de dialogo)

22.9.- El Widget spinner (cuadro numrico)

22.10.- El Widget datepicker (cuadro fechas)

22.11.- El Widget tooltip (pistas)

22.12.- El Widget menu

21.1.- Configurando jQuery UI

Lo primero que debemos tener es que jQuery UI es como una extensin de jQuery agregndole
nuevas posibilidades y como jQuery su uso es gratuito, lo que es muy apreciable.
Lo primero que debemos hacer es ir a la pgina oficial de jQuery:

En la esquina superior izquierda tenemos el enlace para dirigirnos a dicha rea de la pgina de
jQuery donde encontramos el jQuery UI (User Interface) interfaz de usuario.
Existen una serie de temas a elegir totalmente personalizados y que podemos ver si pulsamos sobre
el enlace themes que encontraremos en la barra de navegacin. Pulsamos y:

Una vez en esta pgina podemos ver a la izquierda el ThemeRoller que nos permite una visin de
todos los temas disponibles. Para poder verlos en detalle pulsamos sobre la pestaa Gallery donde
se nos presentan los temas de esta manera:

Como podemos ver esta el widget datepicker (elegir fechas) con su representacin en cada tema y
el nombre del tema en su parte inferior. Si deseamos ver el resto de elementos solo debemos hacer
un click sobre el datepicker que nos guste y veremos como el resto de elementos de la pgina
cambia su aspecto, para que veamos como quedaran el resto de los widgets.
Hago click sobre el datepicker del tema Start y veo el resultado:

Podemos hacer un click sobre cada uno de los temas y a la derecha veremos el resultado.
Una vez que elegimos un tema determinado hacemos click sobre su botn Download que aparece
debajo del nombre del tema y nos lleva a la pgina de personalizacin:

Aqui podemos elegir los elementos a incluir en nuestro tema, divididos en 4 grandes temas:
Ncleo UI

Interacciones

Widgets

Efectos
Nosotros vamos a dejarlos todos, por que deseamos ver todos los elementos que podamos para ver
su funcionamiento. Pero si los vamos a usar para una pgina web, solo seleccionaramos los
elementos que incluyamos en dicha pgina a fin de adelgazar el tamao de los ficheros.

En la parte inferior de la pgina tenemos el botn para descargarnos el fichero con todos los
elementos necesarios para adjuntar todos los elementos a nuestras pginas.
Podemos descargarnos el nmero de temas que deseemos sin ningn problema, pero de momento
vamos a empezar con el que ms os guste para practicar.
Una vez descargado el fichero debemos descomprimirlo donde ms os guste y veremos su
contenido:

En esta ocasin debemos adjuntar varios ficheros no solo uno, ya que casi todos los efectos y
modificaciones de jQuery UI estn basados en CSS, por lo que debemos adjuntar tambin un
fichero CSS. Una vez descomprimidos abrimos la carpeta CSS:

Como podemos ver aparece el nombre del tema, start, que elegimos y abrimos dicha carpeta:

Como podemos observar por los tamaos aqu podemos elegir tranquilamente el fichero que no est
minimizado ya que solo ocupa 5KB ms que el comprimido. Copiamos dicho fichero y la carpeta
images con l. Estos dos elementos deben ir siempre en la misma carpeta que ser la carpeta css de
nuestra pgina web.
Voy crear una carpeta donde crearemos nuestra pgina web con el nombre de pruebas y dentro
creare la carpeta css, quedando as la estructura:

Una vez creada la estructura pegamos dentro de la carpeta css el fichero con el CSS y la carpeta
images que debe ir con l.


Una vez copiados dichos ficheros vamos ahora a por el resto de ficheros que corresponden a las
libreras de JavaScript.
Volvemos a la carpeta del tema y entramos ahora en la carpeta js:

Dentro de dicha carpeta tenemos estos ficheros:

Copiamos el fichero comprimido, que es el que lleva el min al final, jquery-ui-1.10.4.custom.min,
ya que aqu la diferencia de tamao si es muy apreciable.
Volvemos a nuestra carpeta de pruebas y creamos la carpeta cdigo:

Tambin debemos pegar dentro la ltima versin de nuestra librera jQuery que hemos venido
utilizando hasta ahora, de modo que tengamos los siguientes ficheros:

Ya tenemos los elementos necesarios para usar el jQuery UI en nuestras pginas.
Ahora voy a crear una pgina web muy simple para probar que esto funciona:

<!doctype html>
<html lang='es'>
<head>
<meta charset='utf-8'>
<title>jQuery User Interface</title>
<link rel='stylesheet' href='css/jquery-ui-1.10.4.custom.css'>
<link rel='stylesheet' href='css/estilos.css'>
</head>
<body>
<a href='http://www.google.es'>Google</a>
<script src='codigo/jquery-2.1.0.min.js'></script>
<script src='codigo/jquery-ui-1.10.4.custom.min.js'></script>
<script src='codigo/codigo.js'></script>
</body>
</html>

El contenido de la pgina es solo un enlace de texto a la pgina de Google. Veamos el resultado al
cargar la pgina en el navegador:

Ahora voy a crear nuestro cdigo de jQuery para comprobar que todo funciona perfectamente:
$(document).ready(function(){
$('a').button();
});

La funcin button() es nueva y es la que se encarga de convertir todos los enlaces de nuestra pgina
en botones de jQuery UI. Guardamos el fichero como cdigo.js y actualizamos la pgina:

Funciona perfectamente lo cual indica que ya podemos usar la librera UI.
22.2.- El Widget button (botn)

Este es el primer widget que vamos a ver, como podemos ver es muy simple, pero a la vez es muy
espectacular, comparado con los botones estndar de HTML.
Podemos transformar muchos elementos de nuestras pginas a este widget, pero lo normal es usarlo
con los enlaces y botones de formulario o elementos <button>.
Veamos otro ejemplo en nuestra pgina:
<head>
</head>
<body>
<a href='http://www.google.es'>Google</a>
<form>
<p><input type='submit' id='enviar' value='Enviar Datos'>
<input type='reset' id='borrar' value='Borrar Datos'></p>
</form>
</body></html>

Al cargar la pgina tenemos:

Ahora con jQuery:
$('a, #enviar, #borrar').button();
});

Al cargar de nuevo la pgina obtenemos:

Como podemos ver he convertido todos los elementos que le hemos indicado en un botn y lo he
usado para los elementos de la pgina que tienen un papel en la pgina, no en un prrafo que solo
muestra informacin y que aunque le pulsemos no deseamos que haga nada.
Existe otra forma de uso de los botones mediante el mtodo buttonset() que podemos usar por
ejemplo con los botones de radio y cuya estructura sera:
<body>
<h1>Formulario de Inscripcin</h1>
<form>
<h2>Que categora desea</h2>
<div id='botones'>
<input type='radio' id='joven' name='t' value='3'><label for='joven'>Juvenil</label>
<input type='radio' id='adulto' name='t' value='5' checked><label for='adulto'>Adulto</label>
<input type='radio' id='jubilado' name='t' value='10'><label for='jubilado'>Jubilado</label>
</div>
<p><input type='submit' id='enviar' value='Enviar Datos'>
<input type='reset' id='borrar' value='Borrar Datos'></p>
</form>
</body>

Ahora vamos a modificar un poco el cdigo de jQuery, pero debis tener en cuenta que en esta
ocasin no estamos actuando sobre un solo botn sin que estamos actuando sobre el grupo, por lo
que capturamos el id del div donde he alojado los botones, que se llama botones:
$('#botones').buttonset();
$('#enviar, #borrar').button();
});

Al actualizar la pgina tenemos:

El elemento que esta elegido permanece en otro color hasta que cambiemos la eleccin. Esto es
debido a que son botones de radio. Si hubisemos elegido otro tipo de botones, se hubiesen quedado
todos del mismo color. Veamos un ejemplo con los dos botones de Enviar y Borrar Datos:
<form>
<h2>Que categora desea</h2>

<div id='botones'>
<input type='radio' id='joven' name='t' value='3'><label for='joven'>Juvenil</label>
<input type='radio' id='adulto' name='t' value='5' checked><label for='adulto'>Adulto</label>
<input type='radio' id='jubilado' name='t' value='10'><label for='jubilado'>Jubilado</label>
</div>

<div id='botones2'>
<input type='submit' id='enviar' value='Enviar Datos'>
<input type='reset' id='borrar' value='Borrar Datos'>
</div>

</form>

Ahora cambiamos el cdigo jQuery de esta manera:
$('#botones, #botones2').buttonset();
});

Al cargar ahora la pgina:

Con los elementos del tipo checkbox nos ocurre lo mismo, pero podemos tener pulsados varios, es
decir no se quedara solo uno pulsado, sino que todos los que pulsemos estarn elegidos.
Si por ejemplo en alguno de los enlaces usamos una imagen como enlace, como en este caso:
<body>
<a href='http://www.gmail.com'><img src='imagenes/mail.png'></a>

</body>

Al convertirlo en un botn nos preserva la imagen:

Debemos tener mucho cuidado de incluir las etiquetas label de HTML ya que de lo contrario
podemos tener problemas con los botones.

22.3.- El Widget progressbar (barra de progreso)

jQuery UI nos facilita tambin una barra de progreso que podemos ir modificando su valor por
ejemplo a la hora de ir rellenando un formulario para mostrar al usuario que le queda por terminar.
No es bueno que esta barra vuelva a comenzar de cero al hacer algo, ya que estaramos despistando
al usuario sobre el tiempo que le queda para terminar de rellenar algo y corremos el riesgo de que se
vaya de nuestra pgina. Veamos cmo crear este elemento:
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<div id='barra'></div>
</body>
</html>

Se trata simplemente de crear un bloque vacio mediante la etiqueta <div> y ahora en jQuery:
$('#barra').progressbar({
value: 40
});
});

Como podemos ver le he asignado un valor al crear la barra, por lo que ahora al cargar la pgina:

Los valores por defecto son del 0 al 100, que se supone que la tarea estara terminada. Lo normal es
comenzar de cero, no de 40 como he indicado yo. Esa manera de configurar las propiedades de
estos objetos se conoce como un objeto mapa, tipo objeto que creamos en JavaScript.
Si configuramos dicha propiedad value (valor) a false creamos una barra de progreso
indeterminada. Veamos un ejemplo:
value: false
});
});

Ahora al actualizar la pgina tendremos una animacin:

Podemos ir actualizando los valores de la barra cada vez que abandonamos un campo de formulario,
por ejemplo y volviendo a la barra anterior cambiaremos un poco la pgina:
<body>
<div id='barra'></div>
<p>
<label for='nombre'>Introduzca su nombre</label>
<input type='text' id='nombre' name='nombre' size=50 maxlength=48></p>
<label for='email'>Introduzca su email</label>
<input type='text' id='email' name='email' size=50 maxlength=48></p>
<input type='submit' value='Enviar Datos' id='boton'>

</body>

He insertado dos campos de formulario para que al rellenarlos la barra se actualice. El cdigo
jQuery podra ser:
$('#boton').button();
value: 0
});
$('#nombre').blur(function(){
$('#barra').progressbar('value', 50);
});
$('#email').blur(function(){
$('#barra').progressbar('value', 100);
});
});

De esta manera cada vez que abandone uno de los campos, evento blur, la barra se ir actualizando.
En este ejemplo no estoy comprobando si se rellena o no el campo.
Al cargar la pgina tenemos:

Al terminar de completar o al iniciar podamos usar la animacin con la propiedad value
establecida a false, porque yo no le veo utilidad a tener una especie de gif animado en la pgina.

22.4.- El Widget slider (deslizador)

Se crea tambin a partir de un elemento <div> vaco de la siguiente manera:
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<div id='deslizador'></div>
</body>
</html>

El cdigo en jQuery sera:
$('#deslizador').slider({
value: 50
});
});

Como podemos ver es muy parecido a la barra de progreso con la diferencia de que aqu podemos
modificar el valor del deslizador mediante la accin del usuario sobre l.
Al cargar la pgina veremos el resultado:

Este sera el resultado y como en la barra de progreso los valores preestablecidos son un mnimo de
cero y un mximo de 100 que podemos modificar mediante un objeto mapa de la siguiente manera.
Imaginad que lo usamos para cambiar el rojo del fondo y debe tener un valor de 0 a 255:
Si deseamos ver el valor que tiene al modificar los valores debemos crear un hueco donde escribir
dicho valor. Por ejemplo modificare la pgina web de la siguiente manera:
<body>
<p>Valor: <span id='valor'></span></p>
</body>

Estos elementos responden a una serie de eventos, uno de ellos es create (crear) que se dispara al
crear el objeto y otro slide (deslizar) que se dispara al mover el deslizador. Creamos una funcin
para mostrar el valor cuando se produzca uno de esos eventos. El cdigo podra ser:
value: 0,
min: 0,
max: 255,
create: mostrarValor,
slide: mostrarValor
});

function mostrarValor(){
$('#valor').text($('#deslizador').slider('value'));
}
});

Veamos ahora que sucede al cargar la pgina:

Al mover la barra deslizadora cambiara el valor del <span id='valor'>:

Podemos hasta usar un deslizador doble en la misma barra que podramos usar por ejemplo para
mostrar valores mnimos y mximos por ejemplo de un valor en bolsa o de la diferencia de precio
de viviendas antes y despus de la crisis, etc. Veamos cmo sera la creacin:
values: [0,255],
range: true,
min: 0,
max: 255,
slide: mostrarValor
});

$('#valor').text($('#deslizador').slider('value'));
}
});

En vez de usar la propiedad value (valor) usamos values (valores) que consiste en un array con dos
valores. Tambin debemos activar la propiedad range (rango) que indica que es un multideslizador.
Al cargar la pgina sera:

Ahora si queremos ver los dos valores de los extremos deberamos crear dos huecos para rellenar
los valores, esto cambiaria la pgina web as:
<body>
<h3>Valor Mnimo: <span id='minimo'></span></h3>
<h3>Valor Mximo: <span id='maximo'></span></h3>
</body>

Ahora debemos cambiar la funcin anterior de mostrarValor() para que muestre ambos valores:
values: [0,255],
range: true,
min: 0,
max: 255,
slide: mostrarValor
});

$('#minimo').text($('#deslizador').slider('values',0));
$('#maximo').text($('#deslizador').slider('values',1));
}
});

As al cargar la pgina y cambiar los valores:

22.5.- El Widget autocomplete (auto-completar)

Este es un elemento muy vlido para los formularios y que algunos navegadores estn ya
implementando con el nombre de datalist, pero no s cuantos lo tienen disponible ya.
Para crear este tipo de elementos necesitamos una lista de posibles respuestas que podemos
suministrar mediante un array que contenga dichos valores. Esa es la manera ms fcil de hacerlo:
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<label for='moto'>Elige tu fabricante de motos<input id='seleccion'>
</body>
</html>

Que al cargar la pgina nos muestra este resultado:

Ahora vamos a crear el elemento autocomplete de esta manera:
var motos = ['Aprilia', 'BMW', 'Ducati', 'Harley', 'Honda', 'Kawasaki', 'Suzuki', 'Yamaha']
$('#seleccion').autocomplete({
source: motos
});
});

Veamos ahora al cargar la pgina y escribir una letra dentro del <input>:

Naturalmente este tipo de elementos no validan los datos, es decir, si el fabricante no est en la lista
puede escribir en el cuadro el nombre que desee, ya que no he escrito todos los fabricantes del
mundo.
Podemos usar tambin como origen del elemento un array de objetos de manera que nos muestre
una cosa (label), pero luego el valor de ese elemento elegido sea una propiedad value diferente a la
etiqueta. Podra ser:
var motos = [{ label:'Aprilia - Italia', value: 'Aprilia'},
{ label:'BMW - Alemania', value: 'BMW'},
{ label: 'Ducati - Italia', value: 'Ducati'},
{ label: 'Harley - USA', value: 'Harley'},
{ label: 'Honda - Japn', value: 'Honda'},
{ label: 'Kawasaki - Japn', value: 'Kawasaki'},
{ label: 'Suzuki - Japn',value: 'Suzuki'},
{ label: 'Yamaha - Japn', value: 'Yamaha'}]

$('#seleccion').autocomplete({
source: motos
});
});

Como podemos ver es un poco ms complicada la estructura ya que debemos escribir las
propiedades de cada objeto y su valor.
Al cargar la pgina nos muestra el siguiente resultado:


Pero al elegir el modelo deseado:

Deja solo la propiedad value de dicho objeto, que especificamos dentro de nuestro array de objetos.

22.6.- El Widget accordion (acordeon)

Este es uno de los elementos ms usados cuando tenemos mucha informacin en nuestra pgina
web y deseamos un elemento que nos permita separar los contenidos de la pgina en diferentes
secciones, dejndonos solo ver una de las secciones y pudiendo ver las dems con un simple click,
de modo que al elegir otra seccin se cierra la anterior automticamente.
Veamos la manera de crear este elemento:
<body>
<div id='acordeon'>
<h2><a href='#'>Yamaha R1</a></h2>
<div><img src='imagenes/r1.jpg'></div>

<h2><a href='#'>Honda CBR 1000 RR</a></h2>
<div><img src='imagenes/cbr.jpg'></div>

<h2><a href='#'>Suzuki GSXR 1000</a></h2>
<div><img src='imagenes/gsxr.jpg'></div>
</div>
</body>
</html>

Esto al abrir la pgina sera:

Sera una moto debajo de otra, pero al haber demasiadas imgenes o texto, nos hacer tener que
movernos a lo largo de la pgina arriba y abajo para ver toda la informacin.
Veamos ahora como creamos el elemento accordion con jQuery:
$('#acordeon').accordion();
});

Como podemos ver, ha sido muy complicado pero a ver si ha merecido la pena al guardar los
cambios y abrir de nuevo la pgina:

Al pulsar ahora sobre alguno de las otras cabeceras repliega la ficha de la Yamaha y nos mostrara
la ficha sobre la que hayamos pulsado:

Yo creo que el resultado es bastante espectacular.
En este tipo de elementos es muy importante la altura de las fichas de cada elemento, ya que se
configura a la altura del elemento ms grande siempre.
Podemos cambiar ese comportamiento as:
$('#acordeon').accordion({
heightStyle: 'content',
active: 1,
event: 'mouseover',
collapsible: true
});
});

En este cdigo hemos cambiado el evento del click, evento por defecto para cambiar el contenido
de las fichas por el mouseover.
Tambin hemos asignado la ficha 1, recordad que contamos desde cero, en la propiedad active.
Por ltimo tambin hemos cambiado la altura de las fichas para que dependa del contenido de cada
una de las fichas.
Tambin existe la propiedad llamada collapsible que si la establecemos a true nos permite cerrar
todas las fichas.
Al abrir ahora la pgina:

Al establecer el evento mouseover el usuario puede volverse un poco perdido, creo que es mejor
dejar el evento click que viene por defecto, pero aqu que cada uno haga lo que crea conveniente.

22.7.- El Widget tabs (pestaas)

Este elemento es muy parecido al del accordion, pero con la gran diferencia de que este tipo de
mens se crea en forma de pestaas, algo parecido a como lo hacen los navegadores con las
pestaas.
Es un elemento muy til cuando existen grandes cantidades de informacin dentro de la pgina y
queremos dividir dicha informacin de la manera que nos sea propicia.
La pgina web sera algo parecido a esto:
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<div id='menu'>
<ul>
<li><a href='#menu1'>Menu 1</a>
</ul>
<div id='menu1'><img src='imagenes/r1.png'></div>
<div id='menu2'><img src='imagenes/cbr.png'></div>
<div id='menu3'><img src='imagenes/gsxr.png'></div>
<div id='menu4'>Aqui hay un listado de los fabricantes</div>
</div>
</body>
</html>

Como podemos ver en este caso, apreciamos que existen una serie de enlaces que en vez de saltar a
otra pgina web, saltan a diferentes marcas dentro de la misma pgina.
Al abrir esta pgina sera:

El contenido del cdigo de jQuery para aplicar el elemento tabs sera:
$('#menu').tabs();
});

Ahora al guardar este cdigo y actualizar la pgina podemos ver el cambio sustancial:

Como hemos podido ver en el cdigo HTML necesitamos un contenedor que captura todo el
contenido de la pgina, en nuestro caso tiene el id men.
Una vez dentro del contenedor hemos creado una lista de elementos con los enlaces a donde
saltaran dentro de la misma pgina, como podemos ver, esos nombres coinciden con los nombres
de los sub-contenedores donde alojaremos el contenido de cada uno de los apartados.
De la misma manera que vimos con el elemento accordion podemos especificar la pestaa que
estar activa al abrir la pgina y que igual que antes se configura con la propiedad active.
Tambin existe la propiedad heightStyle que nos permite especificar la altura de los contenedores
de las pestaas, con el atributo content establecemos que las fichas se adapten al contenido.
Podemos tambin igual que antes cambiar el evento que abre cada pestaa con la propiedad event.
La propiedad disable es comn a todos los elementos que creemos con jQuery UI, aqu la
podramos utilizar para deshabilitar alguna de las pestaas de la siguiente manera:
$('#menu').tabs('disable',1);

Esta sentencia deshabilitara la segunda pestaa, ya que empezamos a contar desde cero:

Por ltimo tenemos los eventos principales a los que responde el elemento tabs que seran:
create: cuando es creado en la pgina web.

beforeactivate: antes de que el panel al que pulsemos sea mostrado.

actvate: despus de que el panel haya sido mostrado.

22.8.- El Widget dialog (cuadro de dialogo)

Este elemento es un cuadro flotante con un ttulo y un rea de contenido que podemos personalizar,
similar a los cuadros de dialogo de JavaScript, pero ms vistosos y configurables.
Veamos su estructura bsica con un ejemplo muy simple:
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<div id='cuadro' title='Ttulo cuadro'>
<p>Este es el mensaje que podemos insertar dentro de nuestro cuadro de dialogo</p>
</div>
</body>
</html>

Para aplicar el elemento al contenedor <div> con el id cuadro con jQuery sera:
$('#cuadro').dialog();
});

Ahora al cargar la pgina tendramos el siguiente resultado:

Como podemos ver el mismo se centra en la ventana del navegador. El problema est en que el
cuadro de dialogo aparece nada ms crearlo. Para evitar este comportamiento debemos establecer la
propiedad autoOpen a false de la siguiente manera:
$('#cuadro').dialog({
autoOpen: false
});
});

Ahora al cargar la pgina podemos ver que no aparece el cuadro de dialogo. Para abrir el cuadro de
dialogo creado deberamos adjuntarlo a algn evento de la pgina. En mi caso creare un botn
simplemente para que al hacer un click sobre el muestre el cuadro de dialogo. Aado este cdigo a
la pgina web:
<div id='cuadro' title='Ttulo cuadro'>
<p>Este es el mensaje que podemos insertar dentro de nuestro cuadro de dialogo</p>
</div>
<button id='boton'>Cuadro de Dialogo</button>

Cambio un poco tambin el cdigo jQuery para que responda al click del botn:
autoOpen: false
});
$('#boton').click(function(){
$('#cuadro').dialog('open');
});
});

Al abrir ahora la pgina deberamos ver solo el botn:

Pero ahora al pulsar el botn:

A pesar de ser un simple cuadro de dialogo es de los elementos que tienen ms propiedades, las ms
importantes son:
appendTo: especifica el elemento donde aparecer el cuadro de dialogo.

autoOpen: evita que se abra nada ms crearlo.

buttons: especifica el juego de botones a mostrar, por defecto no muestra ninguno.

closeOnEscape: al pulsar la tecla Esc cierra la ventana. Por defecto es true.

draggable: permite mover el cuadro de dialogo. Por defecto es true.

height: permite especificar la altura del cuadro en pixels. Por defecto es auto (automtico).

minHeight: permite especificar la altura mnima del cuadro en pixels.

maxHeight: permite especificar la altura mxima del cuadro en pixels.

width: permite especificar la anchura del cuadro en pixels. Por defecto es auto.

minWidth: permite especificar la anchura mnima del cuadro en pixels.

maxWidth: permite especificar la anchura mxima del cuadro en pixels.

modal: si le asignamos el valor true no podemos interactuar con la pgina web, como los
alert. Por defecto es false. Este es una de las propiedades a cambiar de inicio.

position: especifica la posicin inicial del cuadro de dialogo.

resizable: permite redimensionar el cuadro de dialogo. Por defecto es true.

title: especifica el titulo del cuadro de dialogo. As podemos cambiar el titulo inicial
dependiendo de algo concreto.
Como podemos ver el nmero de propiedades es amplio, vamos a ir cambiando algunas cosas:
autoOpen: false,
title: 'Titulo Nuevo',
resizable: false,
modal: true
});
$('#boton').click(function(){
$('#cuadro').dialog('open');
});
});

La siguiente propiedad, resizable, es la que nos permitira redimensionar el cuadro de dialogo. Al
ser asignado el valor false ya no se puede redimensionar.
La propiedad modal no nos permite seguir trabajando en la pgina web hasta que hayamos cerrado
el cuadro de dialogo.
La propiedad collapsible no permite que la ventana salga de la ventana del navegador ni que sea
cortada.
Al guardar los cambios y pulsar el botn debe haber cambiado el ttulo y no deberamos poder
trabajar con el resto de la pgina hasta que no cerremos el cuadro de dialogo:

Para crear un cuadro de dialogo prompt introduciramos un campo de formulario dentro del cuadro
de dialogo. Adems le aadir botones de Ok y Cancelar, que tendr esta apariencia:

El cdigo del HTML podra ser el siguiente:
<div id='salida' title='Respuesta'>
<p>Tu nombre es <span id='valor'></span></p>
</div>
<div id='entrada' title='Peticin de Datos'>
<p>Introduce tu nombre:<br>
<input id='nombre' size=25 maxlength=24></p>
</div>
<button id='botonEntrada'>Pedir Datos</button>
<button id='botonSalida'>Mostrar Datos</button>

Esto complica un poco el cdigo ya que debemos crear un array con los botones que deseemos que
aparezcan y posteriormente lo que hara cada uno de los botones al ser clickeado.
$('#entrada').dialog({
autoOpen: false,
resizable: false,
modal: true,
collapsible:true,
buttons:[{text: 'Ok',
click: function(e){
$('#entrada').dialog('close');
}},
{text: 'Cancelar',
click: function(e){
}}]
});

Voy a intentar explicar un poco todo este cdigo de los botones ya que el resto de las propiedades
las hemos usado en los ejemplos anteriores.
Para los botones cre un array de objetos y dentro de l, cada objeto sera un botn.
click: function(e){
}},
{text: 'Cancelar',
click: function(e){
}}
]

En este caso he creado el botn con el texto Ok dentro de buttons y le asigno el evento click para
que al pulsar dicho botn cierre el cuadro de dialogo.
El botn Cancelar sera la misma estructura, pero cambiando el texto.
Recordad que podemos cerrar el cuadro de dialogo tambin pulsando la tecla Esc o pulsando sobre
el botn cerrar de la esquina superior derecha.
Veamos ahora el otro cuadro de dialogo que mostrara los datos introducidos:
$('#salida').dialog({
autoOpen: false,
resizable: false,
modal: true,
collapsible: true
});

Es mucho ms simple como podemos apreciar. A continuacin veamos que haran los botones de
Pedir Datos y Mostrar Datos al ser pulsados:
$('#botonEntrada').button();
$('#botonEntrada').click(function(){
bandera = false;
$('#nombre').val('Annimo');
$('#entrada').dialog('open');
});

$('#botonSalida').button();
$('#botonSalida').click(function(){
$('#valor').text($('#nombre').val());
$('#salida').dialog('open');
});
Veamos ahora el resultado de este desaguisado al cargar la pgina:

Ahora pulsamos el botn Pedir Datos y nos mostrara el cuadro de dialogo con el id entrada:

Pulsamos el botn Ok:

Al pulsar sobre el botn Mostrar Datos:

El problema es que mostrara esta informacin, pulsemos el botn Cancelar o el resto de los
posibles cierres del cuadro de dialogo. Una posible solucin sera un flag o variable de estado:
var bandera;
$('#entrada').dialog({
autoOpen: false,
resizable: false,
modal: true,
collapsible:true,
click: function(e){
bandera = true;
}},
{text: 'Cancelar',
click: function(e){
}}]
}); // final cuadro entrada
$('#salida').dialog({
autoOpen: false,
resizable: false,
modal: true,
collapsible: true
}); // final cuadro salida
$('#botonEntrada').button();
$('#botonEntrada').click(function(){
bandera = false;
$('#nombre').val('');
$('#entrada').dialog('open');
}); // final botonEntrada
$('#botonSalida').button();
$('#botonSalida').click(function(){
if (bandera == true){
$('#valor').text($('#nombre').val());
} else {
$('#valor').text('Annimo');
}
$('#salida').dialog('open');
});// final botnSalida
});

Ahora solo usara el contenido del campo de texto del formulario en el caso en que hayamos pulsado
el botn Ok. En los dems casos he establecido el valor Annimo para mostrar.

Esta vez pulsamos el botn Cancelar y al pulsar despus el botn Mostrar Datos:

22.9.- El Widget spinner (cuadro numrico)

Este widget est diseado para la introduccin de valores numricos que ya est presente en algunas
versiones de los principales navegadores como Chrome con el type number. De esta manera si al
crear el campo de formulario le asignamos el type number podemos encontrarnos con navegadores
que muestren 2 juegos de flechas a la derecha del elemento.
La pgina podra ser:
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<p><label for='valor'><strong>Introduce las Unidades que deseas:</strong></label>
<input id='valor' value=0 min=0 max=100>
</body>
</html>

El cdigo en JQuery para aplicar este mtodo sera:
$('#valor').spinner();
});

El resultado al cargar la pgina sera:

Con las flechas del extremo derecho del elemento podemos aumentar o disminuir el valor del
campo de formulario que existe debajo del decorado suministrado pos la librera de jQuery UI.
Como todos los elementos tiene una serie de propiedades que podemos modificar y que aqu
mostrare las ms importantes:
min: el nmero mnimo permitido.

max: el nmero mximo permitido.

step: la cantidad en que aumentara o disminuir al pulsar las flechas.

icons: para cambiar los iconos de las flechas.
Vamos a hacer algunos cambios:
$('#valor').spinner({
min: 0,
max: 100,
step: 5,
icons: {
up: 'ui-icon-circle-plus',
down: 'ui-icon-circle-minus'
}
});
});

Veamos como cambiara el aspecto:

Algunos de los eventos a los que podemos responder seran:
create: al aplicar el elemento spinner a la pgina web.

change: cuando el valor es incrementado o decrementado y el elemento pierde el foco.
En este tipo de elemento el usuario puede escribir el valor que desee incluyendo valores no
numricos que podramos rectificar con el evento change.
Veamos un ejemplo:

$('#valor').spinner({
min: 0,
max: 100,
step: 5,
icons: {
up: 'ui-icon-circle-plus',
down: 'ui-icon-circle-minus'
},
change: comprobarValor
});

function comprobarValor(){
var cantidad = $('#valor').val();
if(isNaN(cantidad) || cantidad < 0 || cantidad > 100){
$('#valor').spinner('value',0);
};
};
});

Veamos ahora la prueba del algodn, guardamos el cdigo y actualizamos la pgina:

Al perder el foco, cosa que sucede al cambiar a otro campo de formulario o pulsando la tecla TAB:

Funciona perfectamente.

22.10.- El Widget datepicker (cuadro fechas)

Este elemento simula un calendario para elegir fechas y adems facilita de esa manera el problema
con el gran nmero de formatos disponibles como pudimos ver al estudiar el objeto Date.
Este es otro de los controles que es muy utilizado, por su esttica y su facilidad de uso.
Veamos cmo crear un control datepicker:
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<label for='fecha'>Indica la fecha de matriculacin del vehiculo</label>
<input id='fecha'>
</body>
</html>

El cdigo jQuery sera:
$('#fecha').datepicker();
});

Al cargar la pgina y colocar el cursor sobre el campo de formulario obtenemos este resultado:

Existe otra manera que no oculta el campo del formulario y que se mostrara siempre en la pgina.
Se suele usar cuando es muy importante el tema de la fecha. Sera as:
<body>
<div id='fecha'></div>
<h3>Elige tu fecha de Incorporacin</h3>
</body>

El cdigo de jQuery sera exactamente el mismo. Al cargar la pgina tenemos este resultado:

Al no pertenecer a un campo de formulario esta visible constantemente.
Este elemento tiene una serie de propiedades que podemos modificar y las ms importantes son:
altField: especifica un campo que ser rellenado para mostrar la fecha seleccionada.

defaultDate: especifica la fecha a mostrar cuando se muestre el elemento. Por defecto es el
da actual.
El ms usado es defaultDate que como hemos indicado cambia la fecha mostrada al mostrar el
elemento dentro de la pgina web. Si existe un atributo value en el campo esto se ignora.
Los posibles valores de la propiedad defaultDate seran:
null: usa la fecha actual. Es el valor por defecto.

Date object: es un objeto de tipo Date.

+days, -days: se usa para sumar o restar das a la fecha de hoy

-114y: restara 114 aos a la fecha actual
Veamos un ejemplo:
$('#fecha').datepicker({
defaultDate: '-114y'
});
});

Al guardar los cambios y cargar la pgina tenemos:

Como esperbamos ha restado 114 aos a la fecha actual y nos muestra el ao 1900.
Ahora vamos a especificar un campo de texto donde colocaremos la fecha al seleccionarla del
elemento datepicker, para ello hago un pequeo cambio en nuestra pgina web:

Por ltimo podemos hacer una especie de traduccin para este tipo de elemento, pero necesitamos
un fichero de con los formatos locales, que podemos conseguir en esta pgina:

Solo debemos buscar en Google el nombre del fichero para poder descargarlo y adjuntarlo a la lista
de ficheros de jQuery de la siguiente manera:
<div id='fecha'></div>
<h3>Elige tu fecha de Incorporacin</h3>
<script src='codigo/jquery-ui-i18n.min.js'></script>

Luego cambiaremos en jQuery la siguiente lnea:
$.datepicker.setDefaults($.datepicker.regional['es']);
});

Al guardar los cambios y cargar la pgina:

Ya tenemos nuestro calendario en espaol.
Pero este elemento tiene una capacidad de cambio muy grande y muchas variaciones posibles. Para
ello volveremos a nuestro ejemplo inicial, que estaba dentro de un campo de formulario.
<!doctype html>
<html lang='es'>
<head>
</head>
<body>
<label for='fecha'>Fecha de Incorporacin</label>
<input id='fecha'>
<script src='codigo/jquery-ui-i18n.min.js'></script>
</body>
</html>

Una vez que hemos vuelto al inicio ya podemos ver las siguientes propiedades que podemos
modificar, que podran ser el valor mnimo (minDate) o mximo de la fecha (maxDate) a mostrar
en el calendario. Veamos estos cambios:
minDate: '-1y'
});
});

Otro de los puntos a tener en cuenta es la posibilidad de que si estamos trabajando con gente mayor
y les preguntamos por su fecha de nacimiento nos encontremos el problema de que tengan que
pulsar 1200 veces las flechas hasta llegar a su ao de nacimiento.
Para evitar este problema podemos aadir un men para viajar por los aos directamente que sera
changeYear, tambin est disponible changeMonth para los meses y lo nico que debemos hacer
para activarlos es asignarles el valor true:

minDate: '-100y',
changeYear: true
});
});

Al guardar los cambios y cargar la pgina ahora podemos cambiar los aos as:

De esta manera es ms fcil y rpido.
Podemos hasta indicarle el nmero de meses que deseamos mostrar. Por defecto es 1, que es el mes
que nos aparece, pero podramos indicarle un nmero mayor:
minDate: '-10y',
changeYear: true,
numberOfMonths: 2
});
});

Ahora al guardar y cargar la pgina obtenemos este resultado:

Podemos hasta aadirle un efecto de animacin para que no se muestre de golpe el calendario:
minDate: '-10y',
changeYear: true,
duration: 2000,
showAnim: 'fadeIn'
});
});

La propiedad duration especifica la duracin del efecto y showAnim el efecto a emplear. Recordad
que al adjuntar la librera jQuery UI el nmero de efectos que podemos usar en estas animaciones
ha aumentado muchsimo.
No pongo la imagen ya que la animacin no se ve muy bien, pero probad el cdigo en el ordenador
y veremos que el cambio es apreciable.

22.11.- El Widget tooltip (pistas)

Este elemento proporciona pequeas ventanas pop-up que son tiles para mostrar informacin
extra, por ejemplo al colocar el ratn sobre un campo del formulario donde podemos informar a los
usuarios de la informacin o el formato que deseamos, una imagen de un cuadro donde podramos
informar a los usuarios del nombre y autor del cuadro.
Veamos cmo crear el elemento tooltip:
<body>
<img src='imagenes/guernica.jpg' title='Guernica de Picasso'>
<p><label for='campo'>Precio:</label>
<input id='campo' title='Introduce solo los digitos'></p>
</body>
</html>

El cdigo jQuery sera:
$('[title]').tooltip();
});

Al cargar la pgina y colocar el ratn sobre la imagen tendremos este resultado:

Como podemos ver en la imagen el tooltip es el elemento de la esquina inferior izquierda.
Las propiedades ms importantes de este elemento son:
content: el contenido del tooltip que puede ser una cadena de HTML.

hide: especifica como el tooltip es animado al desaparecer.

show: especifica como el tooltip es animado al mostrarlo.

tooltipClass: especifica el tipo de tooltip

track: sigue al ratn en la posicin del tooltip si esta con el valor true.

position: especifica la posicin del tooltip
Vamos a cambiar algunas de las propiedades y la pgina para que podamos ver su funcionamiento.
La pgina sera:
<img src='imagenes/guernica.jpg' id='imagen' title='Guernica de Picasso'>
<p><label for='campo'>Precio:</label>
<input id='campo' title='Introduce solo los digitos'></p>
<div id='contenido'><h5>El Guernica de Pablo Picasso</h5></div>

Este ltimo contenedor <div id='contenido'> lo ocultare mediante CSS:
body{
text-align: center;
}

#contenido{
display: none;
}

El cdigo jQuery es:
$('#imagen').tooltip({
content: $('#contenido').html(),
track: true
});
$('input[title]').tooltip();
});

En el cdigo de arriba le hemos indicado que capture el contenido del tooltip del contenedor con el
id contenido, que a su vez hemos ocultado mediante CSS.
Tambin hemos asignado a la propiedad track el valor true, que especifica que el tooltip aparecer
donde este el ratn y le seguir como el cobrador del frac.
Solo hemos cambiado las propiedades del tooltip de la imagen, el del campo de formulario
permanece como estaba. Guardamos el cdigo y al cargar la pgina:

Con la propiedad tooltipClass podemos aadir clases al elemento para hacerlo ms personalizado.
Por ejemplo vamos a aadir esta clase borde a estilos.css:
*.borde{
border: 2px dotted red;
}

Ahora voy aadir esa clase al elemento del campo de formulario:
$('input[title]').tooltip({
tooltipClass: 'borde'
});
});

El otro elemento no lo he incluido por qu no ha sido modificado. Guardo el cdigo y el resultado al
colocar el ratn sobre el campo de formulario es:

Los mtodos en estos casos ms usados podran ser open, cuando se muestra el tooltip y close
cuando se cierra el tooltip. Podramos establecer un tiempo para que pasado ese tiempo
desapareciese dicho tooltip. Veamos un ejemplo:
$('#imagen').tooltip({
content: $('#contenido').html(),
track: true,
show:{
effect: 'fadeIn',
duration: 1000
}
});
$('#campo[title]').tooltip({
tooltipClass: 'borde',
open: function(e,ui){
setTimeout(function(){
$('#campo[title]').tooltip('close');
},2000);
}
});
});

22.12.- El Widget menu

Este elemento vendr muy bien a todas aquellas personas que no deseen volverse locos con CSS
para conseguir un buen men de elementos con el que poder dirigirse a las diferentes secciones o
pginas de su sitio web.
Los pasos para aplicar un elemento men seran en primer lugar crear una pgina web que contenga
una serie de listas anidadas como la siguiente pgina web:
<body>
<h1>Principales Portales de Bsqueda de Internet</h1>
<ul id='menu'>
<li><a>Nacionales</a>
<ul>
<li><a href='http://www.terra.es' target='_blank'>Terra</a></li>
<li><a href='http://www.ozu.es' target='_blank'>Ozu</a></li>
<li><a href='http://www.hispavista.com' target='_blank'>Hispavista</a></li>
</ul>
</li>
<li><a>Internacionales</a>
<ul>
<li><a href='http://www.google.es' target='_blank'>Google</a></li>
<li><a href='http://es.yahoo.com/' target='_blank'>Yahoo</a></li>
<li><a href='http://www.msn.com' target='_blank'>Msn</a></li>
</ul>
</li>
<li><a>Piratas</a>
<ul>
<li><a href='http://www.daleya.com' target='_blank'>DaleYa</a></li>
<li><a href='http://foofind.com/' target='_blank'>Foofind</a></li>
</ul>
</li>
</ul>
</body>
</html>

En este elemento es muy importante un factor a tener en cuenta y que debemos declarar en nuestra
hola de estilos y ser la anchura de los elementos del men:
body{
text-align: center;
}
.ui-menu{
width: 15%;
min-width: 200px;
}
#menu {
text-align: left;
}
.ui-menu ul {
width: 10%;
min-width: 100px;
}

Lo ms importante es la anchura (width) del .ui-menu (clase ui-menu), que he establecido en un
20% de la anchura de la pgina. La propiedad min-width es la anchura mnima que pueden llegar a
tener los elementos del men. Veamos ahora el cdigo de jQuery para aplicar el elemento men:
$('#menu').menu();
});

El resultado al cargar la pgina sera:

He usado los elementos <ul> y <li> porque son los habituales para mens pero el elemento men
funciona con cualquier estructura siempre y cuando haya una relacin de jerarqua clara.
Podemos usar iconos en nuestros mens mediante la propiedad icons (iconos), por ejemplo en los
submens, para lo cual primero los marcaramos con el nombre de la clase submen por ejemplo:
<ul id='menu'>
<li><a>Nacionales</a>
<ul class='submenu'>
<li><a href='http://www.terra.es' target='_blank'>Terra</a></li>
<li><a href='http://www.ozu.es' target='_blank'>Ozu</a></li>
<li><a href='http://www.hispavista.com' target='_blank'>Hispavista</a></li>
</ul>
</li>
<li><a>Internacionales</a>
<li><a href='http://www.google.es' target='_blank'>Google</a></li>
<li><a href='http://es.yahoo.com/' target='_blank'>Yahoo</a></li>
<li><a href='http://www.msn.com' target='_blank'>Msn</a></li>
</ul>
</li>
<li><a>Piratas</a>
<li><a href='http://www.daleya.com' target='_blank'>DaleYa</a></li>
<li><a href='http://foofind.com/' target='_blank'>Foofind</a></li>
</ul>
</li>
</ul>

Veamos un ejemplo aplicando iconos a esos submens:
$('#menu').menu({
icons: {submenu: 'ui-icon-star'}
});
});

El listado de iconos lo podemos encontrar en la lista donde descargamos la librera de jQuery UI:

Si colocamos el ratn sobre el icono nos dir su nombre para poder usarlos luego en nuestro men.
El resultado de colocar estos iconos sera:

JQuery UI Widgets

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

JQuery UI Widgets

Enviado por

Direitos autorais:

Formatos disponíveis

Integracin de Componentes Software en Pginas Web

Cristbal Fernndez Guerra 1 21.- jQuery UI

Você também pode gostar