jQueryUI 可选择：无法将主题应用于所选项目（“ui-selected”类）

Question

我正在使用 jQueryUI 开发一个应用程序。我也在使用Themeroller。我希望使用主题定义尽可能多的样式，这样如果我需要更改某些样式，我只需创建一个新的自定义主题（或下载现有主题）。

我正在尝试在 jQueryUI 中使用“可选择”交互。它正在正常工作 - 在 Firebug 中，我可以看到“ui-selected”类被应用于我选择的元素。但是，没有任何视觉提示表明该项目已被选择。我查看了主题 CSS 文件（jquery-ui-1.8rc3.custom.css，我从 Themeroller 页面< /a>)，并且我没有看到“ui-selected”类的声明。当我下载 jQueryUI 和主题时，我检查了每个选项，包括“可选择”选项。

如何让我的主题定义“ui-selected”类？显然，我可以创建自己的样式声明，但如果我想更改主题，该解决方案并不理想。

我正在使用 jQuery 1.4.2 和 jQueryUI 1.8rc3。

Answer 1

您可以动态设置 ui 类，如下所示：

$("#selectable ul").selectable({
  unselected: function(){
    $(".ui-state-highlight", this).each(function(){
      $(this).removeClass('ui-state-highlight');
    });
  },
  selected: function(){
    $(".ui-selected", this).each(function(){
      $(this).addClass('ui-state-highlight');
    });
  }
});
$("#selectable li").hover(
  function () {
    $(this).addClass('ui-state-hover');
  }, 
  function () {
    $(this).removeClass('ui-state-hover');
  }
);

Answer 2

抱歉，答案很糟糕，但你不能。

这是 ThemeRoller 必须添加的功能，您无法自动添加到它生成的样式中。

如果您查看 演示页面，它们还会手动为 .ui 进行样式声明- 已选择