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 
}); 

EDIT 1

私はラジオボタンでこのフィドルを試みたが、アイコンスタイリングを得ることができなかったこの質問を投稿する前に作業：http://jsfiddle.net/darkajax/Gr4h3/ jquery-ui verでは動作しないので過去の1.11.4。 はい！ - 私は、この "コントロールグループ"のソリューションを投稿する前に、そのパズルを解決しようとしていたはずです！

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を使用することができます。あなたの選択。