Mootools: introducción

21/Ene/2008 134

A pedido popular, comenzaré a iniciar a quienes visitan este sitio en algunos de los frameworks Javascript más populares, o por lo menos, que utilizo con más frecuencia. El primero de ellos sería Mootools, con el que más he estado jugando últimamente (y prometo mostrar resultados).

Pero antes, me interesa comenzar con definir framework. Según mi instinto (y ayuda de Wikipedia), los frameworks Javascript (pueden ser de otros tipos) son una arquitectura que modela las relaciones del lenguaje Javascript. Provee una estructura y principalmente una metodología de trabajo que ayuda a ordenar una sintaxis de trabajo. Son diseñados principalmente para facilitar el desarrollo de sitios y aplicaciones web. Cada framework tiene su orden y estructuras definidos, y no pueden ser mezclados, ya que las reglas son diferentes entre ellos (imagínense sino jugar rugby con reglas de básquetbol… ¡un lío!).

En este artículo, crearemos unos simples Eventos donde manipularemos Elementos vía Javascript.

Cargando

Para comenzar a trabajar con Mootools debemos primero llamar la librería, la que puede ser descargada desde su sitio web ofreciéndonos mucha flexibilidad para bajar una versión optimizada a nuestros requerimientos. Por este detalle, Mootools puede intimidar, ya que quizás algunos Eventos o Efectos no funcionen a la primera (y frustren a quienes esperan prontos resultados), debido a que no han bajado el material necesario para ello. Así, Mootools puede ser considerado como un framework avanzado, pero prefiero verlo como versátil y liviano. Basta algo de estudio para entender bien y utilizar lo justo y necesario para nuestras necesidades. Resumiendo, para cagarlo se utiliza:

<script type="text/javascript" src="ruta_a/mootools.js"></script>

Luego, comenzaremos a escribir lo que queremos realizar vía Javascript. Para comenzar, debemos crear un Evento que nos diga cuando comenzar a realizar lo que queremos.

window.addEvent('domready', function() {
     // nuestro código
});

Mootools nos ofrece más de una opción para comenzar a escribir código:

  • domready: se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes. Gran aporte de Mootools.
  • load: se ejecuta cuando toda la página (inclusive imágenes) se carga, lo que se hacía usualmente con Javascript puro. En algunos casos se demora bastante más.

Escribiendo

Bien, estamos listos para programar algo con ayuda de Mootools. Como mencioné, crearemos un Evento donde manipularemos aspectos de alguna etiqueta (Elemento). Primero, lo que queremos realizar:

$('enlace').addClass('grandote');

Ahora diseccionaremos esto: al elemento que tenga un id="enlace", agrega una class que se llame .grandote (que aumentará el tamaño de la tipografía del enlace).

$ todos los elementos
(‘enlace’) que tengan el id="enlace"
.addClass agrega la class
(‘grandote’) .grandote

Así de simple. Claro que tienen que tener definida la class .grandote en su hoja de estilos para que vean el resultado.

Ver ejemplo 1

Ojalá puedan ver el source desde Firefox con el plugin Web Developer o Firebug, y podrán apreciar la diferencia entre el código fuente y el código generado.

Ahora, si queremos alcanzar más de un id:

$$(['nombre:id', 'otro_id']).addClass('grandote');

Ver ejemplo 2

Notaron como cambió la invocación al Elemento? Cuando es más de uno, se usa $$ y se agrupan entre corchetes []. Pequeños detalles que diferencian los Frameworks.

Se pueden hacer muchas cosas más manipulando Elementos o Selectores con Mootools, como por ejemplo:

  • $(‘elemento’).remove(); remueve el elemento, literalmente.
  • $(‘elemento’).removeClass(); remieve la class que tenga ese elemento.
  • $(‘elemento’).setStyle(); agrega estilos CSS que definamos.
  • $(‘elemento’).setOpacity(0.4); le da opacidad de 40%;
  • $(‘elemento’).setText(‘Lorem Ipsum’); le inyecta Lorem Ipsum dentro de un elemento, por ejemplo <p></p>
  • $(‘elemento’).empty(); vacía un elemento.

Siendo fiel con el título de este artículo, esta fue una introducción. La documentación de Mootools es completa pero lamentablemente pobre de aplicaciones reales. En el foro pueden encontrar más variedad, pero aún no es bastante satisfactorio.

Próximamente, artículo dedicado a JQuery.

Comentarios

  1. RobertBlors [#]

    buy generic valtrex cheap cheap valtrex – prescription for valtrex

  2. Rytvmv [#]

    generic vardenafil online pharmacy – buy vardenafil online paypal vardenafil side effects in men

  3. generic tadalafil 40 mg [#]

    tadalafil daily use https://pulmoprestadalafil.com/ tadalafil 30 mg tadalafil online

  4. tadalafil generic [#]

    generic tadalafil united states https://superactivetadalafil.com/ buy tadalafil tadalafil 30 mg

  5. tadalafil pills [#]

    40 mg tadalafil https://extratadalafill.com/ tadalafil max dose tadalafil

  6. tadalafil [#]

    tadalafil 30 mg https://nextadalafil.com/ tadalafil online tadalafil daily use

  7. Namgiu [#]

    canadian pharmacy review – canadian pharmacy no rx ordering drugs from canada

  8. JohnnyNop [#]

    2 benadryl 25 mg order periactin pills online – benadryl medicine price

  9. tadalafil max dose [#]

    tadalafil pills 20mg https://tadalafilgenc.com/ 40 mg tadalafil tadalafil daily use

  10. tadalafil cvs [#]

    tadalafil online with out prescription sublingual tadalafil tadalafil citrate powder

  11. cialis 20mg [#]

    prescription tadalafil online cheap cialis prescription tadalafil online

  12. JohnnyNop [#]

    natural ed medications ed meds online without doctor prescription – ed drugs

  13. Fhyhzt [#]

    canadian pharmacy no prescription needed – can you buy cialis otc generic cialis tadalafil 20mg

  14. JohnnyNop [#]

    escrow pharmacy online canadian pharmacy meds – promo code for canadian pharmacy meds

  15. JohnnyNop [#]

    zyrtec generic cost benadryl gel tablets – allegra 800 mg

  16. Jckobf [#]

    generic viagra from usa – generic viagra 2018 viagra for sale in australia

  17. DavidPraib [#]

    ed meds online: erectile dysfunction pills drug prices comparison

  18. DavidPraib [#]

    natural ed treatment: erectile dysfunction treatments dog antibiotics without vet prescription

  19. Xsqkvo [#]

    levitra for sale – vardenafil 10 mg buy vardenafil 10mg

  20. KevinchaWn [#]

    viagra discount – cheap viagra online online doctor prescription for viagra

  21. Ufhsek [#]

    vardenafil for women – vardenafil 120 pills buy vardenafil online paypal

  22. KevinchaWn [#]

    where to buy viagra – viagra cost per pill generic viagra walmart

  23. Zzkhti [#]

    ivermectin tablet price – ivermectin 3mg for lice covid and ivermectin

  24. KevinchaWn [#]

    azithromycin amoxicillin purchase amoxicillin online – price of amoxicillin without insurance

  25. Sfdikt [#]

    how do i get viagra – generic sildenafil prescription viagra cheap

  26. KevinchaWn [#]

    can you buy chloroquine over the counter chloroquine – buy aralen

  27. KevinchaWn [#]

    neurontin prescription coupon neurontin tablets 300mg – brand name neurontin

  28. Ettoeg [#]

    online cialis 20mg – cialis 4 mg no script pharmacy

  29. KevinchaWn [#]

    doxycycline 100mg tablets generic doxycycline – doxy 200

  30. KevinchaWn [#]

    order chloroquine phosphate buy chloroquine phosphate – aralen medication

  31. Fxenkd [#]

    prednisone 10mg price in india – 1 mg prednisone cost prednisone

  32. KevinchaWn [#]

    cheap chloroquine aralen phosphate – chloroquine phosphate aralen

  33. KevinchaWn [#]

    gabapentin buy neurontin 100 mg – neurontin drug

  34. ThomasStory [#]

    https://viagrasv.com/# over the counter viagra
    viagra without a doctor prescription

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab