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

按钮必须是div，不能是checkbox。

???

Answer 1

简单的解决方法

另一个建议是改为使用ui-state-highlight。

手动处理悬停

除了使用checkbox＆amp; label组合而不是div，我使用的唯一解决方法是取消绑定mouseover＆amp;来自初始化后按钮的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');
    });

Answer 2

使用ui-state-highlight对你来说很容易。而是保持ui-state-active的状态，你可以将上面的标记分配给这个ui-state-highlight。

Answer 3

不严格合法，但尝试在您的div中添加type="checkbox"属性或者this.button.type = 'checkbox'该按钮仍为div，但您可能会获得所需效果。< / p>

前几天我正在进行一些灵魂搜索，追踪类似的问题，最后在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";

之后有一些代码会从hoverClass上的按钮中移除mouseout。基本上你需要强制toggleButton为真。

这是十分之十的hackery。使用风险自负。

Answer 4

我认为如果样式是问题，你可以做的是手动构建按钮，例如：

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”替换为图标版本...（我已经在我自己的项目中使用了它，它可以解决问题）

jQuery按钮状态有效

4 个答案:

简单的解决方法

手动处理悬停