我如何使Jquery-UI按钮控件组突出选中的项目

How do I make Jquery-UI button control-group highlight selected item?

本文关键字：项目 何使 Jquery-UI 按钮 控件      更新时间：2023-09-26

我有一个问题，让我的按钮继续显示所选元素。只有对焦时才会突出。如果我将焦点更改为页面上的另一个元素，所选内容会消失吗?

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/现在我意识到，这是因为它不工作的jquery-ui版本超过1.11.4。是的!-我应该在发布这个"对照组"解决方案之前尝试解决这个难题!

相似的问题相似的答案:如何设置jquery按钮的激活状态

当你将鼠标悬停在一个按钮上，或者给它一个焦点，类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。你的选择。

相关文章：