Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

JQuery UI

No description
by

Guille Difabio

on 2 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JQuery UI

JQuery UI
Librería de componentes para el framework jQuery
Ejemplo de JQuery UI
Ejemplo de JQuery UI
"transformar" la página original.

Manipula dinámicamente contenido de un documento html mediante JavaScript

Orientada a Objetos
JavaScript.
Interactuar con los documentos HTML
Manipular el árbol DOM
Agregar interacción con la técnica AJAX.
Desarrollar animaciones


Combinación de tecnologías ya existentes:
JavaScript.
HTML.
XML
CSS


Enviar formularios sin recargar
Actualmente, JQuery UI, es compatible con todas las ultimas versiones de browsers
Existen dos versiones de jQuery UI que podemos seleccionar. La versión más moderna es la 1.8.1, que funciona sobre jQuery 1.4+ y la versión 1.7.3, más antigua, que funciona sobre jQuery 1.3.2.

Primero, debemos descargar JQuery UI, desde la siguiente dirección:
http://jqueryui.com/download
Luego de descargar las librerías deseadas, solo tenemos que insertarlas en nuestro HTML
Aplicando JQuery a nuestros elementos
Un ejemplo de como crear un date picker
Código en HTML
Código en JS
Y el resultado seria
Ajax Funcionamiento
DOM(Document Object Model)
Ejemplo:
AJAX
(Asynchronous
JavaScript and XML)
Aplicaciones Web
Ejemplos:
Iniciando con JQuery UI
Es un servicio web que nos permite
escuchar música de forma gratuita
sin ningún tipo de instalación o registro.
Qué es Grooveshark?
Utiliza jQuery UI para cosas tan clásicas y necesarias como:

Autocomplete
Controles “corredores” (sliders)
Selectores de fechas (Datepicker)
Arrastrar y soltar
SlickGrid
widgets: drag & drop
En el siguiente ejemplo, vamos a generar div, que se va a desplegar
Utilizamos las librerias online de JQuery y JQuery UI.
Y luego definimos los estilos que tendra nuestro div.
Luego, definimos el body de nuestro HTML, con el div que vamos plegar y desplegar
Le damos las propiedades de estilo que hayamos definido antes, y creamos un boton que va a ejecutar el efecto
Ejemplo de JQuery UI
Luego definimos una función en la sección <script>
La función de ejecutarToggle, le da el efecto toggle al div
Y luego definimos que para el evento click, del elemento de id button, se va ejecutar la función que definimos anteriormente.
Ejemplo JQuery UI
El resultado, seria algo asi:
Al tocar el boton, se va a desplegar o plegar el div.
La función ajax()
async
url
dataType(xml, html, script)
success
timeout
Parámetros que acepta:
Ejemplo:
<script type="text/javascript">
var milisegundos = 5000;
tiempo = setTimeout("time()", milisegundos);
document.getElementById("texto").innerHTML = "Espere, por favor...";

function time() {
tiempo = setTimeout("time()", milisegundos);
if (milisegundos)
{
document.getElementById("texto").innerHTML = "Ya se ha cargado el Ajax";
}
}
</script>
<b id="texto"></b>
Ejemplo:

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">

$(document).ready(function() {

$("#caja").css({
width: "200px",
height: "15px",
backgroundColor: "yellow",
borderStyle: "solid",
borderColor: "blue",
borderWidth: "3px",
fontFamily: "Verdana",
padding: "20px",
fontSize: "12px",
textAlign: "center",
color: "blue"
});



$(":button#boton").click(function(){
$.ajax({
url: "ajax.html",
dataType: "html",
success: function(datos){
$("#caja").html(datos);
}
});
});
});

</script>
</head>

<body>
<input type="button" id="boton" value="Cargar el Ajax">

<div id="caja"></div>
</body>
</html>
Ventajas de JQuery UI
- Esta desarrollado por el equipo de JQuery, por lo tanto los bugs son reparados con rapidez.
- Brinda una forma sencilla de crear animaciones y efectos.
- Las librearias son bastante pequeñas, por lo que consumen muy poco ancho de banda.
- Tiene una API bien documentada y con un mantenimiento optimo.
Desarrollando con JQuery UI
Los diferentes efectos, interacciones y widgets que provee JQuery Ui, pueden ser parametrizados.
Ejemplo:
En este ejemplo, se le pasa como parametro a la funcion animate, el estilo que va a tener el componente y tambien el tiempo de la transicion.
Para mas detalles de las funciones, esta disponible la documentación :
http://api.jqueryui.com/
JQuery UI
- Se acopla con plugins personales o de terceros.
archivo ajax.html
Alias para trabajar con Jquery :
JQuery ==$

¿Como usar JQuery?
<script type="text/javascript" scr="jquery.js">

Ejemplo de una función:
$(function(){
//codigo
})
JQuery
Selectores:
Similares a los de CSS
JQuery
JQuery
Atributos:

Agregar atributos simple:
$("selector").attr("clave","valor");
Agregar múltiples atributos:
$("selector").attr({clave:"valor",clave:"valor"});
Remover atributo:
$("selector").removeAttr("clave",);
JQuery
Clases: Conjunto de estilos

Agregar clase:
$("selector").addClass("nombreClase");
Remover clase:
$("selector").removeClass("nombreClase");
Remover todas las clases:
$("selector").removeClass();
JQuery
Estilos CSS

Agregar estilo:
$("selector").css("propiedad","valor");

Agregar múltiples estilos:
$("selector").css({
"propiedad":"valor"
"propiedad":"valor"
});
Proyecto de Software
Licenciatura en sistemas
Guillermo Difabio
Gabriela Cayú
Lautaro López
JQuery UI
Es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-ins, widgets y efectos visuales.
FIN DE LA PRESENTACION JQUERY UI
Pagina oficial JQuery: http://jquery.com/
JQuery UI: http://jqueryui.com/

Se divide en 4 módulos:
1- Núcleo.
2- Interacciones.
3- Widgets.
4- Efectos.
Uso de las diferentes tecnologías
¿Qué puedo hacer con jQuery?
Agregar efectos y funcionalidades a nuestra aplicación web:

Galerías de fotos dinámicas y elegantes

Validación de formularios

Calendarios
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
Full transcript