JQuery UI es una completa librería (que deberemos descargar aparte) con la cual es posible añadir nuevos elementos a la interfaz de usuario (junto con themes que permiten modificar su aspecto visual), así como disponer de otras útiles funcionalidades tales como drag & drop (arrastrar y soltar) entre otras.
Para descargarla haz clic en este enlace hacia su web oficial, y después en Stable para bajar la última versión disponible.
También es posible descargar sólo aquellos componentes de la misma que vayamos a utilizar en nuestros proyectos haciendo clic en Custom, lo cual es recomendable sobre todo al subir nuestras páginas al servidor web de producción tras haberlas terminado.
Por otro lado, desde este enlace podemos descargar los themes disponibles así como crear otros personalizados con el fin de utilizarlos en nuestros proyectos, pudiendo así personalizar la apariencia de los elementos de JQuery UI que utilicemos en nuestras páginas web.
Tras descomprimir el archivo descargado copia a la carpeta de tu proyecto el archivo jquery-ui-1.10.1.custom.min.js que encontrarás en la carpeta js y la carpeta smoothness que se halla dentro de css:
Vea también: [ API de JQuery UI ] - [ Demos ]
Si bien JQuery incorpora la posibilidad de aplicar algunos efectos visuales y animaciones, JQuery UI pone a nuestra disposición un mayor número de ellos.
En el presente tutorial no entraremos a tratar este tema en profundidad (para más información haz clic en el enlace facilitado un poco más adelante y consulta la sección sobre efectos en el menú de la izquierda), pero sí destacamos el método effect() usado para aplicar los efectos:
- blind: el elemento desaparece desde abajo.
- bounce: efecto rebote de arriba hacia abajo.
- clip: el elemento se plega hasta desaparecer.
- drop: el elemento desaparece difuminándose mientras se mueve a la izquierda.
- explode: el elemento desaparece simulando un efecto de explosión.
- fade: el elemento se difumina mientras desaparece.
- fold: el elemento desaparece difuminándose desde la parte inferior derecha.
- highlight: aplica un efecto de resaltado a un elemento.
- puff: el elemento se amplía mientras desaparece.
- pulsate: el elemento desaparece y se muestra repetidamente.
- scale: el elemento se reduce mientras desaparece.
- shake: efecto rebote de arriba hacia abajo.
- size: el elemento se reduce hasta adquirir la dimensión indicada y desaparece.
- slide: el elemento se muestra apareciendo desde la parte izquierda.
Veamos un ejemplo de cómo aplicarlos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Efectos con JQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#div1 { height:100px;width:300px;margin-top:20px;background-color:lightgreen; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Agregamos también el archivo CSS del theme que usemos -->
<link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
$(document).ready(function()
{
$("#efectos").change(function() {
// Obtenemos el efecto seleccionado
var efecto = $(this).val();
// Lo aplicamos a 'div1'
$("#div1").effect( efecto );
})
});
</script>
</head>
<body>
<label for="efectos">Selecciona un efecto:</label>
<select name="efectos" id="efectos">
<option value="bounce">Bounce</option>
<option value="drop">Drop</option>
<option value="shake">Shake</option>
<option value="slide">Slide</option>
<option value="explode">Explode</option>
</select>
<div id="div1">
<img src="logo.jpg" alt="" />
<p>Probando algunos efectos en JQuery UI.</p>
</div>
</body>
</html>
Vea también: [ Efectos en JQuery UI ] - [ effect() ]
