Algo

1. Desarrollo de Aplicaciones Web
Biblioteca de Componentes
Gráficos jQueryUI
Autores:
Alejandro Gómez López
Juan de Dios Roldán Pérez Página 1

2. Índice
• Introducción a jQuery 3
• Efectos Visuales
– Interacciones 8
– Widgets 12
– Efectos 39
– Utilidades 41
• Conclusiones 45
Página 2

3. Introducción a jQuery UI
• Historia:
jQuery UI surge como una biblioteca de
componentes para el framework jQuery, la
cual añade un conjunto de plug-ins, widgets y
efectos visuales para la creación de
aplicaciones web.
Página 3

4. Introducción a jQuery UI
• Uso:
Se utiliza igual que cualquier otra extensión para
jQuery. Se añaden los ficheros .js a la página:
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
Página 4

5. Introducción a jQuery UI
• Código JavaScript para aplicar los efectos:
// Aplicar el efecto Draggable al elemento con id "draggable" al
cargar la página
$(document).ready(function(){
$("#draggable").draggable();
});
Página 5

6. Introducción a jQuery UI
• Código en el “body” del documento:
<div id="draggable" class="ui-widget-content">
<p>¡Arrástrame!</p>
</div>
Página 6

7. Introducción a jQuery UI
• En este proyecto, vamos a exponer los efectos
visuales más llamativos que usa jQueryUI.
• Todos los distintos efectos y funciones de
jQuery UI están clasificados por el campo ‘id’.
• Matizaremos en la declaración para utilizarlos.
Página 7

8. Efectos Visuales
• Interacciones:
– Draggable/Droppable
• Permite que los elementos se muevan mediante el
ratón.
– Resizable
• Cambiar el tamaño de un elemento usando el ratón.
– Sortable
• Reordenar los elementos en una lista o encuadrarlos
usando el ratón.
Página 8

9. Interacciones
• Draggable/Droppable
– Revert Draggable position
• Devuelve el objeto arrastrado a la posición original
cuando se detiene la acción con la opción booleana
“revert”.
– Simple Photo Manage
• Crea etiquetas para los elementos móviles. Puedes
borrar una imagen tanto arrastrándola a la papelera
como pulsando en el icono de la misma. Puedes
deshacer el borrado de una imagen. Puedes agrandar la
imagen pulsando en el icono del zoom.
Página 9

10. Interacciones: Ejemplos
Revert Draggable Position
……
#draggable, #draggable2 { width: 100px; height: 100px;
padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px;
padding: 0.5em; float: left; margin: 10px; }
……
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
……
Página 10

11. Interacciones: Ejemplos
Simple Photo Manage
……
$(function() {
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
……
<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset
ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras</h5>
<img src="images/high_tatras_min.jpg«
alt="The peaks of High Tatras" width="96" height="72">
<a href="images/high_tatras.jpg«
title="View larger image" class="ui-icon
ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off«
title="Delete this image" class="ui-icon
ui-icon-trash">Delete image</a>
</li>
……
Página 11

12. Efectos Visuales
• Widgets
– Accordion
• Muestra paneles contenedores que se colapsan para
presentar información en una limitada cantidad de espacio.
– Autocomplete
• Permite a los usuarios encontrar y seleccionar de una lista
pre-cargada los criterios sugeridos conforme van
escribiendo.
– Button
• Mejora los elementos de formulario como botones con una
estética apropiada y estilos activos.
Página 12

13. Efectos Visuales
• Widgets
– Datepicker
• Selecciona una fecha de un calendario inline de tipo popup.
– Dialog
• Abrir contenido en un bocadillo interactivo.
– ProgressBar
• Muestra el estado de un determinado o indeterminado
proceso.
– Select Menu
• Duplica y extiende la funcionalidad del código HTML nativo
para seleccionar elementos para sobrepasar las limitaciones
del control nativo.
Página 13

14. Efectos Visuales
• Widgets
– Spinner
• Mejora un cuadro de texto para introducir valores
numéricos, con botones de subida/bajada e interacción con
pulsación de flechas en el teclado.
– Tabs
• Una simple área de contenido con múltiples paneles, cada
uno asociado con una lista de cabeceras.
– Tooltip
• Personalizar, tematizar y reemplazar entornos nativos.
Página 14

15. Widgets
• Accordion
– Customize icons
• Personaliza los iconos cabecera con la opción “icons”, la cual
acepta clases de la cabecera por defecto y activa un estado
abierto.
– Open on hoverintent
• Pulsar sobre las cabeceras para expandir/colapsar el
contenido en secciones lógicas, a modo de pestañas.
Opcionalmente, las secciones se pueden abrir y cerrar sólo
con deslizar el ratón por encima.
Página 15

16. Widgets: Ejemplos
Customize Icons
……
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
icons: icons
});
$( "#toggle" ).button().click(function() {
If ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
});
……
Página 16

17. Widgets: Ejemplos
Open on Hoverintent
……
$(function() {
$( "#accordion" ).accordion({
event: "click hoverintent«
});
});
……
$.event.special.hoverintent = {
setup: function() {
$( this ).bind( "mouseover",
jQuery.event.special.hoverintent.handler );
},
teardown: function() {
$( this ).unbind( "mouseover",
jQuery.event.special.hoverintent.handler );
},
handler: function( event ) {
var currentX, currentY, timeout,
args = arguments,
target = $( event.target ),
previousX = event.pageX,
previousY = event.pageY;
……
Página 17

18. Widgets
• Autocomplete
– Custom data and display
• Puedes usar tu propio formato de datos y mostrarlos
simplemente haciendo predominantes las acciones por
defecto enfocar y seleccionar.
– Scrollable results
• Cuando se muestra una gran lista de opciones, puedes
simplemente asignar la máxima altura del menú de
autocompletado para prevenir que el menú crezca
demasiado.
Página 18

19. Widgets: Ejemplos
Custom data and display
……
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
……
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
……
Página 19

20. Widgets: Ejemplos
Scrollable Results
……
$(function() {
var availableTags = ["ActionScript","AppleScript",
"Asp","BASIC","C","C++","Clojure","COBOL",
"ColdFusion«,"Erlang","Fortran","Groovy","Haskell",
"Java","JavaScript«,"Lisp","Perl","PHP","Python",
"Ruby","Scala","Scheme"];
$( "#tags" ).autocomplete({
source: availableTags
});
});
……
Página 20

21. Widgets
• Button
– Split button
• Un ejemplo es un botón construido con 2 botones: un
botón plano con texto y uno con un icono primario.
Ambos están agrupados juntos en un set.
– Toolbar
• Una barra multimedia. Tiene unos pocos elementos de
tipo botón, una casilla de comprobación y tres
elementos de tipo radio para opciones de repetición.
Página 21

22. Widgets: Ejemplos
Split Button
……
$(function() {
$( "#rerun" )
.button()
.click(function() {
alert( "Running the last action" );
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
……
Página 22

23. Widgets: Ejemplos
Toolbar
……
$(function() {
$( "#beginning" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#rewind" ).button({
text: false,
icons: {
primary: "ui-icon-seek-prev"
}
});
……
Página 23

24. Widgets
• Datepicker
– Animations
• Usa diferentes animaciones cuando se abre o se cierra el
almanaque.
– Display Month and year menus
• Muestra el mes y el año de manera desplegable en lugar del
almanaque estático, para facilitar la navegación a través de
largos intervalos de tiempo.
– Format date
• Muestra los formatos de la fecha de diferentes maneras. Te
permite escoger el que quieras de una lista predefinida.
Página 24

25. Widgets: Ejemplos
Animations
……
$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim",
$( this ).val() );
});
});
……
<p>Animations:<br>
<select id="anim">
<option value="show">Show (default)</option>
<option value="slideDown">Slide down</option>
<option value="fadeIn">Fade in</option>
<option value="blind">Blind (UI Effect)</option>
……
Página 25

26. Widgets
Display Month and Year Menus
……
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
……
Página 26

27. Widgets
Format Date
……
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat",
$( this ).val() );
});
});
......
<p>Format options:<br>
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
……
Página 27

28. Widgets
• Dialog
– Modal Form
• Usa un cuadro de diálogo para requerir la introducción
de datos por parte del usuario en un proceso de
múltiples pasos.
Página 28

29. Widgets: Ejemplos
Modal Form
……
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name“
value="Jane Smith” class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password"
value="xxxxxxx" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute;
top:-1000px">
</fieldset>
</form>
</div>
……
Página 29

30. Widgets: Ejemplos
Progessbar
Download Dialog
……
<div id="dialog" title="File Download">
<div class="progress-label">Starting download...</div>
<div id="progressbar"></div>
</div>
<button id="downloadButton">Start Download</button>
……
Página 30

31. Widgets
• Select Menu
– Custom Rendering
• El proceso de renderizado se extiende para realizar
estilos propios tan fáciles como sea posible.
Página 31

32. Widgets: Ejemplos
Custom Rendering
……
<form action="#">
<h2>Selectmenu with framework icons</h2>
<fieldset>
<label for="filesA">Select a File:</label>
<select name="filesA" id="filesA">
<option value="jquery" data-class="ui-icon-script">
jQuery.js</option>
<option value="jquerylogo“
data-class="ui-icon-image">jQuery Logo</option>
<option value="jqueryui“
data-class="ui-icon-script">ui.jQuery.js</option>
<option value="jqueryuilogo" selected="selected"
data-class="ui-icon-image">jQuery UI Logo</option>
<option value="somefile" disabled="disabled"
data-class="ui-icon-help">Some unknown file
</option>
</select>
</fieldset>
……
Página 32

33. Widgets
• Spinner
– Map
• Integración de Google Maps usando los “spinners” para
cambiar la latitud y la longitud.
Página 33

34. Widgets: Ejemplos
Map
……
$(function() {
function latlong() {
return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
}
function position() {
map.setCenter( latlong() );
}
$( "#lat, #lng" ).spinner({
step: .001,
change: position,
stop: position
});
var map = new google.maps.Map( $("#map")[0], {
zoom: 8,
center: latlong(),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
……
Página 34

35. Widgets: Ejemplos
Tabs
Simple Manipulation
……
<div id="dialog" title="Tab data">
<form>
<fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title“
value="Tab Title“
class="ui-widget-content ui-corner-all">
<label for="tab_content">Content</label>
<textarea name="tab_content" id="tab_content“
class="ui-widget-content ui-corner-all">
Tab content</textarea>
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
……
Página 35

36. Widgets
• Tooltip
– Custom Content
• Muestra cómo combinar diferentes eventos de entorno
delegados dentro de una simple instancia.
– Custom Styling
• Ceñirse al uso de los links o al uso de la tecla “Tab” para
enfocarse en cada elemento.
Página 36

37. Widgets: Ejemplos
Custom Content
……
$(function() {
$( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain
&sensor=false&center=" + text + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
});
……
Página 37

38. Widgets: Ejemplos
Custom Styling
……
$(function() {
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
……
Página 38

39. Efectos Visuales
• Efectos
– Toggle Effects
• Aplicar un efecto de animación a un elemento.
Página 39

40. Effects: Ejemplos
Toggle Effects
……
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem.
Sed pede. Nulla lorem metus, adipiscing ut, luctus sed,
hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
……
Página 40

41. Efectos Visuales
• Utilidades
– Position
• Posicionar un elemento relativo a la ventana,
documento, otro elemento o el cursor del ratón.
– Widget Factory
• Crear plugins en jQuery usando la misma abstracción
que todos los widgets de jQuery UI.
Página 41

42. Utilidades
• Position
– ImageCycler (Carrusel)
• Un prototipo para visualizar imágenes usando la
posición para encuadrarlas en el centro, izquierda y
derecha y poder ciclarlas.
Página 42

43. Utilidades: Ejemplos
ImageCycler (Carrusel)
……
$(function() {
function left( element, using ) {
element.position({
my: "right middle",
at: "left+25 middle",
of: "#container",
collision: "none",
using: using
});
}
function right( element, using ) {
element.position({
my: "left middle",
at: "right-25 middle",
of: "#container",
collision: "none",
using: using
});
}
……
Página 43

44. Utilidades: Ejemplos
Widget Factory
……
<div>
<div id="my-widget1">color me</div>
<div id="my-widget2">color me</div>
<div id="my-widget3">color me</div>
<button id="disable">Toggle disabled option</button>
<button id="green">Go green</button>
</div>
……
Página 44

45. Conclusiones
jQuery UI es una interfaz muy interactiva con la
que dotar a cualquier proyecto de un estilo
atractivo e interesante de cara al usuario final.
Creemos que su aplicación, combinada con otro
estilo como Bootstrap, dotaría a una aplicación
de una interfaz llamativa, a la vez que eficiente.
Página 45