lunes, 22 de junio de 2009

Primer Ejemplo con JQuery

logo_jquery_215x53.gif





¿JQuery?


JQuery es una biblioteca para Javascript que nos ahorrará mucho código. Nos permitirá asociar acciones a un tipo concreto de elemento (enlaces, tablas, listas, ...), inteactuar con AJAX, etc (más información aquí).





Un ejemplo


Veremos como al pulsar sobre un enlace cualquiera, se oculte o se muestre una capa de nuestra página.


Para este ejemplo necesitamos los siguiente:



  • Un servidor web (yo uso Apache instalado mediante XAMPP).

  • La librería jquery (es un archivo.js). Enlace.

  • El StarterKit, para hacer ejemplos rápidamente. Enlace.


En el directorio del servidor (en mi caso C:\xampp\htdocs) tendremos guardar el archivo jquery.js que hemos descargado. También los archivos del Starterkit.


Nos fijamos en que StarterKit.html contiene los includes de los .js:




<script src="jquery.js" type="text/javascript"></script>

<script src="custom.js" type="text/javascript"></script>


El archivo custom.js es el que usaremos para realizar nuestras funciones. En éste ejemplo veremos como ocultar un texto con el efecto de barrido. Para ello custom.js será así:




$(document).ready(function(){ //Línea 1

$("a").toggle(function(){ //Línea 2

$(".stuff").hide('slow'); //Línea 3

},function(){ //Línea 4

$(".stuff").show('fast'); //Línea 5

});

});



Explicación:


Línea 1: Cuando el documento está preparado registra un evento.


Línea 2: Al pulsar sobre cualquier enlace (por eso la variable a) realiza la línea 3.


Línea 3: La capa "stuff" se esconde lentamente.


Línea 4: Al pulsar de nuevo sobre un enlace.


Línea 5: La capa "stuff" se mestra rápidamente.


Para problarlo pondremos en nuestro navegador http://localhost/starterkit.html y pulsamos en un enlace cualquiera.





Fuentes


http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery




Sea el primero en comentar

Publicar un comentario

Felinfo: Java, Linux, Virtualización. Open Source.  ©Template Blogger Green by Dicas Blogger .

TOPO