Lección 4.2

JQuery UI

 

JQuery UI es una librería basada en JQuery que incluye funcionalidades muy interesantes para desarrollar aplicaciones interactivas. En su página web encontrarás varias demos que muestran las características incluidas, así como el enlace para descargarla. Para utilizar esta librería en nuestra web sólo tenemos que incluir el archivo javascript jquery-ui.js y los estilos de jquery-ui.structure.css. Este último archivo no cambiará el aspecto de nuestra web sólo añade elementos estructurales para poder utilizar las características de la librería.

En términos generales podemos agrupar la características de interacción de JQuery UI en dos grandes módulos: interacciones y efectos. Esta librería también ofrece varios widgets (botones, paneles, etc) para utilizar en nuestra web. Sin embargo, estos elementos se configuran únicamente mediante CSS así que no los estudiaremos en este curso. Encontrarás toda la documentación en la página web.

Interacciones

Las interacciones permiten añadir funcionalidad para arrastrar (drag), soltar (drop), cambiar tamaño (resize), seleccionar (select) y ordenar (sort) cualquier tipo de elemento web.

Arrastrar

Simplemente tenemos que llamar al método draggable() sobre el elemento que queramos hacer arrastrable (al que añadimos la clase ui-widget-content).

<div id="draggable">
  <img class=".img-thumbnail" src="img/ucm.png"/>
  <p>(arrástrame)</p>
</div>

El código javascript sería:

$(function() {
    $( "#draggable" ).draggable();
  });
A continuación puedes probar el código anterior. Haz también una prueba por tí mismo.

(Arrastrame)

Los métodos de interacción tienen ciertas opciones extra que podemos utilizar. En este caso podemos limitar el movimiento en el eje X o Y, así como hacer que el elemento vuelva a su posición o que sólo se pueda mover ajustado a una rejilla de tamaño determinado. Para ello tendriamos que utilizar la siguiente invocación:

$( "#draggable" ).draggable({ axis: "x" , revert: true,  grid: [ 50, 50 ] });
Prueba estas opciones por tí mismo.

Soltar

De forma análoga a la funcionalidad de arrastrar, podemos definir elementos DOM como “droppable” con el método droppable(). Esto significará que pueden recibir elementos arrastrables. Como opcion de este método podemos definir qué hacer cuando se recibe un elemento.

En el siguiente ejemplo tenemos un elemento arrastrable #parasoltar y el elemento que lo recibirá identificado como #areaDestino:

<div id="parasoltar">
  <img class=".img-thumbnail" src="img/ucm.png"/>
  <p>(Arrastrame)</p>
</div>

<div id="areaDestino">
  <p id="texto_destino">Soltar aquí</p>
</div>

Para añadirles la funcionalidad utilizaremos el siguiente código:

$("#parasoltar").draggable();
$("#areaDestino").droppable({
  drop: function( event, ui ) {
    $("#texto_destino").html( "¡Recibido!" );
    $("#areaDestino").css("background-color","yellow");
  }
});

El elemento #parasoltar se define simplemente como arrastrable con draggable(). Y el elemento #areaDestino se define como droppable. Dentro de los argumentos de esta función establecemos qué hacer cuando se genera el evento drop, es decir cuando el arrastrable ha sido soltado sobre este elemento. En este caso cambiaros el texto y el color de fondo para indicarlo visualmente.

Otra opción interesante es la de indicar qué elementos pueden ser soltados. Para ello utilizariamos la opción accept. En nuestro ejemplo añadiríamos: accept: "#paraSoltar".

A continuación puedes probar el código anterior. Haz también una prueba por tí mismo.

(Arrastrame)

Soltar aquí

Cambiar tamaño

La siguiente funcionalidad es la del cambio de tamaño. Es tan sencillo como llamar al método resizable() sobre el elemento que queramos modificar. Veamos un ejemplo sobre el siguiente html:

<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; float:left;
              background-color: white; border-style: dashed; }
</style>
<div id="resizable">
    <p>Cambia mi tamaño</p>
</div>

En el código javascript sólo tendríamos que invocar a $( "#resizable" ).resizable(). Pero también podemos añadir opciones muy interesantes para mostrar una animación, definir el tamaño mínimo y máximo o ajustar a una rejilla:

$( "#resizable" ).resizable({
  animate: true,
  maxHeight: 350,
  maxWidth: 550,
  minHeight: 150,
  minWidth: 150,
  grid: 50
});

A continuación puedes probar el código anterior. Haz pruebas por tí mismo modificando las distintas opciones.

Cambia mi tamaño

Selección

Crear elementos seleccionables es también muy sencillo con JQueryUI. Sólo tendremos que invocar el método selectable() sobre los elementos. Cuando el elemento haya sido seleccionado se le añadirá la clase .ui-selected por lo que tendremos que configurar la CSS apropiadamente para indicar la selección. Veámos un ejemplo:

<style>
#seleccionable .ui-selected { background: #c0392b; color: white; }
#seleccionable { list-style-type: none; width: 200px;}
#seleccionable li { margin: 3px; padding: 10px; text-align: center; }
</style>
<script>
$(function() {
  $( "#seleccionable" ).selectable();
});
</script>

<ol id="seleccionable">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</ol>

Puedes probar el código anterior a continuación. De nuevo, haz pruebas por tí mismo.

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
  4. Elemento 4
  5. Elemento 5

Ordenación

La última funcionalidad es la de ordenación. En este caso utilizaremos el método sortable().

Si utilizas JQueryUI junto con Bootstrap (como en esta misma página) deberás añadir la siguiente línea a tu CSS para que la ordenación funcione correctamente: .container {overflow: auto;}.

A continuación tienes un ejemplo de cómo utilizar esta funcionalidad:

<style>
#ordenable { list-style-type: none; width: 200px; }
#ordenable li {  margin: 3px; padding: 10px;
                background: #c0392b;  color: white;
                cursor:move;  text-align: center;}
.container {overflow: auto;} /* para compatiblidad con Bootstrap */
</style>
<script>
  $(function() {
    $("#ordenable").sortable();
    $("#ordenable").disableSelection();
  });
</script>

<ul id="ordenable">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</ul>
Aquí tienes el resultado de visualizar el código anterior. Haz tus propias pruebas con el código:
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
  • Elemento 5

Efectos

Otra gran virtud de JQueryUI es que incluye numerosos efectos que podemos utilizar para animar nuestras páginas web. La gran mayoría de ello podríamos conseguirlos programando directamente con JQuery, pero la librería nos libera de ello.

Para aplicar los efectos tenemos los métodos show(), hide() y toggle(). Como parámetro indicaremos el tipo de efecto a utilizar: Blind, Bounce, Clip, Drop, Explode, Fold, Highlight, Puff, Pulsate, Scale, Shake, Size, Slide. Si el tipo de animación tiene opciones (que deberás mirar en la documentación) las añadiremos a continuación y por último la duración de la animación. Por ejemplo:

$( "#effect" ).toggle( "blind", {}, 500 );
A continuación puedes probar los distintos efectos proporcionados con JQuery:

Modificación de la CSS

Ya estudiamos el método animate() de JQuery para realizar animaciones, sin embargo este método tiene ciertas limitaciones. Por ejemplo, no podemos cambiar los colores dinámicamente. Por ello, JQueryUI lo redefine aumentando su funcionalidad. En este ejemplo realizaremos una animación que cambia el tamaño y color simultaneamente:

<style>
  .animBox { width: 100%; height: 200px; position: relative; }
  #elemento { width: 300px; padding: 0.4em; position: relative; background: #fff; }
</style>
<script>
$(function() {
  $( "#btnAnim" ).click(function() {
      $( "#elemento" ).animate({
        backgroundColor: "#c0392b",
        color: "white",
        width: "100%"
      }, 1500 );
  });
});
</script>

<div class="animBox">
  <div id="elemento">
  <h4>Animación</h4>
  <p>Este ejemplo muestra cómo animar distintas propiedades de la CSS que no puede hacerse si utilizamos únicamente JQuery.</p>
  </div>
</div>

<button id="btnAnim" id="btnEfecto" class="btn btn-primary">Animar</button>
Puedes probar el código anterior a continuación. Haz pruebas por tí mismo de animaciones de la CSS con JQueryUI.

Animación

Este ejemplo muestra cómo animar distintas propiedades de la CSS que no puede hacerse si utilizamos únicamente JQuery.