Tutorial MooTools pasul 1 Introducere

MooTools este o biblioteca javascript folosita pentru development web interactiv cu ajutorul JavaScript. Intr-un fel, multe din functiile MooTools pot fi vazute ca extensii CSS. De exemplu, CSS-ul permite elementul "hover", iar MooTools il extinde catre alte evenimente precum "click" sau "mouseover" si face totul extrem de usor. Mai mult, pe langa aceste ce permit modificarea proprietatilor diferitelor elemente, MooTools permite foarte multe efecte dinamice despre care vom vorbi in articole viitoare, precum si multe alte lucruri.

In esenta, pentru ca aceasta colectie de cod JavaScript sa functioneze, in primul rand trebuie inclus "miezul MooTools" in pagina html, dupa ce a fost in prealabil copiat pe server, astfel:


De asemenea, daca doriti sa economisiti ceva spatiu pe server, si de asemenea sa se incarce foarte repede, puteti folosi copia google, ca in exemplul urmator:

In MooTools, scriem codul cu ajutorul evenimentelor "domready" sau "load", dupa cum urmeaza:

window.addEvent('domready', function(){ 
// documentul s-a incarcat, dar imaginile nu.
}); 
window.addEvent('load', function(){
// atat documentul cat si imaginile s-au incarcat
});

"Domready" inseamna ca documentul a incarcat tot ce inseamna html, mai putin imaginile, astfel este ok sa selectezi si sa manipulezi elementele. "Load" inseamna ca intreaga pagina a fost incarcata, inclusiv imaginile; acest lucru inseamna ca e ok sa manipulezi elemente cand incerci sa le obtii dimensiunea, etc. In general se foloseste "domready".

Urmeaza un simplu exemplu, utilizand functia "alert":

window.addEvent('domready', function(){
alert('DOM-ul este gata! Hai sa executam niste cod');
}); 

Sa incercam pentru inceput si un scurt exemplu de manipulare a elementelor. Un task destul de comun este de a adauga sau sterge o clasa a unui element. Intai trebuie selectata, apoi poate fi manipulata. Vom avea o clasa CSS numita ".selectat" ce transforma culoarea textului in verde si adauga clasa imediat ce documentul este gata.

Codul JS:

window.addEvent('domready', function(){ 
  $('selecteaza').addClass('selectat');
}); 

'$' selecteaza un element dupa atributul sau "id". Daca doresti sa selectezi mai multe elemente, foloseste '$$', care returneaza o colectie de elemente.

Codul CSS:

h2.selectat {
    color: #31b52e;
}
body {
    font-family: helvetica;
}

Codul HTML:

Selecteaza-ma si adauga clasa "selectat"

Nu face nimic!

Alex B.

0Comentarii la "Tutorial MooTools pasul 1 Introducere"

Adauga Comentariu

Mesaj

Trimite