Question

我的Ruby on Rails 4应用程序正在使用jQuery Tablesorter。我使用的是UITheme，但颜色是灰色的。我想改变主题的颜色。

我在考虑手动设置custom.css.scss中的tables元素样式（来自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}*/;
}

但必须有tableorter.theme选项我找不到改变颜色。任何参考或答案都赞赏。

以下是文档link。他们有一个下拉菜单来改变主题风格，但它没有说明如何在代码中更改它。

Answer 1

添加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/

jquery-tablesorter主题颜色

1 个答案: