21.- jquery ui widgets

54
Integración de Componentes Software en Páginas Web Cristóbal Fernández Guerra 1 21.- jQuery UI 21.- JQUERY UI WIDGETS 21.1.- Configurando jQuery UI 22.2.- El Widget button (botón) 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 (pestañas) 22.8.- El Widget dialog (cuadro de dialogo) 22.9.- El Widget spinner (cuadro numérico) 22.10.- El Widget datepicker (cuadro fechas) 22.11.- El Widget tooltip (pistas) 22.12.- El Widget menu

Upload: jlaso1982

Post on 26-Dec-2015

138 views

Category:

Documents


3 download

TRANSCRIPT

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 1 21.- jQuery UI

21.- JQUERY UI WIDGETS

21.1.- Configurando jQuery UI 22.2.- El Widget button (botón) 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 (pestañas) 22.8.- El Widget dialog (cuadro de dialogo) 22.9.- El Widget spinner (cuadro numérico) 22.10.- El Widget datepicker (cuadro fechas) 22.11.- El Widget tooltip (pistas) 22.12.- El Widget menu

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 2 21.- jQuery UI

21.1.- Configurando jQuery UI Lo primero que debemos tener es que jQuery UI es como una extensión de jQuery agregándole nuevas posibilidades y como jQuery su uso es gratuito, lo que es muy apreciable.

Lo primero que debemos hacer es ir a la página oficial de jQuery:

En la esquina superior izquierda tenemos el enlace para dirigirnos a dicha área de la página 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 navegación. Pulsamos y:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 3 21.- jQuery UI

Una vez en esta página podemos ver a la izquierda el ThemeRoller que nos permite una visión de todos los temas disponibles. Para poder verlos en detalle pulsamos sobre la pestaña Gallery donde se nos presentan los temas de esta manera:

Como podemos ver esta el widget datepicker (elegir fechas) con su representación 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 página cambia su aspecto, para que veamos como quedarían 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.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 4 21.- jQuery UI

Una vez que elegimos un tema determinado hacemos click sobre su botón Download que aparece debajo del nombre del tema y nos lleva a la página de personalización:

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

Núcleo 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 página web, solo seleccionaríamos los elementos que incluyamos en dicha página a fin de adelgazar el tamaño de los ficheros.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 5 21.- jQuery UI

En la parte inferior de la página tenemos el botón para descargarnos el fichero con todos los elementos necesarios para adjuntar todos los elementos a nuestras páginas.

Podemos descargarnos el número de temas que deseemos sin ningún problema, pero de momento vamos a empezar con el que más os guste para practicar.

Una vez descargado el fichero debemos descomprimirlo donde más os guste y veremos su contenido:

En esta ocasión debemos adjuntar varios ficheros no solo uno, ya que casi todos los efectos y modificaciones de jQuery UI están basados en CSS, por lo que debemos adjuntar también 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 tamaños aquí podemos elegir tranquilamente el fichero que no está minimizado ya que solo ocupa 5KB más 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 página web.

Voy crear una carpeta donde crearemos nuestra página 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.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 6 21.- jQuery UI

Una vez copiados dichos ficheros vamos ahora a por el resto de ficheros que corresponden a las librerías 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 tamaño si es muy apreciable.

Volvemos a nuestra carpeta de pruebas y creamos la carpeta código:

También debemos pegar dentro la última versión de nuestra librería 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 páginas.

Ahora voy a crear una página web muy simple para probar que esto funciona:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 7 21.- jQuery UI

<!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 página es solo un enlace de texto a la página de Google. Veamos el resultado al cargar la página en el navegador:

Ahora voy a crear nuestro código de jQuery para comprobar que todo funciona perfectamente:

$(document).ready(function(){

$('a').button();

});

La función button() es nueva y es la que se encarga de convertir todos los enlaces de nuestra página en botones de jQuery UI. Guardamos el fichero como código.js y actualizamos la página:

Funciona perfectamente lo cual indica que ya podemos usar la librería UI.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 8 21.- jQuery UI

22.2.- El Widget button (botón) 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 estándar de HTML.

Podemos transformar muchos elementos de nuestras páginas a este widget, pero lo normal es usarlo con los enlaces y botones de formulario o elementos <button>.

Veamos otro ejemplo en nuestra página:

<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>

<form>

<p><input type='submit' id='enviar' value='Enviar Datos'>

<input type='reset' id='borrar' value='Borrar Datos'></p>

</form>

<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>

Al cargar la página tenemos:

Ahora con jQuery:

$(document).ready(function(){

$('a, #enviar, #borrar').button();

});

Al cargar de nuevo la página obtenemos:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 9 21.- jQuery UI

Como podemos ver he convertido todos los elementos que le hemos indicado en un botón y lo he usado para los elementos de la página que tienen un papel en la página, no en un párrafo que solo muestra información y que aunque le pulsemos no deseamos que haga nada.

Existe otra forma de uso de los botones mediante el método buttonset() que podemos usar por ejemplo con los botones de radio y cuya estructura sería:

<body>

<h1>Formulario de Inscripción</h1>

<form>

<h2>Que categoría 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>

<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>

Ahora vamos a modificar un poco el código de jQuery, pero debéis tener en cuenta que en esta ocasión no estamos actuando sobre un solo botón sin que estamos actuando sobre el grupo, por lo que capturamos el id del div donde he alojado los botones, que se llama botones:

$(document).ready(function(){

$('#botones').buttonset();

$('#enviar, #borrar').button();

});

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 10 21.- jQuery UI

Al actualizar la página tenemos:

El elemento que esta elegido permanece en otro color hasta que cambiemos la elección. Esto es debido a que son botones de radio. Si hubiésemos 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 categoría 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 código jQuery de esta manera:

$(document).ready(function(){

$('#botones, #botones2').buttonset();

});

Al cargar ahora la página:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 11 21.- jQuery UI

Con los elementos del tipo checkbox nos ocurre lo mismo, pero podemos tener pulsados varios, es decir no se quedaría solo uno pulsado, sino que todos los que pulsemos estarán 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>

<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>

Al convertirlo en un botón 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.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 12 21.- jQuery UI

22.3.- El Widget progressbar (barra de progreso) jQuery UI nos facilita también 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 estaríamos despistando al usuario sobre el tiempo que le queda para terminar de rellenar algo y corremos el riesgo de que se vaya de nuestra página. Veamos cómo crear este elemento:

<!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>

<div id='barra'></div>

<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>

Se trata simplemente de crear un bloque vacio mediante la etiqueta <div> y ahora en jQuery:

$(document).ready(function(){

$('#barra').progressbar({

value: 40

});

});

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

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 13 21.- jQuery UI

Los valores por defecto son del 0 al 100, que se supone que la tarea estaría 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:

$(document).ready(function(){

$('#barra').progressbar({

value: false

});

});

Ahora al actualizar la página tendremos una animación:

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 página:

<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'>

<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>

He insertado dos campos de formulario para que al rellenarlos la barra se actualice. El código jQuery podría ser:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 14 21.- jQuery UI

$(document).ready(function(){

$('#boton').button();

$('#barra').progressbar({

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 página tenemos:

Al terminar de completar o al iniciar podíamos usar la animación con la propiedad value establecida a false, porque yo no le veo utilidad a tener una especie de gif animado en la página.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 15 21.- jQuery UI

22.4.- El Widget slider (deslizador) Se crea también a partir de un elemento <div> vacío de la siguiente manera:

<!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'>

</head>

<body>

<div id='deslizador'></div>

<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 código en jQuery sería:

$(document).ready(function(){

$('#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 acción del usuario sobre él.

Al cargar la página veremos el resultado:

Este sería el resultado y como en la barra de progreso los valores preestablecidos son un mínimo de cero y un máximo 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:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 16 21.- jQuery UI

Si deseamos ver el valor que tiene al modificar los valores debemos crear un hueco donde escribir dicho valor. Por ejemplo modificare la página web de la siguiente manera:

<body>

<div id='deslizador'></div>

<p>Valor: <span id='valor'></span></p>

<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>

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 función para mostrar el valor cuando se produzca uno de esos eventos. El código podría ser:

$(document).ready(function(){

$('#deslizador').slider({

value: 0,

min: 0,

max: 255,

create: mostrarValor,

slide: mostrarValor

});

function mostrarValor(){

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

}

});

Veamos ahora que sucede al cargar la página:

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

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 17 21.- jQuery UI

Podemos hasta usar un deslizador doble en la misma barra que podríamos usar por ejemplo para mostrar valores mínimos y máximos por ejemplo de un valor en bolsa o de la diferencia de precio de viviendas antes y después de la crisis, etc. Veamos cómo sería la creación:

$(document).ready(function(){

$('#deslizador').slider({

values: [0,255],

range: true,

min: 0,

max: 255,

create: mostrarValor,

slide: mostrarValor

});

function 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. También debemos activar la propiedad range (rango) que indica que es un multideslizador.

Al cargar la página sería:

Ahora si queremos ver los dos valores de los extremos deberíamos crear dos huecos para rellenar los valores, esto cambiaria la página web así:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 18 21.- jQuery UI

<body>

<div id='deslizador'></div>

<h3>Valor Mínimo: <span id='minimo'></span></h3>

<h3>Valor Máximo: <span id='maximo'></span></h3>

<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>

Ahora debemos cambiar la función anterior de mostrarValor() para que muestre ambos valores:

$(document).ready(function(){

$('#deslizador').slider({

values: [0,255],

range: true,

min: 0,

max: 255,

create: mostrarValor,

slide: mostrarValor

});

function mostrarValor(){

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

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

}

});

Así al cargar la página y cambiar los valores:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 19 21.- jQuery UI

22.5.- El Widget autocomplete (auto-completar) Este es un elemento muy válido para los formularios y que algunos navegadores están 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 más fácil de hacerlo:

<!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'>

</head>

<body>

<label for='moto'>Elige tu fabricante de motos<input id='seleccion'>

<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>

Que al cargar la página nos muestra este resultado:

Ahora vamos a crear el elemento autocomplete de esta manera:

$(document).ready(function(){

var motos = ['Aprilia', 'BMW', 'Ducati', 'Harley', 'Honda', 'Kawasaki', 'Suzuki', 'Yamaha']

$('#seleccion').autocomplete({

source: motos

});

});

Veamos ahora al cargar la página y escribir una letra dentro del <input>:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 20 21.- jQuery UI

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 también 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. Podría ser:

$(document).ready(function(){

var motos = [{ label:'Aprilia - Italia', value: 'Aprilia'},

{ label:'BMW - Alemania', value: 'BMW'},

{ label: 'Ducati - Italia', value: 'Ducati'},

{ label: 'Harley - USA', value: 'Harley'},

{ label: 'Honda - Japón', value: 'Honda'},

{ label: 'Kawasaki - Japón', value: 'Kawasaki'},

{ label: 'Suzuki - Japón',value: 'Suzuki'},

{ label: 'Yamaha - Japón', value: 'Yamaha'}]

$('#seleccion').autocomplete({

source: motos

});

});

Como podemos ver es un poco más complicada la estructura ya que debemos escribir las propiedades de cada objeto y su valor.

Al cargar la página nos muestra el siguiente resultado:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 21 21.- jQuery UI

Pero al elegir el modelo deseado:

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

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 22 21.- jQuery UI

22.6.- El Widget accordion (acordeon) Este es uno de los elementos más usados cuando tenemos mucha información en nuestra página web y deseamos un elemento que nos permita separar los contenidos de la página en diferentes secciones, dejándonos solo ver una de las secciones y pudiendo ver las demás con un simple click, de modo que al elegir otra sección se cierra la anterior automáticamente.

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>

<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>

Esto al abrir la página sería:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 23 21.- jQuery UI

Sería una moto debajo de otra, pero al haber demasiadas imágenes o texto, nos hacer tener que movernos a lo largo de la página arriba y abajo para ver toda la información.

Veamos ahora como creamos el elemento accordion con jQuery:

$(document).ready(function(){

$('#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 página:

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

Yo creo que el resultado es bastante espectacular.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 24 21.- jQuery UI

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 más grande siempre.

Podemos cambiar ese comportamiento así:

$(document).ready(function(){

$('#acordeon').accordion({

heightStyle: 'content',

active: 1,

event: 'mouseover',

collapsible: true

});

});

En este código hemos cambiado el evento del click, evento por defecto para cambiar el contenido de las fichas por el mouseover.

También hemos asignado la ficha 1, recordad que contamos desde cero, en la propiedad active.

Por último también hemos cambiado la altura de las fichas para que dependa del contenido de cada una de las fichas.

También existe la propiedad llamada collapsible que si la establecemos a true nos permite cerrar todas las fichas.

Al abrir ahora la página:

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.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 25 21.- jQuery UI

22.7.- El Widget tabs (pestañas) Este elemento es muy parecido al del accordion, pero con la gran diferencia de que este tipo de menús se crea en forma de pestañas, algo parecido a como lo hacen los navegadores con las pestañas.

Es un elemento muy útil cuando existen grandes cantidades de información dentro de la página y queremos dividir dicha información de la manera que nos sea propicia.

La página web sería algo parecido a esto:

<!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>

<div id='menu'>

<ul>

<li><a href='#menu1'>Menu 1</a>

<li><a href='#menu2'>Menu 2</a>

<li><a href='#menu3'>Menu 3</a>

<li><a href='#menu4'>Menu 4</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>

<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>

Como podemos ver en este caso, apreciamos que existen una serie de enlaces que en vez de saltar a otra página web, saltan a diferentes marcas dentro de la misma página.

Al abrir esta página sería:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 26 21.- jQuery UI

El contenido del código de jQuery para aplicar el elemento tabs sería:

$(document).ready(function(){

$('#menu').tabs();

});

Ahora al guardar este código y actualizar la página podemos ver el cambio sustancial:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 27 21.- jQuery UI

Como hemos podido ver en el código HTML necesitamos un contenedor que captura todo el contenido de la página, en nuestro caso tiene el id menú.

Una vez dentro del contenedor hemos creado una lista de elementos con los enlaces a donde saltarían dentro de la misma página, 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 pestaña que estará activa al abrir la página y que igual que antes se configura con la propiedad active.

También existe la propiedad heightStyle que nos permite especificar la altura de los contenedores de las pestañas, con el atributo content establecemos que las fichas se adapten al contenido.

Podemos también igual que antes cambiar el evento que abre cada pestaña con la propiedad event.

La propiedad disable es común a todos los elementos que creemos con jQuery UI, aquí la podríamos utilizar para deshabilitar alguna de las pestañas de la siguiente manera:

$('#menu').tabs('disable',1);

Esta sentencia deshabilitaría la segunda pestaña, ya que empezamos a contar desde cero:

Por último tenemos los eventos principales a los que responde el elemento tabs que serían:

create: cuando es creado en la página web.

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

actívate: después de que el panel haya sido mostrado.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 28 21.- jQuery UI

22.8.- El Widget dialog (cuadro de dialogo) Este elemento es un cuadro flotante con un título y un área de contenido que podemos personalizar, similar a los cuadros de dialogo de JavaScript, pero más vistosos y configurables.

Veamos su estructura básica con un ejemplo muy simple:

<!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>

<div id='cuadro' title='Título cuadro'>

<p>Este es el mensaje que podemos insertar dentro de nuestro cuadro de dialogo</p>

</div>

<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>

Para aplicar el elemento al contenedor <div> con el id cuadro con jQuery sería:

$(document).ready(function(){

$('#cuadro').dialog();

});

Ahora al cargar la página tendríamos el siguiente resultado:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 29 21.- jQuery UI

Como podemos ver el mismo se centra en la ventana del navegador. El problema está en que el cuadro de dialogo aparece nada más crearlo. Para evitar este comportamiento debemos establecer la propiedad autoOpen a false de la siguiente manera:

$(document).ready(function(){

$('#cuadro').dialog({

autoOpen: false

});

});

Ahora al cargar la página podemos ver que no aparece el cuadro de dialogo. Para abrir el cuadro de dialogo creado deberíamos adjuntarlo a algún evento de la página. En mi caso creare un botón simplemente para que al hacer un click sobre el muestre el cuadro de dialogo. Añado este código a la página web:

<div id='cuadro' title='Título 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 también el código jQuery para que responda al click del botón:

$(document).ready(function(){

$('#cuadro').dialog({

autoOpen: false

});

$('#boton').button();

$('#boton').click(function(){

$('#cuadro').dialog('open');

});

});

Al abrir ahora la página deberíamos ver solo el botón:

Pero ahora al pulsar el botón:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 30 21.- jQuery UI

A pesar de ser un simple cuadro de dialogo es de los elementos que tienen más propiedades, las más importantes son:

appendTo: especifica el elemento donde aparecerá el cuadro de dialogo.

autoOpen: evita que se abra nada más 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 (automático).

minHeight: permite especificar la altura mínima del cuadro en pixels.

maxHeight: permite especificar la altura máxima del cuadro en pixels.

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

minWidth: permite especificar la anchura mínima del cuadro en pixels.

maxWidth: permite especificar la anchura máxima del cuadro en pixels.

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

position: especifica la posición 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 número de propiedades es amplio, vamos a ir cambiando algunas cosas:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 31 21.- jQuery UI

$(document).ready(function(){

$('#cuadro').dialog({

autoOpen: false,

title: 'Titulo Nuevo',

resizable: false,

modal: true

});

$('#boton').button();

$('#boton').click(function(){

$('#cuadro').dialog('open');

});

});

La siguiente propiedad, resizable, es la que nos permitiría 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 página 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 botón debe haber cambiado el título y no deberíamos poder trabajar con el resto de la página hasta que no cerremos el cuadro de dialogo:

Para crear un cuadro de dialogo prompt introduciríamos un campo de formulario dentro del cuadro de dialogo. Además le añadiré botones de Ok y Cancelar, que tendrá esta apariencia:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 32 21.- jQuery UI

El código del HTML podría ser el siguiente:

<div id='salida' title='Respuesta'>

<p>Tu nombre es <span id='valor'></span></p>

</div>

<div id='entrada' title='Petición 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 código ya que debemos crear un array con los botones que deseemos que aparezcan y posteriormente lo que haría 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){

$('#entrada').dialog('close');

}}]

});

Voy a intentar explicar un poco todo este código 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 sería un botón.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 33 21.- jQuery UI

buttons:[{text: 'Ok',

click: function(e){

$('#entrada').dialog('close');

}},

{text: 'Cancelar',

click: function(e){

$('#entrada').dialog('close');

}}

]

En este caso he creado el botón con el texto Ok dentro de buttons y le asigno el evento click para que al pulsar dicho botón cierre el cuadro de dialogo.

El botón Cancelar sería la misma estructura, pero cambiando el texto.

Recordad que podemos cerrar el cuadro de dialogo también pulsando la tecla Esc o pulsando sobre el botón 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 más simple como podemos apreciar. A continuación veamos que harían los botones de Pedir Datos y Mostrar Datos al ser pulsados:

$('#botonEntrada').button();

$('#botonEntrada').click(function(){

bandera = false;

$('#nombre').val('Anónimo');

$('#entrada').dialog('open');

});

$('#botonSalida').button();

$('#botonSalida').click(function(){

$('#valor').text($('#nombre').val());

$('#salida').dialog('open');

});

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 34 21.- jQuery UI

Veamos ahora el resultado de este desaguisado al cargar la página:

Ahora pulsamos el botón Pedir Datos y nos mostrara el cuadro de dialogo con el id entrada:

Pulsamos el botón Ok:

Al pulsar sobre el botón Mostrar Datos:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 35 21.- jQuery UI

El problema es que mostrara esta información, pulsemos el botón Cancelar o el resto de los posibles cierres del cuadro de dialogo. Una posible solución sería un flag o variable de estado:

$(document).ready(function(){

var bandera;

$('#entrada').dialog({

autoOpen: false,

resizable: false,

modal: true,

collapsible:true,

buttons:[{text: 'Ok',

click: function(e){

$('#entrada').dialog('close');

bandera = true;

}},

{text: 'Cancelar',

click: function(e){

$('#entrada').dialog('close');

}}]

}); // 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('Anónimo');

}

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 36 21.- jQuery UI

$('#salida').dialog('open');

});// final botónSalida

});

Ahora solo usara el contenido del campo de texto del formulario en el caso en que hayamos pulsado el botón Ok. En los demás casos he establecido el valor Anónimo para mostrar.

Esta vez pulsamos el botón Cancelar y al pulsar después el botón Mostrar Datos:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 37 21.- jQuery UI

22.9.- El Widget spinner (cuadro numérico) Este widget está diseñado para la introducción de valores numéricos 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 página podría ser:

<!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>

<p><label for='valor'><strong>Introduce las Unidades que deseas:</strong></label>

<input id='valor' value=0 min=0 max=100>

<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 código en JQuery para aplicar este método sería:

$(document).ready(function(){

$('#valor').spinner();

});

El resultado al cargar la página sería:

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 librería de jQuery UI.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 38 21.- jQuery UI

Como todos los elementos tiene una serie de propiedades que podemos modificar y que aquí mostrare las más importantes:

min: el número mínimo permitido.

max: el número máximo 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:

$(document).ready(function(){

$('#valor').spinner({

min: 0,

max: 100,

step: 5,

icons: {

up: 'ui-icon-circle-plus',

down: 'ui-icon-circle-minus'

}

});

});

Veamos como cambiaría el aspecto:

Algunos de los eventos a los que podemos responder serían:

create: al aplicar el elemento spinner a la página 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 numéricos que podríamos rectificar con el evento change.

Veamos un ejemplo:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 39 21.- jQuery UI

$(document).ready(function(){

$('#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 algodón, guardamos el código y actualizamos la página:

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

Funciona perfectamente.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 40 21.- jQuery UI

22.10.- El Widget datepicker (cuadro fechas) Este elemento simula un calendario para elegir fechas y además facilita de esa manera el problema con el gran número de formatos disponibles como pudimos ver al estudiar el objeto Date.

Este es otro de los controles que es muy utilizado, por su estética y su facilidad de uso.

Veamos cómo crear un control datepicker:

<!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>

<label for='fecha'>Indica la fecha de matriculación del vehiculo</label>

<input id='fecha'>

<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 código jQuery sería:

$(document).ready(function(){

$('#fecha').datepicker();

});

Al cargar la página y colocar el cursor sobre el campo de formulario obtenemos este resultado:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 41 21.- jQuery UI

Existe otra manera que no oculta el campo del formulario y que se mostraría siempre en la página. Se suele usar cuando es muy importante el tema de la fecha. Sería así:

<body>

<div id='fecha'></div>

<h3>Elige tu fecha de Incorporación</h3>

<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>

El código de jQuery sería exactamente el mismo. Al cargar la página 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 más 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 día actual.

El más usado es defaultDate que como hemos indicado cambia la fecha mostrada al mostrar el elemento dentro de la página web. Si existe un atributo value en el campo esto se ignora.

Los posibles valores de la propiedad defaultDate serían:

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 días a la fecha de hoy

-114y: restaría 114 años a la fecha actual

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 42 21.- jQuery UI

Veamos un ejemplo:

$(document).ready(function(){

$('#fecha').datepicker({

defaultDate: '-114y'

});

});

Al guardar los cambios y cargar la página tenemos:

Como esperábamos ha restado 114 años a la fecha actual y nos muestra el año 1900.

Ahora vamos a especificar un campo de texto donde colocaremos la fecha al seleccionarla del elemento datepicker, para ello hago un pequeño cambio en nuestra página web:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 43 21.- jQuery UI

Por último podemos hacer una especie de traducción para este tipo de elemento, pero necesitamos un fichero de con los formatos locales, que podemos conseguir en esta página:

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 Incorporación</h3>

<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/jquery-ui-i18n.min.js'></script>

<script src='codigo/codigo.js'></script>

Luego cambiaremos en jQuery la siguiente línea:

$(document).ready(function(){

$.datepicker.setDefaults($.datepicker.regional['es']);

});

Al guardar los cambios y cargar la página:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 44 21.- jQuery UI

Ya tenemos nuestro calendario en español.

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>

<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>

<label for='fecha'>Fecha de Incorporación</label>

<input id='fecha'>

<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/jquery-ui-i18n.min.js'></script>

<script src='codigo/codigo.js'></script>

</body>

</html>

Una vez que hemos vuelto al inicio ya podemos ver las siguientes propiedades que podemos modificar, que podrían ser el valor mínimo (minDate) o máximo de la fecha (maxDate) a mostrar en el calendario. Veamos estos cambios:

$(document).ready(function(){

$.datepicker.setDefaults($.datepicker.regional['es']);

$('#fecha').datepicker({

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 año de nacimiento.

Para evitar este problema podemos añadir un menú para viajar por los años directamente que sería changeYear, también está disponible changeMonth para los meses y lo único que debemos hacer para activarlos es asignarles el valor true:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 45 21.- jQuery UI

$(document).ready(function(){

$.datepicker.setDefaults($.datepicker.regional['es']);

$('#fecha').datepicker({

minDate: '-100y',

changeYear: true

});

});

Al guardar los cambios y cargar la página ahora podemos cambiar los años así:

De esta manera es más fácil y rápido.

Podemos hasta indicarle el número de meses que deseamos mostrar. Por defecto es 1, que es el mes que nos aparece, pero podríamos indicarle un número mayor:

$(document).ready(function(){

$.datepicker.setDefaults($.datepicker.regional['es']);

$('#fecha').datepicker({

minDate: '-10y',

changeYear: true,

numberOfMonths: 2

});

});

Ahora al guardar y cargar la página obtenemos este resultado:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 46 21.- jQuery UI

Podemos hasta añadirle un efecto de animación para que no se muestre de golpe el calendario:

$(document).ready(function(){

$.datepicker.setDefaults($.datepicker.regional['es']);

$('#fecha').datepicker({

minDate: '-10y',

changeYear: true,

duration: 2000,

showAnim: 'fadeIn'

});

});

La propiedad duration especifica la duración del efecto y showAnim el efecto a emplear. Recordad que al adjuntar la librería jQuery UI el número de efectos que podemos usar en estas animaciones ha aumentado muchísimo.

No pongo la imagen ya que la animación no se ve muy bien, pero probad el código en el ordenador y veremos que el cambio es apreciable.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 47 21.- jQuery UI

22.11.- El Widget tooltip (pistas) Este elemento proporciona pequeñas ventanas pop-up que son útiles para mostrar información extra, por ejemplo al colocar el ratón sobre un campo del formulario donde podemos informar a los usuarios de la información o el formato que deseamos, una imagen de un cuadro donde podríamos informar a los usuarios del nombre y autor del cuadro.

Veamos cómo 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>

<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 código jQuery sería:

$(document).ready(function(){

$('[title]').tooltip();

});

Al cargar la página y colocar el ratón sobre la imagen tendremos este resultado:

Como podemos ver en la imagen el tooltip es el elemento de la esquina inferior izquierda.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 48 21.- jQuery UI

Las propiedades más 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 ratón en la posición del tooltip si esta con el valor true.

position: especifica la posición del tooltip

Vamos a cambiar algunas de las propiedades y la página para que podamos ver su funcionamiento. La página sería:

<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 código jQuery es:

$(document).ready(function(){

$('#imagen').tooltip({

content: $('#contenido').html(),

track: true

});

$('input[title]').tooltip();

});

En el código 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.

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 49 21.- jQuery UI

También hemos asignado a la propiedad track el valor true, que especifica que el tooltip aparecerá donde este el ratón 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 código y al cargar la página:

Con la propiedad tooltipClass podemos añadir clases al elemento para hacerlo más personalizado. Por ejemplo vamos a añadir esta clase borde a estilos.css:

*.borde{

border: 2px dotted red;

}

Ahora voy añadir esa clase al elemento del campo de formulario:

$(document).ready(function(){

$('input[title]').tooltip({

tooltipClass: 'borde'

});

});

El otro elemento no lo he incluido por qué no ha sido modificado. Guardo el código y el resultado al colocar el ratón sobre el campo de formulario es:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 50 21.- jQuery UI

Los métodos en estos casos más usados podrían ser open, cuando se muestra el tooltip y close cuando se cierra el tooltip. Podríamos establecer un tiempo para que pasado ese tiempo desapareciese dicho tooltip. Veamos un ejemplo:

$(document).ready(function(){

$('#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);

}

});

});

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 51 21.- jQuery UI

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 páginas de su sitio web.

Los pasos para aplicar un elemento menú serían en primer lugar crear una página web que contenga una serie de listas anidadas como la siguiente página web:

<body>

<h1>Principales Portales de Búsqueda 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>

<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>

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ú:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 52 21.- jQuery UI

body{

text-align: center;

}

.ui-menu{

width: 15%;

min-width: 200px;

}

#menu {

text-align: left;

}

.ui-menu ul {

width: 10%;

min-width: 100px;

}

Lo más importante es la anchura (width) del .ui-menu (clase ui-menu), que he establecido en un 20% de la anchura de la página. La propiedad min-width es la anchura mínima que pueden llegar a tener los elementos del menú. Veamos ahora el código de jQuery para aplicar el elemento menú:

$(document).ready(function(){

$('#menu').menu();

});

El resultado al cargar la página sería:

He usado los elementos <ul> y <li> porque son los habituales para menús pero el elemento menú funciona con cualquier estructura siempre y cuando haya una relación de jerarquía clara.

Podemos usar iconos en nuestros menús mediante la propiedad icons (iconos), por ejemplo en los submenús, para lo cual primero los marcaríamos con el nombre de la clase submenú por ejemplo:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 53 21.- jQuery UI

<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>

<ul class='submenu'>

<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 class='submenu'>

<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 submenús:

$(document).ready(function(){

$('#menu').menu({

icons: {submenu: 'ui-icon-star'}

});

});

El listado de iconos lo podemos encontrar en la lista donde descargamos la librería de jQuery UI:

Integración de Componentes Software en Páginas Web

Cristóbal Fernández Guerra 54 21.- jQuery UI

Si colocamos el ratón sobre el icono nos dirá su nombre para poder usarlos luego en nuestro menú.

El resultado de colocar estos iconos sería: