En esta ocasión veremos cómo asignar y quitar clases (class de CSS) a elementos de la página y de paso seguiremos experimentando con eventos de la página. Recordemos que ya dimos algunas explicaciones sobre eventos en el artículo Eventos sencillos en YUI, que serán importantes de conocer para poder entender este ejemplo.
En este ejercicio tendremos un elemento de la página y dos enlaces. Al pulsar uno de los enlaces haremos que el elemento de la página tenga la clase CSS .miclase, osea, asignaremos una clase a ese elemento, con lo que cambiará su aspecto. Con el otro enlace haremos el paso contrario, es decir, eliminar la mencionada clase CSS a ese elemento, con lo que volverá a tener su aspecto original.
El método addClass() recibe un parámetro que es el nombre de la clase que queremos asignar al elemento.
El método removeClass() recibe un parámetro con el nombre de la clase que queremos quitar sobre el elemento.
<div id="capa1">
Esta capa la creo para probar cosas con YUI 3
</div>
<br>
<br>
<a href="#" id="ponerclase">Poner class .miclase</a> |
<a href="#" id="quitarclase">Quitar class .miclase</a>
Vemos que todos los elementos tienen sus identificadores (atributo id de las etiquetas HTML) con nombres para poder referirnos a ellos luego desde nuestros scripts.
Ahora podemos ver el código completo para definir los eventos "click" sobre los enlaces, para que al pulsarlos se ejecuten las acciones necesarias para poner y quitar las clases.
YUI().use('node', function(Y) {
Y.on("click", function(e){
e.preventDefault();
var objCapa1 = Y.one("#capa1");
objCapa1.addClass("miclase");
}, "#ponerclase");
Y.on("click", function(e){
e.preventDefault();
var objCapa1 = Y.one("#capa1");
objCapa1.removeClass("miclase");
}, "#quitarclase");
});
Como vemos, con Y.on() definimos los eventos "click" en cada uno de los dos enlaces. Ese método recibe la función con el código a ejecutar en el evento.
En la función comenzamos haciendo un e.preventDefault() para bloquear el comportamiento por defecto del enlace. Luego recuperamos el objeto elemento de la capa que queremos acceder para quitar y poner la clase, con Y.one("#capa1"). Por último sobre ese objeto llamamos a los métodos addClass() y removeClass() para añadir y quitar la clase.
Podemos ver el código completo de este ejemplo a continuación:
<html>
<head>
<title>Ejemplo con eventos de YUI 3</title>
<script src="yui-min.js" type="text/javascript"></script>
<script>
YUI().use('node', function(Y) {
Y.on("click", function(e){
e.preventDefault();
var objCapa1 = Y.one("#capa1");
objCapa1.addClass("miclase");
}, "#ponerclase");
Y.on("click", function(e){
e.preventDefault();
var objCapa1 = Y.one("#capa1");
objCapa1.removeClass("miclase");
}, "#quitarclase");
});
</script>
<style type="text/css">
.miclase{
background-color: #630;
font-size: 150%;
color: #ffc;
}
</style>
</head>
<body>
<div id="capa1">
Esta capa la creo para probar cosas con YUI 3
</div>
<br>
<br>
<a href="#" id="ponerclase">Poner class .miclase</a> |
<a href="#" id="quitarclase">Quitar class .miclase</a>
</body>
</html>
Por último, ofrecemos un enlace para que se pueda ver el ejercicio en funcionamiento.
Compartir en redes sociales
Usuarios: 
12 de April de 2010
Valoración del artículo:
