Ayuda ejercicios unidad 25: AJAX y Spry Framework

Ejercicio 1:

Apartado 1.

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Abre el archivo catalogo.php.
4. Ve a la vista de Código.
5. Localiza la tabla que muestra los registros.
6. Modifica la fila de los encabezados, añadiendo la ordenación en el evento onclick, para que quede así::

   <div spry:region="misLibros">
     <table border="0" cellpadding="15" cellspacing="0">
       <tr>
         <th onclick="misLibros.sort('isbn', 'toggle');">ISBN</th>
         <th onclick="misLibros.sort('titulo', 'toggle');">Título</th>
         <th onclick="misLibros.sort('autor', 'toggle');">Autor</th>
         <th onclick="misLibros.sort('precio', 'toggle');">Precio</th>
       </tr>
       ... ... ... ...
     </table>
   </div>

7. Añadiremos las definiciones de los tipos de columna en la parte superior (donde hemos declarado el dataset) para que no haya problemas a la hora de ordenar por precio.

   var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro");
   misLibros.setColumnType('@id', 'number');
   misLibros.setColumnType('precio', 'number');

8. Pulsa la tecla F12 para ver la página en el servidor de pruebas.

 

Apartado 2.

Vamos a añadir los estilos.

1. Modifica de nuevo las celdas de la cabecera para que sean como éstas:

   <th onclick="misLibros.sort('isbn', 'toggle');" spry:hover="destacado">ISBN</th>
   <th onclick="misLibros.sort('titulo', 'toggle');" spry:hover="destacado">Título</th>
   <th onclick="misLibros.sort('autor', 'toggle');" spry:hover="destacado">Autor</th>
   <th onclick="misLibros.sort('precio', 'toggle');" spry:hover="destacado">Precio</th>

2. Abre el archivo estilolibreria.css, seleccionándolo de la parte superior de la ventana de Código y añádele esta clase:

   .destacado {
      color:#E35331;
      cursor:pointer;
   }

3. Guarda todos los documentos.
4. Pulsa la tecla F12 para ver la página en el servidor de pruebas.

Verás como al pasar el ratón sobre las cabeceras éstas cambian de color.

Al hacer clic los registros se ordenarán.