 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Element en Mootools. Método $()
El módulo Element de Mootools es uno de los más importantes, que nos permite acceder a cualquier elemento de la página y alterar sus propiedades. Empezamos conociendo el método de Window $().
08/8/08 - Mootools tiene un módulo llamado Element, que debemos conocer y dominar para poder trabajar con el framework y tener a mano cualquiera de los componentes de la página. En nuestro Manual de Mootools hemos visto una serie de artículos para aprender a manejar otros módulos de los que componen el framework. Sin embargo, hasta que no aprendamos a manejar un poco el objeto Element, no podremos empezar a hacer y entender ejemplos más complejos. Así que, aunque nos hayamos saltado algunos temas de la documentación de Mootools, vamos a empezar a explicar Element. Ya volveremos atrás más adelante para incluir explicaciones de otras partes de Mootools.
Element es el módulo de Mootools que contiene la mayoría de funciones para alterar cosas de la página. La mayoría de los métodos de Element sirven para alterar propiedades de los elementos que visualizamos en nuestro navegador, como pueden ser atributos CSS, código HTML, inyectar código, obtener propiedades, construirlos o destruirlos, etc.
La mayoría de los métodos de la clase Element son sencillos de entender, pero debemos comenzar por un par de métodos que pueden requerir algunas explicaciones adicionales, que sirven para seleccionar elementos de la página.
Función dólar $()
Esta función se ha incluido dentro de los métodos del objeto Window. Por ello, podremos acceder a ella directamente desde cualquier parte del código Javascript de la página.
Con $() se efectúan un par de operaciones:
- Obtener un objeto Element a partir de cualquier elemento de la página, pasando a $() el identificador del elemento que queramos recuperar.
- En el caso que se esté viendo la página en Internet Explorer, $() realiza una segunda función, que consiste en aplicar al elemento seleccionado todos los métodos de la clase Element que aporta Mootools.
Veamos un ejemplo de uso del método $()
Primero veamos un elemento cualquiera de una página web:
<div id="mibloque">
Estoy probando Element de Mootools!
</div>
Esto es un bloque DIV, al que le hemos colocado un identificador id=”mibloque”. Ahora veamos cómo podemos recuperarlo con Mootools como un objeto de la clase Element.
elemento_mibloque = $("mibloque");
Ahora en la variable elemento_mibloque tenemos una referencia a ese bloque DIV. Como elemento_mibloque es un objeto de la clase Element, podemos invocar métodos de Element. Aun no hemos visto explicaciones sobre los distintos métodos, pero podemos mostrar un código para alterar las propiedades CSS de dicho bloque.
elemento_mibloque.setStyle("border", "1px solid #ff8800");
elemento_mibloque.setStyle("padding", "20px");
No es nada complicado, simplemente debemos saber que, con el método setStyle() de la clase Element, podemos cambiar las propiedades CSS del elemento.
Podemos ver el ejemplo en marcha en una página aparte.
El método dólar también acepta una referencia a un elemento, es decir, en vez de un string con el identificador del elemento, podemos pasarle una referencia DOM del elemento deseado. Para aclarar este punto, veamos un código que parece un poco redundante, pero que tiene una razón de ser que explicaré luego:
mielemento = document.getElementById("mibloque");
mielemento = $(mielemento);
mielemento.setStyle("font-size", "150%");
Con mielemento = document.getElementById("mibloque") obtenemos una referencia al bloque DIV de antes, pero a través del método getElementById() del objeto document. Este método forma parte de Javascript y lo tiene cualquier navegador moderno.
Luego, con mielemento = $(mielemento), lo que hacemos es obtener un objeto Element a partir de la referencia conseguida en la línea de código anterior. Esto es necesario hacerlo, porque hasta que no hagamos la invocación al método $(), la referencia del elemento no es un objeto Element de Mootools en Internet Explorer, o mejor dicho, no tiene aplicadas todas las funcionalidades de Element en IExplorer.
El código anterior se puede ver en este enlace.
Como podemos ver, $(), puede ser útil cuando no sabemos si en una variable tenemos un identificador o una referencia a un elemento del DOM. Además, es una manera más rápida de hacer el document.getElementById(), que podemos conocer anteriormente de Javascript.
+ 1 categoria relacionada
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Comentarios de los visitantes |
|
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario. |
Ir arriba
|
||||||||
