jQuery按钮状态为活动状态。

Question

如何使jQuery UI按钮保持ui-state-active状态？

我有一个按钮，想要将其设置为切换按钮。所以当我激活它时，应该保持活动状态。

当前，如果我在按钮上设置ui-state-active，则当我悬停在按钮上时，该属性将被删除。

按钮的标记只是：

this.button = $('<div>')
    .html(this.text)
    .addClass(this.options.baseClass)
    .attr('title', this.getTitle())
    .click(this.click.bind(this))
    .button();

按钮必须是一个

元素，不能是元素。

- Petah

---

@balexandre 因为我正在使用jQuery UI。既然如此，为什么不顺便重写一切呢？ - Petah

你可以随时使用 buttons.js 来完成这个任务...并且不需要过于激进，评论只是一个想法，没有必要粗鲁。 - balexandre

jQuery UI支持切换按钮。请参见http://jqueryui.com/button/#checkbox - ori

@ori 我无法使用复选框。 - Petah

你能否澄清一下保留ui-state-active的目的是什么：仅仅是为了样式/CSS的目的，还是有其他依赖于类选择器的代码？就像Michael Robinson在他的回答中建议的那样，我会选择一些自定义的类名，在单击处理程序中切换它，例如this.button.toggleClass('someClass')。 - Laurent S

Answer 1

简单解决方法

另外一个建议是使用 ui-state-highlight 替代。

手动处理悬停

除了使用 checkbox 和 label 组合代替 div 外，我使用的唯一解决方法是在初始化后取消按钮上的 mouseover 和 mouseout 绑定，然后绑定自己的 mouseover/mouseout 函数到按钮上，手动处理切换 ui-state-hover。

this.button = $('<div>')
    .html(this.text)
    .addClass(this.options.baseClass)
    .attr('title', this.getTitle())
    .click(this.click.bind(this))
    .button()
    .unbind('mouseover mouseout hover')
    .bind('mouseover', function() {
        $(this).addClass('ui-state-hover');
    }).
    bind('mouseout', function() {
        $(this).removeClass('ui-state-hover');
    });

- Michael Robinson

Answer 2

使用ui-state-highlight将很容易。您可以将上述标记分配给此ui-state-highlight，而无需维护ui-state-active的状态。

- hsuk

Answer 3

如果样式是问题的话，你可以手动构建按钮，类似于：

this.button = $('<div>')
    .addClass(this.options.baseClass)
    .addClass("ui-state-default ui-button ui-button-text-only ui-corner-all")
    .attr('title', this.getTitle())
    .append('<span class="ui-button-text">button text</span>')
    .hover(function() {
        $(this).toggleClass('ui-state-hover');
    })
    .click( function() {
        this.toggleClass('ui-state-active');
        // anything else you need
    };

这使得它与themeroller兼容（类在主题之间不会改变）。当然，如果您喜欢，可以将“ui-button-text-only”替换为图标版本...（我在自己的项目中使用过，效果很好）

- Laurent S

Answer 4

虽然不是严格合法的，但您可以尝试在 div 元素中添加 type="checkbox" 属性，或者使用 this.button.type = 'checkbox'。按钮仍将是一个 div，但您可能会得到想要的效果。

前几天我在寻找类似问题时进行了一些灵魂探索，并最终找到了 jQuery UI 中以下“有问题”的代码行：

    var self = this,
        options = this.options,
        toggleButton = this.type === "checkbox" || this.type === "radio",
        hoverClass = "ui-state-hover" + ( !toggleButton ? " ui-state-active" : "" ),
        focusClass = "ui-state-focus";

有一点后面有些代码，它从按钮上的 mouseout 移除 hoverClass。基本上，你需要强制 toggleButton 为真。

这是10分中的10分黑客行为。使用需谨慎。

- Nick Zalutskiy