Post original

Nos explica paso a paso qué hay que hacer:

• Declarar la función y las variables globales que se necesitan
• Darle un nombre a nuestra tabla y usar el prefijo de WP
• Comprobar que la tabla no existe y si no, crearla
• Añadir la funcionalidad a WordPress
• Añadir datos a la nueva tabla

Create a Plugin With Its Own Custom Database Table

• Grid: tabla con celdas estilo hoja de cálculo
• TreeGrid: igual que el anterior pero permite desplegar filas
• ComboBox: un combo mas interactivo, como los de auto-sugerencias
• TabStrip: gestión de pestañas
• Tree: árbol de datos, tipo directorios/ficheros
• FishEye: aumentar elementos con efecto “ojo de pez”
• Callout: mensajes popup en plan bocadillo
• Spotlight: resaltar elementos DOM, muy útil para realizar guías interactivas
• Calendar: calendarios
• Toolkit: herramientas varias para Ajax

Nitobi UI

Vamos a explicar cómo conseguir este efecto, para ello antes vamos a indicar que para que sea más genérico, los colores de las filas (que son distintos para las filas alternas) van a venir por estilos de clase, no en la propia definición de la etiqueta.

Lo primero que tenemos que hacer es ver los estilos que vamos a usar:

tr {
background: #FFFFFF;
}
/* Para las filas alternas */
tr.par {
background: #9BCFCF;
}

Después tendremos que modificar las filas, primero cambiando el estilos de las filas alternas y luego añadiendo un id y el evento onclick.

// Modifica la tabla para diferenciar las filas
function transformar(ok) {
// Obtengo la tabla
var tabla = document.getElementById("tabla");
// Guardo los datos de la tabla y marco filas alternas
for (var i=1; i<tabla.rows.length; i++) {
if (i%2 == 0) {
tabla.rows[i].className = "par";
} else {
// Se tiene que borrar para cuando se redibuja
tabla.rows[i].className = "";
}
// La primera vez se llama a la función con ok=true
// para crear los id y asignar el evento onclick
if (ok) {
var id = "TR"+Math.random();
tabla.rows[i].id = id;
// Se pone en la variable "concurrencia" el id
// para que no se pueda ejecutar la función "borrarFila"
// con otra fila
tabla.rows[i].onclick = function() {concurrencia=id; borrarFila(this.id, 100);}
}
}
}

Después viene la parte que se encarga de borrar las filas, se irá haciendo una llamada sucesiva con un contador que decrementa. El contador llevará el valor del porcentaje de degradado que se está mostrando. Cuando acabe el degradado, se eliminará la fila y se redibujarán las filas alternas.

// Color final que se quiere mostrar
var Rfinal = 255;
var Gfinal = 0;
var Bfinal = 0;
// Incremento en el degradado
var inc = 10;
// Para evitar que se pulsen dos filas a la vez y pueda dar problemas
var concurrencia = "";
// Borra la fila: primero cambiar de color y luego borra la fila
function borrarFila(id, porc) {
if (concurrencia != id) {
var obj = document.getElementById(id);
// Obtengo el color de fondo
var estilo = obj.tagName + (obj.className == ""? "":"."+obj.className);
// Si el objeto no tiene color de fondo
// lo buscamos dentro de los estilos
// y si no se le asigna el blanco
if (obj.style.backgroundColor == "") {
var estilos = document.styleSheets;
for (var i=0; i<estilos.length; i++) {
var rules = (estilos[i].cssRules)?estilos[i].cssRules:estilos[i].rules;
for (j=0; j<rules.length; j++) {
if (rules[j].selectorText.toLowerCase() == estilo.toLowerCase()) {
obj.style.backgroundColor = rules[j].style.backgroundColor;
}
}
}
if (obj.style.backgroundColor == "") {
obj.style.backgroundColor = "#FFFFFF";
}
}
if (obj.style.backgroundColor.charAt(0) == "#") {
obj.style.backgroundColor = cambiaEstiloHex2Dec(obj.style.backgroundColor);
}
// Si se está efectuando el degradado de colores
if (porc >= 0) {
// Se calcula el nuevo color, se trata de
// el incremento o decremento de color
// del color inicial (o actual) hacia el final
var colores = obj.style.backgroundColor.match(/rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)/);
var RGB = "rgb(";
RGB += (porc==0? Rfinal:parseInt(parseInt(colores[1])-(colores[1]-Rfinal)/(porc/inc)))+",";
RGB += (porc==0? Gfinal:parseInt(parseInt(colores[2])-(colores[2]-Gfinal)/(porc/inc)))+",";
RGB += (porc==0? Bfinal:parseInt(parseInt(colores[3])-(colores[3]-Bfinal)/(porc/inc)))+")";
obj.style.backgroundColor = RGB;
// Seguimos con el degradado
setTimeout(function() {borrarFila(id, porc-inc);}, 30);
} else {
// Se ha acabado con el degradado
// por lo que se borra
obj.parentNode.removeChild(obj);
// Se redibujan las filas alternas
transformar();
// Se libera el proceso
concurrencia = "";
}
}
}
// Cambiar un color del estilo #RRGGBB por uno del tipo rgb(r, g, b)
function cambiaEstiloHex2Dec(valor) {
var colores = valor.match(/\#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})/i);
return "rgb("+hex2dec(colores[1])+","+hex2dec(colores[2])+","+hex2dec(colores[3])+")";
}
// Transforma un numero hexadecimal de dos
// en uno decimal
function hex2dec(num) {
var _hex = new Array();
_hex["0"]=0; _hex["1"]=1; _hex["2"]=2; _hex["3"]=3;
_hex["4"]=4; _hex["5"]=5; _hex["6"]=6; _hex["7"]=7;
_hex["8"]=8; _hex["9"]=9; _hex["A"]=10; _hex["B"]=11;
_hex["C"]=12; _hex["D"]=13; _hex["E"]=14; _hex["F"]=15;
if (num.match(/([0-9A-F]){2}/i)) {
return _hex[(num.charAt(0)+"").toUpperCase()]+_hex[(num.charAt(1)+"").toUpperCase()]*16;
}
return 0;
}

Ejemplo