Saltar apartados

DOM (Exercicis)

Objectiu.
A partir d'un llistat de “divs” qualsevol col·locar botons de pujar / baixar per a canviar l'ordenació. Es demana control d'errors i obtenció de resultat final.

Imatges: ArribaAbajo

1.- Genera aquest HTML:


   
Primera

   
Segona

   
Tercera

   
Quarta




2.- En Windows.onload comprova que tots els divs fills del div “ordre” tenen un identificatiu, En cas que no siga així alert d'error i acabes.

(Molt útil en aquest cas getChildren i $A).

3.- Per cada fill del div “ordre” aconsegueix per DOM obtenir açò:


   

       

       

       
Primera

   

       

       

       
Segona

[...]
És a dir, tenim per cada fill que  (elements.each(function element, indice){}) :

3.A.- Capturar el text de cada fill i encapsular-ho en un div amb un class “text” get(“text”). Eliminar el text original  set(“text”,””)

3.B.- Afegir davant dues imatges o div amb imatge de fons: una per a pujar i una altra per a baixar new Element(“div”,{opcions})


4.- Afig un esdeveniment a les opcions anteriors (aprofita el new Element de 3B) de manera que quan prema sobre el botó a dalt el node es desplace a dalt o quan prema a baix es desplace a baix. Ull als errors dels extrems: si puge més amunt de la llista disponible em donarà error en intentar intercanviar un valor nul.

Per a aquest punt vindran molt bé
getFirst / getLast / getPrevious / getNext
getProperty(“aneu”)
inject

Exemple:  $("ordre").getFirst().getProperty("aneu")


5.- Controla el primer i l'últim, de manera que quan sobrepassem el primer est es vaja a l'últim i si sobrepassem l'últim s'anirà al primer.

Molt útil inject:
Exemple:    el.inject($("ordre"),"bottom");


6.- Per a acabar insereix un botó el codi de manera que en prémer-ho ens diga l'ordre dels aneu’s que tenim en aquest moment.

Ací vindrà molt bé  $A o, si es prefereix,  each

Exemple: $A($("ordre").getChildren().getProperty("aneu"));

 

Descarregar PDF

Servei d'Informàtica Mootools


Universitat d'Alacant
Carretera de Sant Vicent del Raspeig s/n
03690 Sant Vicent del Raspeig
Alacant (Spain)

Tel: (+34) 96 590 3400

Fax: (+34) 96 590 3464

Per a més informació: informacio@ua.es, i per a temes relacionats amb aquest servidor web: webmaster@ua.es

Carretera de Sant Vicent del Raspeig, s/n - 03690 Sant Vicent del Raspeig - Alacant - Tel.: 96 590 3400 - Fax: 96 590 3464