El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Tablas mejoradas con Prototype

Alma Fernández  03/12/2006

Una forma interesante de darle un poco de vida a esas tablas que introducimos en nuestros sitios web para contener listados de, por ejemplo, productos. Con un poco de Prototype es francamente sencillo conseguir:

  • Alternar el color de las filas
  • Cambiar el color de fondo de la fila al pasar el ratón por encima
  • Al hacer click en una columna se abre una ventana con información sobre la misma

La tabla que queremos mejorar es algo así:


product price
mouse 12.34
printer 23.45
screen 34.21
USB stick 1.23
keyboard 2.34

Ahora colocamos el siguiente código Javascript en un archivo a parte, así podremos reutilizarlo y no hacer demasiado pesada la página con la tabla

var ListTable = Class.create();
ListTable.prototype = {
initialize: function(tableId, path) {
table = $(tableId);
Element.addClassName(table, ‘listTable’);
var odd = true;
$A(table.getElementsByTagName(‘TR’)).each(function(row){
if(row.id !== ”){
listRow = new ListRow(row, path, odd);
odd = !odd;
}
});
}
};

var ListRow = Class.create();
ListRow.prototype = {
initialize: function(row, path, odd) {
this.row = row;
this.path = path;
if(odd) {
this.addBehavior(‘ltOdd’, ‘ltOddOver’);
} else{
this.addBehavior(‘ltEven’, ‘ltEvenOver’);
}
},
addBehavior: function(clazz, classOver) {
Element.addClassName(this.row, clazz);
this.classOver = classOver;
this.row.onmouseover = this.handleOnMouseOver.bindAsEventListener(this);
this.row.onmouseout = this.handleOnMouseOut.bindAsEventListener(this);
this.row.onclick = this.handleOnClick.bindAsEventListener(this);
},
handleOnClick: function(event) {
location.href = this.path + ‘?id=’ + this.row.id;
},
handleOnMouseOver: function(event) {
Element.addClassName(this.row, this.classOver);
},
handleOnMouseOut: function(event) {
Element.removeClassName(this.row, this.classOver);
}
};

Añades el archivo prototype.js al directorio del javascript y listo.

Toda la explicación del «truco» en el artículo original, con un ejemplo para descargar de regalo: Enhance list tables with Prototype Javascript Framework

Javascript, Librerias

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

Trackbacks/Pingbacks

  1. MeeCSS, envía tu sitio a más de 100 galerías CSS cómodamente | dominios, diseño web, ecommerce - Mantis Technology Solutions Blog dice:
    23 Agosto 2009 en 1:15

    [...] Tablas mejoradas con Prototype [...]

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene 3 años. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna