/* Nota: Para este ejemplo, estoy utilizando la estructura de estilos que vienen en el archivo style.css de los temas blue y green que se descargan de la página oficial de http://tablesorter.com/docs/#Download. Pasos a seguir: 1) Editar el archivo jquery.tablesorter.js - ir al final del archivo - encontrarás })(jQuery); como la línea final - abrir dos líneas justo arriba de esta línea - insertar este código (vamos a crear un widget) // widget added by Ultiminio Ramos Galan 2010-05-28 ts.addWidget({ id: "zebraHover", format: function(table){ $(table.tBodies[0].rows).css({ 'cursor' : 'pointer' }); $(table.tBodies[0].rows).hover(function(){ ($(this).get(0).className == 'hover') ? xvoid = '': xclassName = $(this).get(0).className; $(this).removeClass('odd').removeClass('even').addClass('hover'); }, function(){ $(this).removeClass('hover').addClass(xclassName); }); // end .hover() } // end function }); // end widget zebraHover /* 2) Abrir el archivo style.ccs que corresponda a los temas blue o green. Hacer estos cambios: - localizar la línea: table.tablesorter tbody td { - comentar background-color, deberá verse de esta manera */ /* background-color: #FFF; */ - agregar dos nuevos estilos: table.tablesorter tbody tr.even td { background-color:#FFF; } table.tablesorter tbody tr.hover { background-color: #C5E1FB; } /* 3) Ir al código de tu programa e invocar tablesorter de esta manera: */ $("#table-data").tablesorter({ sortMultiSortKey: 'ctrlKey' , widthFixed: true , widgets: ['zebra', 'zebraHover'] }); // end tablesorter // Eso es todo! /* ALTERNATIVA: Si no deseas modificar el core de jquery.tablesorter.js, la alternativa es la siguiente: 1) En tu archivo de programa, antes de invocar a table sorter, simplemento lo inicializamos de esta manera: */ $.tablesorter.addWidget({ id: "zebraHover", format: function(table){ $(table.tBodies[0].rows).css({ 'cursor' : 'pointer' }); $(table.tBodies[0].rows).hover(function(){ ($(this).get(0).className == 'hover') ? xvoid = '': xclassName = $(this).get(0).className; $(this).removeClass('odd').removeClass('even').addClass('hover'); }, function(){ $(this).removeClass('hover').addClass(xclassName); }); // end .hover() } // end function }); // end widget zebraHover
Recursos, trucos, codigos en PHP, JavaScript, Zend Framework, Magento, CodeIgniter, RUP, MVC, XP, jQuery, Joomla, MySql, Postgresql
sábado, 29 de mayo de 2010
jQuery - Plug-in: Tablesorter, Resaltar fila en el evento mouseover
Como es bien sabido el plug-in Tablesorter de jQuery permite ordenar una tabla html por cada una de sus columna o conjunto de columnas, parametrizable y muy configurable. En el ejemplo que presento, adicioné un widget a este plug-in, el cual permite resaltar la fila por la que pasa el ratón.
Suscribirse a:
Enviar comentarios (Atom)
Datos personales
- Ultiminio Ramos Galán
- Podrás encontrar códigos recursos y artículos sobre PHP, JavaScript, jQuery, MooTools, Ajax, CSS, HTML, UML, RUP, AUP, XP (eXtreme Programming), Six-Sigma, CMMI, FrameWorks, Zend Framework, Magento, CodeIgniter, CakePHP, Joomla 1.5, Doctrine, Active Record, ORM, POO, MVC, MySql, PostgreSql. Este espacio está destinado a ayudar y compartir un poco de lo mucho que he recibido de la comunidad en la Red.
se pega el color cuando pinchas la cabecera: marcelol@rocketmail.com
ResponderEliminarGracias Amigo! me parece estupendo
ResponderEliminar