Bienvenido a JQuery
Delibertad es un cuaderno de apuntes de programación en java, php, unix, y otras cosas que han salido con el transcurso de la práctica. Estas anotaciones se han ido acumulando en la pc, por lo cual se han publicado en este sitio, que de pronto, a alguien le puede servir.
Quiero aprovechar este ejemplo para verificar el uso de la sintaxis de repintando de código. Le he puesto algunas funciones para que pueda trabajar sobre esta web. Veamos.
Vamos a ver el uso del .fadeIn() y .fadeOut() de Jquery muy brevemente.
¿Qué es Jquery? Es un framework que nos ofrece una serie de eventos, acciones, efectos y cosas dinámicas creado en Javascript. De pronto pueden mirar el ejemplo de este post para que puedan tener un mayor panorama del término Jquery:
http://www.ejemplos.delibertad.com/jquery/animations/show-hide/
¿Le es familiar? Pues sí, eso es tan solo una minúscula prueba de lo que puede hacer. En fin, manos a la obra.
El ejemplo
Empezaremos creando un archivo html con su debida estructura.
<html>
<head>
<!-- aqui pondremos los archivos js y los css -->
</head>
<body>
<div id="contenedor">
<div id="acciones">
<input type="button" id="mostrar" value="Mostrar" />
<input type="button" id="esconder" value="Esconder" />
</div>
<div id="lienzo">
<p>algo de texto</p>
</div>
</div>
</body>
</html>
Acá tenemos un archivo sencillo, únicamente dos botones: "mostrar" y "esconder" y un poco de texto abajo. Pero, ¿qué tal si aplicamos algo de estilo al contenido? Bueno, crearemos un archivo llamado mx.css, lo guardaremos en el mismo sitio donde tenemos el archivo html. Áca el codigo para el estilo:
#contenedor{
margin: 0 auto;
padding: 20px;
border: solid 1px #ccc;
width: 300px;
}
#acciones{
border-bottom: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
#lienzo{
background-color: yellow;
border: 1px solid blue;
text-align: center;
}
Guardamos! y actualizamos el archivo html incluyendo la hoja de estilo que hemos creado:
<head>
<!-- la hoja de estilo -->
<link type="text/css" rel="stylesheet" href="mx.css" />
</head>
Bien!, ¿Fácil verdad?, pues asi es lo demás también :D. Si vuelven a visualizar la página con el estilo aplicado veran que ya se ve un poco mejor, y se parece a la página de ejemplo de este artículo.
Ahora bien, debemos incluir el archivo jquery.js. Está librería la pueden descargar aquí. Para efectos de este facilidad, descargaremos este el archivo mencionado, y lo guardaremos con el nombre de jquery.js en el mismo lugar donde están el archivo html y la hoja de estilos.
Y sí, hay que incluirlo a la página html:
<head>
<!-- la inclusion de jquery aca -->
<script type="text/javascript" src="jquery.js"></script>
<!-- la hoja de estilos -->
<link type="text/css" rel="stylesheet" href="mx.css" />
</head>
Perfecto! Hagamos una pequeña prueba para corroborar que todos nuestros archivos estén bien y que jquery se ha cargado:
<head>
<!-- la inclusion de jquery aca -->
<script type="text/javascript" src="jquery.js"></script>
<!-- la hoja de estilos -->
<link type="text/css" rel="stylesheet" href="mx.css" />
<!-- codigo de javascript -->
<script type="text/javascript">
$(document).ready( function(){
alert("Hola!");
});
</script>
</head>
Hemos agregado algo de código javascript al documento. Ahora cada vez que se cargue el documento html veras un nuevo mensaje! Lo malo es que después de cierto tiempo resulta aburrido, además, podríamos acomodar ese código de allí en un lugar más ordernado, por ejemplo, un nuevo archivo de javascript.
Crearemos un archivo llamado mx.js junto a los demás documentos que hemos creado y moveremos el código javascript del documento html al nuevo documento llamado mx.js:
$(document).ready( function(){
alert("Hola!");
});
Ahora el documento html quedaría de esta forma incluyendo nuestro nuevo archivo mx.js:
<head>
<!-- la inclusion de jquery aca -->
<script type="text/javascript" src="jquery.js"></script>
<!-- la inclusion de el archivo mx.js -->
<script type="text/javascript" src="mx.js"></script>
<!-- la hoja de estilos -->
<link type="text/css" rel="stylesheet" href="mx.css" />
</head>
Mejor, ¿verdad?. Es hora de poner en práctica las animaciones de fadeOut() y fadeIn(). En el archivo mx.js crearemos una referencia al elemento que tiene como valor "ocultar" en el atribudo de id. Si recuerdan bien, el único elemento que posse esta propiedad es un botón. ¿Qué mejor elemento que un botón para un evento? Un evento, sí, por ejemplo, cuando el usuario le dá click.
Una vez que el usuario le dé click llamaremos a la función fadeOut() para ocultar el elemento que tenga como valor "lienzo" en el atributo de id:
$(document).ready( function(){
$('#ocultar').click(function(){
$('#lienzo').fadeOut('slow');
});
});
Guarden los cambios y prueben... Fino verdad! Hagamos que aparezca de nuevo:
$(document).ready( function(){
$('#mostrar').click(function(){
$('#lienzo').fadeIn('fast');
});
$('#esconder').click(function(){
$('#lienzo').fadeOut('slow');
});
});
Guardan los cambios y recargan la página y tarán!! Hemos hecho una bonita animación con bótones. Las fuentes de este ejemplo la puedes encontrar al lado derecho donde dice "fuentes".
Comentarios