Saltar apartados

DOM (Ejercicios)

Objetivo.
A partir de un listado de “divs” cualquiera colocar botones de subir / bajar para cambiar la ordenación. Se pide control de errores y obtención de resultado final.

Imágenes: ArribaAbajo

1.- Genera este HTML:
<div id="orden">
    <div id="uno" class='item'>Primera </div>
    <div id="dos"  class='item'>Segunda </div>
    <div id="tres"  class='item'>Tercera </div>
    <div id="cuatro"  class='item'>Cuarta </div>
</div>


2.- En Windows.onload comprueba que todos los divs hijos del div “orden” tienen un identificativo, En caso de que no sea así alert de error y acabas.

(Muy útil en este caso getChildren y $A).

3.- Por cada hijo del div “orden” consigue por DOM obtener esto:
<div id="orden">
    <div id="uno" class="item">
        <div class="img UP"/>
        <div class="img DW"/>
        <div class="texto">Primera </div>
    </div>
    <div id="dos" class="item">
        <div class="img UP"/>
        <div class="img DW"/>
        <div class="texto">Segunda </div>
[...]
Es decir, tenemos por cada hijo que  (elementos.each(function elemento, indice){}) :

3.A.- Capturar el texto de cada hijo y encapsularlo en un div con un class “texto” get(“text”). Eliminar el texto original  set(“text”,””)

3.B.- Añadir delante dos imágenes o div con imagen de fondo: una para subir y otra para bajar new Element(“div”,{opciones})


4.- Añade un evento a las opciones anteriores (aprovecha el new Element de 3B) de manera que cuando pulse sobre el botón arriba el nodo se desplace arriba o cuando pulse abajo se desplace abajo. Ojo a los errores de los extremos: si subo más arriba de la lista disponible me dará error al intentar intercambiar un valor nulo.

Para este punto vendrán muy bien
getFirst / getLast / getPrevious / getNext
getProperty(“id”)
inject

Ejemplo:  $("orden").getFirst().getProperty("id")


5.- Controla el primero y el último, de manera que cuando sobrepasemos el primero este se vaya al último y si sobrepasamos el último se irá al primero.

Muy útil inject:
Ejemplo:    el.inject($("orden"),"bottom");


6.- Para acabar inserta un botón el código de manera que al pulsarlo nos diga el orden de los id’s que tenemos en este momento.

Aquí vendrá muy bien  $A o, si se prefiere,  each

Ejemplo: $A($("orden").getChildren().getProperty("id"));

Descargar PDF

Servicio de Informática 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

Para más información: informacio@ua.es, y para temas relacionados con este servidor Web: webmaster@ua.es

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