06.12.07

toggleClass()

Posteado en MooTools, CSS, JavaScript a las 15:55 por RetroFOX

Hasta que aceitemos el sitio dedicado a MooTools iremos publicando paralelamente los artículos que allí se presentan. Esperemos pronto mejorar el servicio.

Inauguramos esta sección de Estudiando MOO. Simplemente daremos ejemplos de uso de las herramientas de MooTools. Vamos a arrancar con toggleClass(); método de Element..

Simple Definición
Agrega o quita el nombre de clase pasado por parámetro al elemento, dependiendo si esta presente o no.

Lo que logramos con esto es jugar con las clases CSS de nuestro elemento nodo dependiendo del estado anterior de las mismas. O sea ... si la clase CSS no está presente en la definición class="miClase1 miClase2 ..." la agrega al listado, y si se encuentra la elimina.
Tengamos en cuenta que es totalmente válido agregar más de una clase CSS a un elemento nodo HTML. la definición class="miClase01 fndOscuro" es correcta.
Entonces ... en este ejemplo asignamos un evento (click) al elemento en cuestión agregando una clase CSS previamente definida.

.clase01, .clase02 {
    background: #DDD;
    border: 1px solid #AAA;
    color: #400;
    padding: 10px;
    width: 150px;
    height: 150px;
    cursor: pointer;
}

.clase02 {
    background: #040;
    color: #AFA;
}

Código CSS

Window.onDomReady(function() {
       
    $('miElemento').addEvent ('click', function () {
        //  toggleamos la clase 'class02'
        $('miElemento').toggleClass('clase02');
        });
        });
});

Código JavaScript/MooTools

El ejemplo final se puede ver en toggleClass.html.
Hasta la próxima.

Comentarios