Cómo aplicar clases CSS a elementos de la página con las librerías YUI y repaso de los eventos.
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.
Añadir y quitar clases de los elementos con addClass() y removeClass()
Antes de comenzar con el ejemplo de este artículo queremos comentar que existen dos métodos que podemos invocar sobre elementos de la página, por medio del framework Javascript YUI, para añadirles y quitarles clases.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.
Ejemplo para poner quitar clases sobre un elemento de la página
Para hacer el presente ejercicio tendremos el siguiente código HTML con el elemento DIV y dos enlaces:
<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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...