Jsesion 6

Curso de JQuery
SESION 6
1 - Ajax: mtodos ajaxStart y ajaxStop

Estos dos mtodos se pueden asociar a un objeto de tipo jQuery, tienen como
parmetro una funcin:
ajaxStart([funcin])
La funcin de ajaxStart se dispara cuando se inicia la peticin al servidor y nos
puede servir para mostrar en pantalla al usuario que estn llegando datos del
servidor.
ajaxStop([funcin])
Se dispara esta funcin cuando finaliza la peticin de datos al servidor.
Problema: Confeccionar un problema que muestre una lista de hipervnculos con
los distintos signos del horscopo y luego al ser presionado no recargue la pgina
completa sino que se enve una peticin al servidor y el mismo retorne la
informacin de dicho signo, luego se actualice solo el contenido de un div del
archivo HTML.
Mostrar un gif animado mientras los datos no llegaron del servidor.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Signos del horscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
1
Curso de JQuery
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>

<p><a
id="enlace10"
href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#menu a");
x.click(presionEnlace);
}
function presionEnlace()
{
var pagina=$(this).attr("href");
var x=$("#detalles");
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false;
}
function inicioEnvio()
{
x.html('<img src="../cargando.gif">');
}
pagina1.php
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_REQUEST['cod']==1)
echo "<strong>Aries:</strong> Hoy los cambios sern
fsicos,
personales, de carcter, Te sentirs impulsivo y tomars
iniciativas. Perodo en donde considerars unirte a
agrupaciones
de beneficencia, o de ayuda a los dems.";
2
Curso de JQuery
echo "<strong>Tauro:</strong> Hoy los cambios sern
privados,
ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares
de retiro. Tu
cnyuge puede aportar buen status a tu vida o apoyo a tu
profesin.";
echo "<strong>Gminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con
ellos. Da esperanzado,
ilusiones. Mucha energa sexual y fuerza emocional. Deseos
difciles
de controlar.";
echo "<strong>Cancer:</strong> Este da la profesin
y las relaciones con superiores y con tu madre sern de
importancia. Actividad
en relacin a estos temas. Momentos positivos con
compaeros de
trabajo. Actividad laboral agradable.";
echo "<strong>Leo:</strong> Este da los estudios, los
viajes, el extranjero y la espiritualidad sern lo
importante. Pensamientos,
religin y filosofa tambin. Vivencias krmicas de
la poca te vuelven responsable tomando decisiones.";
echo "<strong>Virgo:</strong> Para este da toma
importancia
tu vida sexual, tal vez miedos, temas legales, juicios o
herencias. Experiencias
extraas. Hay karma de prueba durante este perodo en tu
parte psicolgica,
generndose algunos replanteos.";
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver
con
tu pareja, tambin con socios, con la gente o el pblico.
Ellos
sern lo ms importante del da. Ganancias a travs
de especulaciones o del juego. Actividades vocacionales
artsticas.";
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que
ver
con temas de trabajo y de salud. Presta atencin a ambos.
Experiencias
3
Curso de JQuery
diversas con compaeros. Durante este perodo tendrs

muchos
recursos para ganar dinero.";
echo "<strong>Sagitario:</strong> Durante este da se
vivirn cambios en relacin a los noviazgos o a los hijos.
Creatividad,
actividad, diversiones y salidas. Perodo de encuentros con
personas o
situaciones que te impresionan.";
echo "<strong>Capricornio:</strong> Los cambios del da
tienen que ver con tu hogar, con la convivencia y con el
padre. Asuntos relativos
al carcter en la convivencia. El karma de responsabilidad
de estos momentos
te acercar al mundo de lo desconocido, mucha madurez y
contacto con el
ms all.";
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que
ver
con el entorno inmediato, hermanos y vecinos, con la
comunicacin, los
viajes cortos o traslados frecuentes. El hablar y
trasladarse ser importante
hoy. Mentalidad e ideas activas.";
echo "<strong>Piscis:</strong> Durante este da se vivirn
cambios en la economa, movimientos en los ingresos,
negocios, valores.
Momentos de gran fuerza y decisin profesionales, buscars
el liderazgo.";
sleep(1);
?>
estilos.css
#menu {
font-family: Arial;
margin:5px;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
4
Curso de JQuery
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}
#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}
#menu a:hover {
background-color: #369;
color: #fff;
}
#detalles {
background-color:#ffc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
Lo nuevo en este problema es que llamamos al mtodo ajaxStart con el mismo
objeto jQuery que llama al mtodo load:
function presionEnlace()
{
var pagina=$(this).attr("href");
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false;
}
Luego cuando se activa la peticin de la pgina al servidor el objeto jQuery llama a
la funcin inicioEvento, donde mostramos el gif animado:
{
}
5
Curso de JQuery
No ocultamos el gif animado ya que se est mostrando en el div #detalles. Dicho

div ser inicializado por el objeto jQuery con los datos enviados por el servidor y
borrar el elemento img.
2 - $.get y $.post(Pasando datos al servidor por los mtodos GET y POST)

Utilizamos estas funciones cuando no queremos inyectar directamente los datos a
nuestra pgina, sino que queremos procesarlos y eventualmente agregarlos en
distintas partes.
La sintaxis de la funcin $.get es distinta a la ya utilizada $, en este caso es una
funcin global de la librera jQuery:
$.get([nombre de la pgina],[parmetros a enviarse por el mtodo
get],[funcin que recibe los datos del servidor])
Tambin podemos llamarla:
jQuery.get([nombre de la pgina],[parmetros a enviarse
mtodo get],[funcin que recibe los datos del servidor])
por
el
La funcin $.post es idntica a la funcin $.get, lo nico que difiere es como el

protocolo HTTP empaqueta los datos y los enva al servidor. Normalmente se
utiliza la funcin $.post, ya que no est limitado a la cantidad de datos que se
pueden enviar al servidor.
Problema: Implementar una aplicacin que calcule el cuadrado de un nmero que
ingresamos por teclado. La operacin se realiza en el servidor, le enviamos los
datos mediante la funcin de jQuery $.get
pagina1.html
<html>
<head>
</head>
<body>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro"
size="10"><br>
<input type="submit" value="Calcular el cuadrado"
id="enviar">
<div id="resultados"></div>
</form>
</body>
</html>
6
Curso de JQuery
funciones.js
var x;
x=$(document);
{
var x;
x=$("#enviar");
x.click(presionSubmit);
}
function presionSubmit()
{
var v=$("#nro").val();
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}
function llegadaDatos(datos)
{
alert(datos);
}
pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>
Veamos el cdigo JavaScript para comunicarse con el servidor:
Primero en la funcin inicializarEventos enlazamos el evento click al botn submit
del formulario:
{
var x;
x=$("#enviar");
}
Cuando presionamos el botn extraemos el valor del control text y llamamos a la
funcin $.get indicando el nombre de la pgina a llamar, un objeto literal con todos
los parmetros y sus valores (en este caso solo tenemos un parmetro llamado
numero) y finalmente el nombre de la funcin que se ejecutar cuando lleguen los
datos del servidor:
7
Curso de JQuery
{
var v=$("#nro").attr("value");
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}
La funcin que se ejecuta cuando llegan los datos del servidor recibe un string:
{
alert(datos);
}
3 - $.getJSON
La funcin getJSON hace una peticin de datos al servidor considerando que
retorna la informacin con notacin JSON. La sintaxis de esta funcin es:
$.getJSON([nombre de la pgina], [parmetros], [funcin que
recibe los datos])
La funcin getJSON procede a generar un objeto en JavaScript y nosotros en la
funcin lo procesamos.
Problema:Confeccionar un sitio que permita ingresar el documento de una
persona y nos retorne su apellido, nombre y lugar donde debe votar.
pagina1.html
<html>
<head>
</head>
<body>
Ingrese dni (solo existen los valores 1,2 y 3):<input
type="text"
name="dni" id="dni" size="10"><br>
<input type="button" value="Enviar" id="boton1">
</body>
</html>
funciones.js
var x;
x=$(document);
8
Curso de JQuery
{
var x;
x=$("#boton1");
}
{
var v=$("#dni").val();
$.getJSON("pagina1.php",{dni:v},llegadaDatos);
return false;
}
{
$("#resultados").html("Nombre:"+datos.nombre+
"<br>"+"Apellido:"+
datos.apellido+"<br>"+
"Direccion:"+datos.direccion);
}
pagina1.php
<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
if ($_REQUEST['dni']=='1')
{
$nombre='Juan';
$apellido='Rodriguez';
$direccion='Colon 123';
}
{
$nombre='Ana';
$apellido='Maldonado';
$direccion='Lima 245';
}
{
$nombre='laura';
$apellido='Pueyrredon';
$direccion='Laprida 785';
}
9
Curso de JQuery
echo "{
'nombre':'$nombre',
'apellido':'$apellido',
'direccion':'$direccion'
}";
?>
Cuando se presiona el botn submit procedemos a realizar la peticin asincrnica
utilizando la funcin getJSON:
{
var v=$("#dni").attr("value");
$.getJSON("pagina1.php",{dni:v},llegadaDatos);
return false;
}
Como hemos llamado a la funcin getJSON la misma nos retorna un objeto
JavaScript para procesarlo:
{
$("#resultados").html("Nombre:"+datos.nombre+
"<br>"+"Apellido:"+
datos.apellido+"<br>"+
"Direccion:"+datos.direccion);
}
Tengamos en cuenta que el programa en el servidor debe retornar un archivo con
notacin JSON:
<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
{
$nombre='Juan';
$apellido='Rodriguez';
$direccion='Colon 123';
}
{
$nombre='Ana';
$apellido='Maldonado';
$direccion='Lima 245';
}
10
Curso de JQuery
{
$nombre='laura';
$apellido='Pueyrredon';
$direccion='Laprida 785';
}
echo "{
'nombre':'$nombre',
'apellido':'$apellido',
'direccion':'$direccion'
}";
?>
4 - $.ajax
Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y
enviar datos al servidor utilizando ajax:
1. Mtodo load
2. Funciones $.get y $.post
3. $.getJSON
Existe otra funcin llamada $.ajax que es la ms completa de todas, pero como
desventaja es ms compleja su empleo.
La sintaxis de la funcin $.ajax es:
ajax([objeto literal])
Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo.
Con un ejemplo veremos las propiedades principales que podemos configurar en el
parmetro a enviar.
Problema:Implementar una aplicacin que calcule el cuadrado de un nmero que
ingresamos por teclado. La operacin se realiza en el servidor, le enviamos los
datos mediante la funcin de jQuery $.ajax
pagina1.html
<html>
<head>
</head>
<body>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro"
size="10"><br>
11
Curso de JQuery
<input type="submit" value="Calcular el cuadrado"

id="enviar">
</form>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("#enviar");
}
{
$.ajax({
async:true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url:"pagina1.php",
data:"numero="+v,
beforeSend:inicioEnvio,
success:llegadaDatos,
timeout:4000,
error:problemas
});
return false;
}
{
var x=$("#resultados");
}
{
$("#resultados").text(datos);
}
12
Curso de JQuery
function problemas()
{
$("#resultados").text('Problemas en el servidor.');
}
pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>
Veamos que datos podemos enviarle a la funcin $.ajax:
{
$.ajax({
async:true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url:"pagina1.php",
data:"numero="+v,
beforeSend:inicioEnvio,
success:llegadaDatos,
timeout:4000,
error:problemas
});
return false;
}
Hemos inicializado las siguientes propiedades:
async : Indica si la comunicacin ser asincrnica (true) o sincrnica (false)
type : Indica el mtodo que se envan los datos (pudiendo ser GET o POST)
dataType : Indica el tipo de datos que se va a recuperar (pudiendo ser
"html","xml","json","script")
contentType : Indicamos como se empaquetan los datos para enviarlos al
servidor (normalmente "application/x-www-form-urlencoded")
url : Indicamos el nombre de la pgina que procesar la peticin de datos.
data : Indicamos los datos a enviar al servidor.
beforeSend : Indicamos el nombre de la funcin que se ejecutar previo al
envo de datos (en nuestro ejemplo mostramos el gif animado que indica que
se inici el pedido de datos al servidor)
success : Indicamos la funcin que se ejecuta cuando finaliz el envo de
datos del servidor y adems ocurri todo en forma correcta (en nuestro
ejemplo recuperamos el dato devuelto y lo mostramos en la pgina)
timeout : El tiempo mximo a esperar por la peticin de datos.
13
Curso de JQuery
error : El nombre de la funcin que se ejecuta si los datos no llegan del

servidor.
5 - Funciones annimas en nuestro cdigo.

Si visitamos sitios sobre jQuery podremos comprobar que la sintaxis empleada es
mucho ms compacta que todos los ejemplos que venimos viendo. El objetivo de
este tutorial es aprender jQuery de una forma sencilla, pero estara inconcluso si
no introducimos la forma ms habitual de programar con jQuery (funciones
annimas y encadenamiento de llamadas con el objeto jQuery)
Veamos como se organiza nuestro cdigo utilizando funciones annimas.
Problema: Confeccionar una pgina que muestre dos ttulos de primer nivel, al ser
presionados cambiar el color de fuente, fondo y la fuente del texto.
pagina1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
</head>
<body>
<h1 id="titulo1">Primer ttulo</h1>
<h1 id="titulo2">Segundo ttulo</h1>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(function(){
var x;
x=$("#titulo1");
x.click(function() {
var x;
x=$("#titulo1");
x.css("color","#ff0000");
x.css("background-color","#ffff00");
x.css("font-family","Courier");
});
x=$("#titulo2");
x.click(function () {
var x;
14
Curso de JQuery
x=$("#titulo2");
x.css("color","#ffff00");
x.css("background-color","#ff0000");
x.css("font-family","Arial");
});
})
Como podemos observar el cdigo a quedado mucho ms compacto.
Normalmente uno utiliza funciones annimos cuando el algoritmo contenido en la
funcin solo se requiere para dicho evento.
La sintaxis para definir una funcin annima:
x.ready(function(){
......
})
Como vemos llamamos al mtodo ready y entre parntesis incluimos la funcin tal
como las venimos implementando en conceptos anteriores pero sin nombre.
Tambin es interesante ver que podemos disponer otras funciones annimos
dentro de una funcin annima:
x.click(function () {
......
});
6 - Llamadas encadenadas de mtodos del objeto jQuery.

Otra caracterstica muy utilizada en la librera jQuery es la llamada sucesiva de
mtodos, esto se puede hacer ya que casi todos los mtodos de la clase jQuery
retornan un objeto de tipo jQuery.
Para entender esta sintaxis implementaremos un problema.
Problema:Confeccionar una pgina que muestre un recuadro con texto. Disponer
dos botones, uno que cambie la opacidad lentamente hasta el valor 0.5,
seguidamente oculte el recuadro tambin lentamente, y el otro botn que lo
muestre en forma instantnea y aumente su opacidad al 100%.
pagina1.html
<html>
<head>
</head>
<body>
15
Curso de JQuery
<input type="button" id="boton1" value="Reducir opacidad

y ocultar">
<input type="button" id="boton2" value="Mostrar en
forma instantnea">
<div id="descripcion" class="recuadro">
<p>HTML es el lenguaje que se emplea para el desarrollo de
pginas de internet.</p>
<p>Este lenguaje est constituido de elementos que el
navegador interpreta
y las despliega en la pantalla de acuerdo a su objetivo.
Veremos que hay elementos
para disponer imgenes sobre una pgina, hipervnculos que
nos permiten dirigirnos a otra pgina, listas, tablas para
tabular datos,
etc.</b><p>Para poder crear una pgina HTML se requiere un
simple editor
de texto (en nuestro caso emplearemos este sitio) y un
navegador de internet (IExplorer,
FireFox etc.), emplearemos el navegador que en este preciso
momento est
utilizando (recuerde que usted est viendo en este preciso
momento una
pgina HTML con su navegador).</p>
<p>Lo ms importante es que en cada concepto desarrolle los
ejercicios
propuestos y modifique los que se presentan ya resueltos.<p>
<p>Este curso lo que busca es acercar el lenguaje HTML a una
persona que
nunca antes trabaj con el mismo. No pretende mostrar todas
los elementos
HTML en forma alfabtica.</p>
<p>Como veremos, de cada concepto se presenta una parte
terica,
en la que se da una explicacin completa, luego se pasa a la
seccin
del ejercicio resuelto donde podemos ver el contenido de la
pgina HTML
y cmo la visualiza el navegador. Por ltimo y tal vez la
seccin
ms importante de este tutorial es donde se propone que usted
haga pginas
en forma autnoma (donde realmente podr darse cuenta si el
concepto
qued firme).</p>
</div>
</body>
</html>
16
Curso de JQuery
funciones.js
$(document).ready(function () {
$("#boton1").click(function () {
$("#descripcion").fadeTo("slow",0.5).hide("slow");
});
$("#descripcion").show().fadeTo("slow",1);
})
})
estilos.css
.recuadro {
background-color:#ffffcc;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Como podemos observar en la siguiente lnea tenemos llamadas encadenadas:
estilos.css
.recuadro {
background-color:#ffffcc;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
17
Curso de JQuery
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Primero obtenemos la referencia del id descripcion, la funcin $ nos retorna un
objeto jQuery que utilizamos directamente para llamar al mtodo fadeTo para
aumentar su opacidad lentamente. Seguidamente el mtodo fadeTo nos retorna la
referencia del objeto jQuery y la utilizamos para llamar al mtodo hide indicndole
que oculte el div lentamente.
Es importante notar que los mtodos se ejecutan de izquierda a derecha.
Recordemos como era nuestro cdigo cuando comenzamos a estudiar jQuery:
var x;
x=$(document);
{
var x=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
}
function ocultarRecuadro()
{
var x=$("#descripcion");
x.fadeTo("slow",0.5);
x.hide("slow");
}
function mostrarRecuadro()
{
var x=$("#descripcion");
x.show();
x.fadeTo("slow",1);
}
Con funciones annimas y encadenamiento de llamadas a mtodos:

});
18
Curso de JQuery
$("#descripcion").show().fadeTo("slow",1);
})
})
Luego de haber estudiado jQuery con la metodologa larga no debera ser muy
difcil adaptarse a esta metodologa resumida.
7 - Mostrar un tooltip con datos recuperados del servidor en forma

asincrnica
Implementaremos un problema utilizando todos los conceptos aprendidos hasta
ahora.
Problema: Implementar un Tooltip con jQuery recuperando la informacin a
mostrar del servidor en forma asincrnica.
Agregar una imagen al tooltip. En el servidor ya hay cuatro imgenes llamadas
imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente
superior a donde se almacenan las pginas. ( <img src="../imagen1.jpg"> )
pagina1.html
<html>
<head>
</head>
<body>
<p>Entre con el mouse al recuadro.</p>
<div class="cuadradito" id="c1"></div>
</body>
</html>
estilos.css
.cuadradito{
background-color: #f00;
height: 50px;
width: 50px;
margin:3px;
z-index: -1;
}
19
Curso de JQuery
#divmensaje {
background-color: yellow;
position: absolute;
padding: 5px;
width:250px;
left:120px;
top:100px;
z-index: 100;
}
funciones.js
$("body").append('<div id="divmensaje">hhhh</div>');
$("#divmensaje").hide();
$(".cuadradito").hover(function (e) {
$("#divmensaje").show();
$("#divmensaje").css("left",e.clientX+document.body.scrollLef
t+5);
$("#divmensaje").css("top",e.clientY+document.body.scrollTop+
5);
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
function () {
})
$(".cuadradito").mousemove(function (e){
t+5);
5);
})
})
pagina1.php
<?php
if ($_REQUEST['cod']=='c1')
{
echo "<img src=\"../imagen1.jpg\">";
echo "<p>Primer tooltip.</p>";
echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa
aaaaaaaaaa";
20
Curso de JQuery
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa

aaaaaaaaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa
aaaaaaa";
echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa
aaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa
aaaaaaaaaaaaaaaa</p>";
}
{
echo "<p>Segundo tooltip.</p>";
echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb
bbbbbbbbbbb bb";
echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb
bbbbbbbbbbb bbb</p>";
}
{
echo "<p>Tercer tooltip.</p>";
}
{
echo "<p>Cuarto tooltip.</p>";
}
?>
Como podemos ver el cdigo JavaScript utilizando la librera jQuery queda muy
compacto y reducido:
$("body").append('<div id="divmensaje">hhhh</div>');
$(".cuadradito").hover(function (e) {
$("#divmensaje").show();
t+5);
5);
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
21
Curso de JQuery
function () {
})
$(".cuadradito").mousemove(function (e){
t+5);
5);
})
})
22

Jsesion 6

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Jsesion 6

Transféré par

Droits d'auteur :

Formats disponibles

Curso de JQuery

1 - Ajax: mtodos ajaxStart y ajaxStop

<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>

diversas con compaeros. Durante este perodo tendrs

No ocultamos el gif animado ya que se est mostrando en el div #detalles. Dicho

2 - $.get y $.post(Pasando datos al servidor por los mtodos GET y POST)

La funcin $.post es idntica a la funcin $.get, lo nico que difiere es como el

<input type="submit" value="Calcular el cuadrado"

error : El nombre de la funcin que se ejecuta si los datos no llegan del

5 - Funciones annimas en nuestro cdigo.

6 - Llamadas encadenadas de mtodos del objeto jQuery.

<input type="button" id="boton1" value="Reducir opacidad

Con funciones annimas y encadenamiento de llamadas a mtodos:

7 - Mostrar un tooltip con datos recuperados del servidor en forma

echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa

Vous aimerez peut-être aussi