jquery ui 按钮 : how can I add a clicked state look to a button that's not a checkbox or radio button?

Question

我有一个在 div 元素上实例化的 jquery ui 按钮。我想实现一个按钮在它是一个复选框并且被选中时的外观。我的情况是这样怎么办。我试过:

$('#my-div-button').attr('checked', true);
$('#my-div-button').button('refresh');

没有用。谢谢。

Answer 1

您实际上可以相当轻松地复制该行为。

DIV 切换按钮:

<div class="ui-button ui-state-default ui-corner-all ui-widget">button</div>

JavaScript 在点击和悬停时切换类，以及禁用选择:

$('div.ui-state-default').click(function() {
    $(this).toggleClass('ui-state-active');
}).hover(function() {
    $(this).toggleClass('ui-state-hover');
}).disableSelection();

用于设置按钮样式的 CSS:

div.ui-state-default {
    padding: 0.4em 1em;
    line-height: 1.4;
}

查看实际效果:http://jsfiddle.net/william/zGvht/3/