Tutorial MooTools pasul 7 Manipulare HTML

In acest tutorial vom vedea cum pot fi manipulate elementele HTML cu ajutorul MooTools. Astfel, puteti adauga noi elemente in cadrul paginii HTML, sterge elemente sau modifica parametri.

Functia .get(); permite recuperarea proprietatilor elementelor. Acestea sunt diverse componente ce creaza un element html, precum src, value, name, etc. Aceasta functie poate fi folosita astfel:

//aceasta va returna tag-ul html(div, a, span...) al elementului cu id-ul "nume_id"
$('nume_id').get('tag');

Element

Se poate folosi .get(); pentru mai mult decat taguri html:

  • id
  • name
  • value
  • href
  • src
  • class (va returna toate clasele daca elementul are mai multe)
  • text (continutul textual al unui element)

Functia .set(); functioneaza la fel ca .get(); doar ca in loc sa primeasca o valoare, seteaza o valoare. Aceasta este foarte folositoare combinata cu evenimente si ne permite sa schimbam valori cand pagina s-a incarcat.

//acest cod va seta href-ul la #nume_id pentru "http://www.spidersolutions.ro"
$('nume_id').set('href', 'http://www.spidersolutions.ro');

&Cu functia erase(); , puteti sterge valoarea proprietatii unui element. Intai selectati elementul, apoi alegeti ce proprietate vreti sa stergeti:

//acest cod va sterge valoarea href-ului de la #nume_id 
$('nume_id').erase('href');

Pentru a muta un element existent pe pagina, puteti folosi functia .inject(); . Pentru a folosi aceasta functie, sa setam intai cateva elemente cu variabile:

var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');

Codul de mai sus plaseaza html-ul de mai jos in variabile, manipulandu-l astfel foarte usor cu ajutorul MooTools:

A
B
C

Pentru a schimba ordinea elementelor, putem folosi .inject(); in unul din urmatoarele 4 moduri:

  • bottom (default) - jos
  • top - sus
  • before - inainte
  • after - dupa

Bottom si top vor plasa elementul injectat in interiorul elementului selectat, intr-un punct de la inceput sau de la sfarsit. Before si after, pe de alta parte, vor injecta un element dupa sau inainte de un alt element, dar in afara sa. Deci, ca exemplu, sa incercam sa schimbam. ordinea in A-C-B. Deoarece nu trebuie sa introducem un element in interiorul altuia, vom folosi before si after:

//injecteaza elementul C inaintea elementului B
elementC.inject(elementB, 'before'); 
 //injecteaza elementul B dupa elementul C
elementB.inject(elementC, 'after');

Puteti folosi constructorul "new Element" pentru a crea un element HTML nou. In esenta, seamana cu scrierea unui element html normal, doar ca vom modifica sintaxa pentru a functiona bine cu MooTools:

//la inceput, numim o variabila si declaram un element nou "new Element"
//apoi, definim tipul elementului (div, a, span...)
var newElementVar = new Element('div', {
    //aici setam toti parametrii elementului
    'id': 'nume_id',
    'text': 'Acesta este un div nou',
    'styles': {
        //aici setam toti parametrii CSS
        'width': '100px',
        'height': '100px',
        'background-color': '#fff',
        'float': 'right'
    }
});

Acum ca avem un element , acesta poate fi injectat in cod. Sa incepem cu codul HTML:

Continutul unui div

La pasul urmator, transformam #id_continut intr-o variabila:

var variabilaElementulMeu = $('elementulMeu');

Apoi, injectam elementul creat in HTML:

// injectam variabila newElementVar in interiorul variabilei variabilaElementulMeu, in pozitia de sus
newElementVar.inject(variabilaElementulMeu , 'top');

In final, HTML-ul va arata astfel:

Acesta este un div nou
Continutul unui div

Pentru mai multe detalii, cititi tutorialele de pe site-ul MooTools.

Alex B.

2Comentarii la "Tutorial MooTools pasul 7 Manipulare HTML"

  1. George spune:

    Foarte tare tutorialul! Tineti-o tot asa...

  2. online spune:

    invatat o multime

Adauga Comentariu

Mesaj

Trimite