/ / jquery-tablesorter theme color - jquery, jquery-ui, tabletorter

jquery-tablesorter themenfarbe - jquery, jquery-ui, tablesorter

Meine Ruby on Rails 4-Anwendung verwendet jQuery Tablesorter. Ich benutze die UITheme, aber die Farbe ist grau. Ich möchte die Farbe des Themas ändern.

Ich dachte daran, den Stil des Tabellenelements in custom.css.scss wie folgt zu setzen (aus dem jQuery UI CSS Framework 1.10.4):

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3/*{borderColorDefault}*/;
background: #e6e6e6/*{bgColorDefault}*/ url(/assets/jquery-ui/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #555555/*{fcDefault}*/;
}

Aber es muss die Option salesorter.theme geben, die ich nicht finden kann, um die Farbe zu ändern. Jede Referenz oder Antwort geschätzt.

Hier ist die Dokumentation Verknüpfung. Sie haben ein Dropdown-Menü, um den Designstil zu ändern, aber es sagt nicht, wie man es im Code ändert.

Antworten:

2 für die Antwort № 1

Die erforderliche Mindestkonfiguration zum Hinzufügen eines jQuery UI-Designs ist wie folgt:

Kopfzeile

<!-- ui theme stylesheet - needed so the selected ui theme works with tablesorter -->
<link rel="stylesheet" href="../css/theme.jui.css">
<!-- jQuery UI theme (cupertino example here) -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">

<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- tablesorter widget file - needed for the "uitheme" widget -->
<script src="../js/jquery.tablesorter.widgets.js"></script>

Skript

$("table").tablesorter({
theme : "jui", // use theme.jui.css
headerTemplate : "{content} {icon}", // needed to add icon for jui theme
// apply the uitheme widget, include zebra striping widget as desired
widgets : ["uitheme", "zebra"]
});

Wenn Sie also das Design ändern möchten, laden Sie ein anderes jQuery UI-Design.

Das Dropdown in dieser Demo wird mit diesem Plugin erstellt: https://github.com/pontikis/jui_theme_switch/