temas da IU jQuery e tabelas HTML
Existe alguma forma de tema de uma tabela HTML (CSS) com o uso dos temas css jQuery?
todos os meus componentes parecem pertencer um ao outro, excepto a minha tabela HTML, que parece diferente.
4 answers
Plugins com suporte para o ThemeRoller:
UPDATE: aqui está algo que eu montei que vai estilo a tabela:
<script type="text/javascript">
(function ($) {
$.fn.styleTable = function (options) {
var defaults = {
css: 'styleTable'
};
options = $.extend(defaults, options);
return this.each(function () {
input = $(this);
input.addClass(options.css);
input.find("tr").live('mouseover mouseout', function (event) {
if (event.type == 'mouseover') {
$(this).children("td").addClass("ui-state-hover");
} else {
$(this).children("td").removeClass("ui-state-hover");
}
});
input.find("th").addClass("ui-state-default");
input.find("td").addClass("ui-widget-content");
input.find("tr").each(function () {
$(this).children("td:not(:first)").addClass("first");
$(this).children("th:not(:first)").addClass("first");
});
});
};
})(jQuery);
$(document).ready(function () {
$("#Table1").styleTable();
});
</script>
<table id="Table1" class="full">
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
O CSS:
.styleTable { border-collapse: separate; }
.styleTable TD { font-weight: normal !important; padding: .4em; border-top-width: 0px !important; }
.styleTable TH { text-align: center; padding: .8em .4em; }
.styleTable TD.first, .styleTable TH.first { border-left-width: 0px !important; }
A resposta de Dochoffiday é um grande ponto de partida, mas para mim não o cortou (a parte CSS precisava de um buff) por isso fiz uma versão modificada com várias melhorias.
Veja-o em ação, em seguida, volte para a descrição.
JavaScript
(function ($) {
$.fn.styleTable = function (options) {
var defaults = {
css: 'ui-styled-table'
};
options = $.extend(defaults, options);
return this.each(function () {
$this = $(this);
$this.addClass(options.css);
$this.on('mouseover mouseout', 'tbody tr', function (event) {
$(this).children().toggleClass("ui-state-hover",
event.type == 'mouseover');
});
$this.find("th").addClass("ui-state-default");
$this.find("td").addClass("ui-widget-content");
$this.find("tr:last-child").addClass("last-child");
});
};
})(jQuery);
Diferenças com a versão original:
- a classe css por omissão foi alterada para
ui-styled-table
(parece mais consistente) - a chamada
.live
foi substituída por o.on
recomendado para jQuery 1, 7 para cima - o condicional explícito foi substituído por
.toggleClass
(equivalente terser) - o código que define a classe css de nome enganoso
first
nas células da tabela foi removido - o código que dinamicamente adiciona
.last-child
à última linha da tabela é necessário para corrigir uma falha visual no Internet Explorer 7 e no Internet Explorer 8; para navegadores que suportam:last-child
não é necessário
CSS
/* Internet Explorer 7: setting "separate" results in bad visuals; all other browsers work fine with either value. */
/* If set to "separate", then this rule is also needed to prevent double vertical borders on hover:
table.ui-styled-table tr * + th, table.ui-styled-table tr * + td { border-left-width: 0px !important; } */
table.ui-styled-table { border-collapse: collapse; }
/* Undo the "bolding" that jQuery UI theme may cause on hovered elements
/* Internet Explorer 7: does not support "inherit", so use a MS proprietary expression along with an Internet Explorer <= 7 targeting hack
to make the visuals consistent across all supported browsers */
table.ui-styled-table td.ui-state-hover {
font-weight: inherit;
*font-weight: expression(this.parentNode.currentStyle['fontWeight']);
}
/* Initally remove bottom border for all cells. */
table.ui-styled-table th, table.ui-styled-table td { border-bottom-width: 0px !important; }
/* Hovered-row cells should show bottom border (will be highlighted) */
table.ui-styled-table tbody tr:hover th,
table.ui-styled-table tbody tr:hover td
{ border-bottom-width: 1px !important; }
/* Remove top border if the above row is being hovered to prevent double horizontal borders. */
table.ui-styled-table tbody tr:hover + tr th,
table.ui-styled-table tbody tr:hover + tr td
{ border-top-width: 0px !important; }
/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 7, Internet Explorer 8: selector dependent on CSS classes because of no support for :last-child */
table.ui-styled-table tbody tr.last-child th,
table.ui-styled-table tbody tr.last-child td
{ border-bottom-width: 1px !important; }
/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */
/* Internet Explorer 9 and later, Firefox, Chrome: make sure the visuals are working even without the CSS classes crutch. */
table.ui-styled-table tbody tr:last-child th,
table.ui-styled-table tbody tr:last-child td
{ border-bottom-width: 1px !important; }
Notas
Testei isto no Internet Explorer 7 e mais, no Firefox 11 e no Google Chrome 18 e confirmei que funciona perfeitamente. Eu tenho não testado razoavelmente versões anteriores do Firefox e do Chrome ou qualquer versão do Opera; no entanto, esses navegadores são bem conhecidos por boa suporte a CSS e desde que não estamos usando o sangramento da borda funcionalidades aqui eu suponho que ele vai funcionar muito bem lá bem.Se você não está interessado no suporte do Internet Explorer 7 há um atributo CSS (introduzido com o Star hack) que pode ir.
Se você também não estiver interessado no suporte do Internet Explorer 8, O CSS e JavaScript relacionado com a adição e o alvo da classe last-child
CSS também pode ir.
<table>
<thead class="ui-widget-header">
<tr>
<th>Id</th>
<th>Description</th>
</td>
</thead>
<tbody class="ui-widget-content">
<tr>
<td>...</td>
<td>...</td>
</tr>
.
.
.
</tbody>
</table>
E não precisas de usar nenhum código...
Tenho uma linha para fazer com que as tabelas HTML pareçam BootStrapped:
<table class="table table-striped table-bordered table-hover">
O tema combina com outros controlos e suporta realce de linha alternativa.