Entradas etiquetadas con tablas

alternativa_tablehover

Alternativa a iluminar celdas usando solo CSS

3 jun

Publicado por forber en CSS

2 comentarios

alternativa_tablehover Como ya hace unos días dije como iluminar filas y columnas con jquery, pues bien, lamentablemente para webs con un panel de administración que suelta más de 500 filas y mas de 11 columnas, es un efecto poco útil y que además ralentiza muchísimo la web. Así que he buscado una solución mas “caserilla” pero hace el efecto óptico deseado y es el de iluminar la fila entera y con otro color iluminamos la celda por donde pasa el ratón.

La solución es sencilla bajo mi punto de vista y es usando una pequeña hoja de estilos, no la voy a hacer tan complicada como la tengo yo pero el efecto es el mismo…

Así que, saltándome los pasos de que ya sabéis crear una tabla os pongo el estilo para que os salga algo como en la foto inicial…

tr:hover{
    background-color: #FFFFCC; /* amarillo */
}
tr td:hover{
    background-color: #FF9900; /* naranja */
}

Con esto conseguimos en amarillo iluminar toda la fila y en naranja iluminar la celda por donde pasamos el ratón.

Ya, ya se que no es lo mismo que la otra ilumina toda la columna y no es lo mismo, pero bueno me he buscado otros recursos para poder saber que significa en esa celda cuando te encuentras en medio del océano (osea en la mitad de los 500 registros) y no sabes si subir o bajar ;)

Solo os digo que de 21seg de carga ha bajado a 15s. Lo se, parece un montón de segundos pero seguro que pronto conseguiré bajar el tiempo y con mas registros ;)

Espero que os haya servido para algo y si tenéis alguna duda dejar vuestros comentarios.

, , ,
ejemplo_tablehover

Como iluminar filas y columnas con jquery

23 may

Publicado por forber en AJAX

6 comentarios

Hace tiempo que tenia en mente trastear con un plugin basado en jquery llamado tablehover que mas o menos viene a decir iluminar tablas. Esta claro que hay muchas formulas de ilumuniar las tablas cuando pasamos el raton y que algun dia lo explicaremos todas las opciones que hay.

Lo que pasa es que aveces iluminar el horizontal no es suficiente, asi que en nuestro proyecto de DulcesFamosas este sistema dejo de ser util hace tiempo, debido a la gran cantidad de lineas de datos y columnas, para mostrar informacion en el panel de administracion y una solucion era reducir datos, pero la cantidad de datos que aun desprendia esa solucion no era suficiente, asi que hace tiempo que encontre este plugin para jquery y me parecio bastante util.

Ahora voy a intentar explicaros un poco de que va, ya que veo que la documentacion esta incompleta y para muchos al estar en ingles la web original del creador pues aumenta las dificultades de poder implementar esto en tu sitio web…

  1. Lo primero y muy importante, debes cargar la ultima version de jquery
  2. Segundo y menos importante, debes bajarte la ultima version que tenga el creador del plugin
  3. Despues mirar tambien las demo del plugin. Ver demo

Ahora despues de que ya hayais seguido estos pasos sencillos y habeis visto la demo yo he escogido para mi sistema el ejemplo 3, osea ilumina en vertical, ilumina en horizontal e ilumina la celda donde tienes ubicada el raton.

* Doy por supuesto, que en vuestro script ya teneis bien linkado los *.js de jquery y el plugin tablehover.

Antes de colocar la tabla y dentro de <body> para mostrar los elementos debemos poner esta sentencia javascript para declarar el plugin:

$(document).ready(function(){
    $('#large').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click', ignoreCols: [11]});
});

Como vereis hay varios elementos los elementos:

  • colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'; contienen los nombres de las clases que deberemos editar en nuestra hora de estilos
  • el elemento ignoreCols: [1, 4] se lo he añadido yo para decirle que no ilumine la columna 1 y la 4
  • al principio tenemos $('#large'); pues esto no es mas que la id de la tabla donde vamos a aplicar el efecto ;)

Y ahora os pongo un ejemplo en codigo HTML de una tabla…

<table id="large">
    <thead>
        <tr>
            <th>ID</th>
            <th>Título</th>
            <th>Url</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ID</td>
            <td>Título</td>
            <td>Url</td>
            <td>Acciones</td>
        </tr>
    </tbody>
</table>

Donde las tablas iluminadas seran las que estan dentro de las etiquetas <tbody>.

Llegados a este punto estareis viendo vuestro script y direis que no funciona, mirareis si os falta codigo, si algo esta mal escrito, etc…

Bueno pues para los que habeis llegado hasta aqui, os dejo la solucion… es que os falta editar vuestra hoja de estilos ;) 

td.click, th.click{
    background-color: #bbb;
}
td.hover, tr.hover{
    background-color: #69f;
}
th.hover, tfoot td.hover{
    background-color: ivory;
}
td.hovercell, th.hovercell{
    background-color: #abc;
}
td.hoverrow, th.hoverrow{
    background-color: #6df;
}

Al final de la pelicula os deberia de quedar algo como esto:

Espero que os haya servido de ayuda :)

, , , ,