7

La primera aplicacin jQuery
Para entrar en materia, vamos a hacer un men de navegacin vertical desplegable.

Aqu el objetivo no es entender los mtodos jQuery, que se estudiarn ms adelantes, sino tener una
visin general de la implantacin y organizacin general de los scripts jQuery. El objetivo de esta
primera aplicacin es familiarizarse con el enfoque que sigue el autor, en nuestra exploracin de
jQuery.
Se presenta de la siguiente manera el archivo Html de inicio:
<!DOCTYPE html>
<html lang="es">
<head>
<meta ="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("div.menu_punto").hide();
$("p.menu_capitulo").click(function(){
$(this).next("div.menu_punto").slideDown(300)
.siblings("div.menu_punto").slideUp("slow");
});
});
</script>
<style>
body { margin: 10px;

font: 0.8em Arial, Helvetica, sans-serif;}
.menu { width: 150px;}
.menu_capitulo { padding: 5px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #9cf;
border: 1px solid black;}
.menu_punto a { display:block;
color:black;
background-color:white;
padding-left:30px;
text-decoration:none;}
.menu_punto a:hover { color: black;
text-decoration:underline;}
</style>
</head>
<body>
<div>
<div class="menu">
<p class="menu_capitulo">Captulo 1</p>
<div class="menu_punto">
<a href="#">Punto 1</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ahora vamos a construir el script jQuery paso a paso.

Suponemos que la librera jquery.js se ha descargado e incorporado en el directorio que contiene el
archivo Html anterior.
Llamamos a jQuery, poniendo entre las etiquetas <head> y </head> la siguiente etiqueta de
encabezado.
El script puede empezar.
<script>
...
});
</script>
Con esta primera instruccin jQuery, se carga el rbol del DOM relativo al documento en un objeto
jQuery.
Hay que hacer una primera operacin que consiste en no visualizar solo los submens, es decir, las
divisiones cuya clase es menu_punto.
<script>
...
});
</script>
De
esta
manera,
jQuery
($)
selecciona
estas
es menu_punto(("div.menu_punto")) y las oculta (hide()).
divisiones
<div>,
cuya
clase
Pasemos ahora a la parte que se encarga de desplegar el submen cuando se pulsa uno de los
captulos.
<script>
});
});
Detallemos esta parte:
Hacer
clic en
uno
de
los
prrafos
cuya
clase
es
menu_capitulo (de
manera
codificada $("p.menu_capitulo")), genera una funcin que se detallar en las siguientes lneas
(click(function()).
A partir de este elemento (this), el script busca el elemento <div> que le sigue y que tiene la
clase menu_punto(es decir, next("div.menu_punto")). Despus hacemos aparecer esta divisin con
un efecto de deslizamiento hacia abajo (slideDown(300)).
Hay que cerrar las divisiones abiertas de los otros captulos. Se pide a jQuery seleccionar los hermanos
inmediatos
(siblings)
de
cada
divisin
<div>
que
tenga
una
clase menu_punto(siblings("div.menu_punto")) y cerrar estas divisiones usando un efecto de
deslizamiento hacia arriba (slideUp("slow")).
Observe que se han codificado muchas acciones en una misma instruccin. Estas diferentes
operaciones se unen simplemente por un punto.
});
Para terminar esta funcin relativa a un clic en un prrafo.
});
Fin del ready y fin de script.
Observe cmo de conciso es el cdigo jQuery. Unas pocas lneas son suficientes para desarrollar este
script.
El archivo Html completo se presenta de la siguiente manera:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script>
});
});
</script>
<style>
body { margin: 10px;
font: 0.8em Arial, Helvetica, sans-serif;}
.menu { width: 150px;}

.menu_capitulo { padding: 5px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #9cf;
border: 1px solid black;}
.menu_punto a { display:block;
color:black;
background-color:white;
padding-left:30px;
text-decoration:none;}
.menu_punto a:hover { color: black;
text-decoration:underline;}
</style>
</head>
<body>
<div>
<div class="menu">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

7

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

7

Diunggah oleh

Hak Cipta:

Format Tersedia

La primera aplicacin jQuery

Para entrar en materia, vamos a hacer un men de navegacin vertical desplegable.

Se presenta de la siguiente manera el archivo Html de inicio:

body { margin: 10px;

Ahora vamos a construir el script jQuery paso a paso.

.menu { width: 150px;}

Anda mungkin juga menyukai