Saltar apartados

DOM (Exercises)

Aim.
From a listing of “divs” any one place buttons to go up / go down to change the ordenación. It asks control of errors and obtaining of final result.

Images: ArribaAbajo

1.- Genera this HTML:


First

Second

Third

Fourth




2.- In Windows.onload Check that all the divs children of the div “order” they have an identificativo, In case that it was not like this alert of error and finish.

(Very useful in this case getChildren and $To).

3.- By each son of the div “order” it achieves by DOM obtain this:




First





Second

[...]
That is to say, we have by each son that (elements.each(function Element, indice){}) :

3.To.- Capture the text of each son and encapsularlo in a div with a class “text” get(“text”). Delete the original text set(“text”,””)

3.B.- Add in front two images or div with image of bottom: one to go up and another to go down new Element(“div”,{options})


4.- It adds an event to the previous options (takes advantage of the new Element of 3B) so that when it press on the button up the node displace up or when it press down displace down. Eye to the errors of the extremes: if I go up further up of the available list will give me error when trying exchange an invalid value.

For this point will come very well
getFirst / getLast / getPrevious / getNext
getProperty(“Go”)
inject

Example: $("order").getFirst().getProperty("Go")


5.- It controls the first and the last, so that when we exceed the first this go to the last and if we exceeded the last will go to the first.

Very useful inject:
Example: the.inject($("Order"),"bottom");


6.- To finish inserts a button the code so that when pressing it say us the order of the go’s that have in this moment.

Here it will come very well $To or, if you prefer , each

Example: $To($("order").getChildren().getProperty("Go"));

Download PDF

Computing service Mootools


Universidad de Alicante
Carretera de San Vicente del Raspeig s/n
03690 San Vicente del Raspeig
Alicante (Spain)

Tel: (+34) 96 590 3400

Fax: (+34) 96 590 3464

For further information: informacio@ua.es, and for enquiries on this web server: webmaster@ua.es

Carretera San Vicente del Raspeig s/n - 03690 San Vicente del Raspeig - Alicante - Tel. 96 590 3400 - Fax 96 590 3464