javascript - 如何使 Jquery-UI 按钮控件组突出显示所选项目？

Question

我在让按钮继续显示所选元素时遇到问题。它仅在对焦时突出显示。如果我将焦点更改为页面上的另一个元素，选择就会消失？

html:

  <div id="button-set" class="controlgroup">
      <button class="buttongroup" id="button-1"></button>
      <button  class="buttongroup" id="button-2"></button>
      <button  class="buttongroup" id="button-3"></button>
  </div>

Javascript:

$( ".controlgroup" ).controlgroup();
$( "#button-1" ).button({
           icons: {
              primary: "ui-icon-file-image"
           },
           text: false
        });
$( "#button-2" ).button({
           icons: {
              primary: "ui-icon-play"
           },
           text: false
        });
$( "#button-3" ).button({
        icons: {
              primary: "ui-icon-locked"
           },
           text: false
});

编辑 1

在我发布这个问题之前，我尝试了使用单选按钮，但无法使图标样式正常工作:http://jsfiddle.net/darkajax/Gr4h3/ 现在我意识到这是因为它不适用于 1.11.4 之后的 jquery-ui 版本。 是的! - 在发布这个“控制组”解决方案之前，我应该尝试解决这个难题!

Answer 1

类似问题和类似答案:how to set jquery button active state

当您将鼠标悬停在按钮上或为其提供焦点时，会添加 ui-state-active 类。因此，如果您希望此状态持续存在，以指示按钮已打开，您可以执行相同的操作。

$( "#button-2" ).button({
  icons: {
    primary: "ui-icon-play"
  },
  text: false
}).click(function(){
  if($(this).hasClass("ui-state-active")){
    $(this).removeClass("ui-state-active");
  } else {
    $(this).addClass("ui-state-active");
  }
  // Your code here
});

您可以使用ui-state-active或ui-state-focus。您的选择。