/ / jquery-tablesorterテーマカラー - jquery、jquery-ui、tablesorter

jquery-tablesorterテーマカラー - jquery、jquery-ui、tablesorter

私のRuby on Rails 4アプリケーションはjQuery Tablesorterを使用しています。私はUIThemeを使用していますが、色はグレーです。私はテーマの色を変えたい。

私は手動でテーブルの要素をcustom.css.scssのスタイリング(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}*/;
}

しかし、色を変更することができないtablesorter.themeオプションが必要です。任意の参照または回答が高く評価されます。

ここにはドキュメントがあります リンク。彼らはテーマスタイルを変更するためにドロップダウンを持っていますが、コード内でどのように変更するかは言いません。

回答:

回答№1は2

jQuery UIテーマを追加するために必要な最小限の設定は次のとおりです。

ページヘッダー

<!-- 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>

スクリプト

$("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"]
});

したがって、テーマを変更する場合は、別のjQuery UIテーマを読み込みます。

このデモのドロップダウンはこのプラグインによって作成されます: https://github.com/pontikis/jui_theme_switch/