Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (III Avanzado)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 83

Visitas el mes pasado: 87

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools3 (VII)

Estilos de tablas

imagen mootools

Introducción

En la página anterior vimos cómo crear una tabla en mootools con la clase HtmlTable(). Seguimos viendo más opciones de esta clase con las cuales podemos hacer ciertos tipos de tablas.

Esta página es continuación de la anterior, por lo tanto debemos saber usar ya la clase HtmlTable() en su forma básica para poder seguir lo que se explica a continuación.


Tablas estilo "Zebra"

En este estilo de tablas se distingue entre las filas pares e impares, pudiendo aplicar diferentes estilos CSS a las filas pares y a las impares. Es el estilo de tablas que suelen ponerse en programas como "excel" y otras hojas de cálculo. Con mootools, este estilo de tablas también podemos ponerlas en una página web.

Recordemos cómo se creaba una tabla con la clase HtmlTable(). por ejemplo:

cabecera=["Nombre","Teléfono"];
fila1=["Juan","652221490"];
fila2=["Demetrio","655899001"];
fila3=["Alfonso","636542115"];
fila4=["María","652488300"];
tabla1=new HtmlTable("tabla_1",{
   properties: {cellpadding:5, border:1, id:"tabla_1",width: "100%"},
   headers: cabecera,
   rows:[fila1,fila2,fila3,fila4]
});
tabla1.inject($("caja1"));

Con esto tenemos una tabla normal, creada con la clase HtmlTable, ahora, para convertirla en una tabla estilo "zebra", añadimos la siguiente opción al instanciar el objeto (opciones que ponemos en el segundo argumento):

zebra: true,

La opción zebra, tiene un valor booleano, (por defecto false). Al activarla mediante zebra: true, se crea una clase CSS que afecta sólo a las filas impares de la tabla (sin incluir la cabecera).

El nombre de esta clase CSS es por defecto "table-tr-odd". Es como si a todas las filas impares de la tabla les hubieramos puesto el atributo class="table-tr-odd" ;. Con esto podemos cambiar el estilo de las filas impares, tanto desde la hoja de estilos, como desde el código javascript-mootools.

Para cambiar el valor por defecto de la clase CSS que se forma con "zebra", podemos poner la opcion classZebra al instanciar el objeto, como valor pondremos en una cadena el valor que queramos darle al atributo "class". por ejemplo:

zebra: true,
classZebra: "impares",

Con esto el atributo "class" de las filas impares quedara asi: class="impares". Ahora siguiendo el ejemplo anterior, y una vez añadidas estas líneas en el código javascript-mootools, en la hoja de estilos CSS añadimos las siguiente línea:

.impares { background-color:#d1d4e9; }

El resultado es lo que vemos aquí a la derecha. Primero damos un estilo de caracter general para todas las filas de la tabla, y después le damos el estilo a las filas impares con la opción "zebra". Resaltamos de esta manera las filas impares sobre lass pares, haciendo que la visión de la tabla no sea tan monótona.


Tablas estilo select

Este estilo de tablas permite poner distintos estilos CSS a las filas que están seleccionadas, bien sea cuando tienen el foco (al hacer click sobre ellas o llevar el foco con las teclas de flechas), o cuando se pasa el ratón por encima de ellas.

para ello, al crear la tabla con la clase HtmlTable(), debemos añadir la opción (en el segundo argumento):

selectable: true,

Esta opción tiene un valor booleano (por defecto false). Al poner el valor true convertimos la tabla en seleccionable (estilo select). Activamos así otras opciones que se verán a continuación.

la tabla estilo select es compatible con la tabla estilo zebra, por lo que podemos hacer que la tabla pertenezca a los dos tipos.

Una vez activado el tipo de tabla con la opción selectable: true, podemos poner las siguientes opciones:

Hemos modificado la tabla anterior, aplicándole haciendola también de tipo select, y usando alguna de las opciones que hemos visto. El resultado puedes verlo aquí a la derecha.

Vemos a continuación los códigos de javascript-mootools y de CSS que hemos aplicado para crear esta tabla y aplicarle los tipos que hemos visto hasta ahora.

Este es el código javascript-mootools:

cabecera=["Nombre","Teléfono"];
fila1=["Juan","652221490"];
fila2=["Demetrio","655899001"];
fila3=["Alfonso","636542115"];
fila4=["María","652488300"];
tabla2=new HtmlTable("tabla_2",{
   properties: {cellpadding:5, border:1, id:"tabla_2",width: "100%"},
   headers: cabecera,
   rows:[fila1,fila2,fila3,fila4],
   zebra: true,
   classZebra: "fila_impar",
   selectable: true,
   classRowSelected: "foco",
   classRowHovered: "marcado",
   classSelectable: "seleccion"
});
tabla2.inject($("caja2"));

Ahora para que esto tenga efecto en la hoja de estilos CSS correspondiente a esta tabla aplicamos los estilos que hemos creado con el código anterior. Vemos la hoja de estilos correspondiente a esta tabla:

#caja2 { width: 45%; float: right; margin: 1em 3em 1em 1em; border: 1px solid navy;  }
#tabla_2 td { text-align: left; padding: 5px; }
#tabla_2 td { text-align: left; padding: 5px; }
#tabla_2 th { text-align: center; padding: 5px; font-weight: bold; }
.fila_impar { background-color:#d1d4e9; }
.foco { color: navy; }
.marcado { color: red; }
.seleccion { color: grey; }


Métodos

Relacionado con los estilos vistos anteriormente, podemos aplicar al objeto HtmlTable los siguientes métodos:

para ampliar sobre este tema podemos ver la documentación de mootools en su página oficial, concretamente las páginas Class: HtmlTable.Zebra, para el estilo "zebra", y Class: HtmlTable.Select para el estilo "select".





Seguimos con las tablas en la siguiente página, esta vez veremos cómo podemos ordenar las filas de una tabla según los datos que tengamos en ellas.

Ordenar tablas



Manual de Mootools (III Avanzado)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com