Manual jQuery-Manejar eventos
martes, 14 de diciembre de 2010
, Posted by edukt at 16:17
Hasta el momento el gestor de evento que hemos utilizado es $(document).ready() , a continuación veremos otras formas de ejecutar funciones:
$(document).ready(function() {
// código
});
$().ready(function() {
// código
});
$(function() {
// código
});
jQuery permite además manejar eventos como : clicks(onclick), cambio en los campos de formularios(onchange) o cambios en el tamaño de las ventanas(onresize). En esta entrada del blog crearemos un alternador de estilos.
Para ilustrar algunas de las técnicas de control de eventos, supongamos que queremos tener una sola página presentada en varios estilos en función de la selección del usuario. Vamos a permitir que el usuario haga clic en un botón para alternar entre la vista normal, una vista en la que se ve limitado el texto a una columna estrecha, y una vista con letras grandes para el área de contenido.
El código html es el siguiente:
<!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=utf-8" />
<title>Ejemplo altenador de estilo</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="ejemplo.js" type="text/javascript"></script>
</head>
<body>
<div id="contenedor">
<div id="alternador">
<div class="boton" id="alternador-largo">
Impresión</div>
</div>
<div class="capitulo" id="capitulo-prefacio">
<p>Las tecnologías que forman AJAX son:</p>
▪ XHTML y CSS, para crear una presentación basada en estándares.
▪ DOM, para la interacción y manipulación dinámica de la presentación.
▪ XML, XSLT y JSON, para el intercambio y la manipulación de información.
▪ XMLHttpRequest, para el intercambio asíncrono de información.
▪ JavaScript, para unir todas las demás tecnologías.</p>
</div>
</div>
</div>
</body>
</html>
El archivo estilo.css es el siguiente:@charset "utf-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Arial, Verdana, sans-serif;
color: #000;
background: #FFFFFF;
}
#contenedor {
font-size: 1.2em;
margin: 10px 2em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
h3.subtÃtulo {
color:#FFFFFF;
font:bold;
}
.capitulo {
margin: 1em;
}
#alternador {
float: right;
background-color: #3300FF;
border: 1px solid #000;
margin: 10px;
padding: 10px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: #CC3333;
}
#alternador.boton {
width: 100px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
background-color: #E4FDE1;
border-top: 3px solid #F2EC9F;
border-left: 3px solid #F2EC9F;
border-bottom: 3px solid #E8DD55;
border-right: 3px solid #E8DD55;
}
#alternador-largo {
color:#FFFFFF;
font:bolder;
}
body.largo #contenedor.capitulo {
font-size: 1.5em;
}
.largo {
font-size: 1.5em;
}
Con ejemplo.html y estilo.css tenemos el siguiente documento.
Lo que se desea lograr es que al dar clic sobre el botón azul se cambie automáticamente el estilo de la fuente, para lograrlo necesitamos crear el archivo ejemplo.js que utiliza el método blind() de jQuery como vemos en las siguientes lineas:
// JavaScript Document
$(document).ready(function() {
$('#alternador-largo').bind('click', function() {
$('body').addClass('largo');
});
});
Al método bind() primero se le pasa una acción que en este caso es “click” y luego la función que cambiará la fuente de todo el contenido div “contenedor” por medio de la clase largo. Al darle clic en el botón azul el resultado es el siguiente:
Currently have 0 comentarios: