4

如何使 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();

而且按钮必须是 a div，不能是 a checkbox。

？？？

4

4 回答 4

7

简单的解决方法

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

手动处理悬停

除了使用checkbox&label组合而不是 a之外div，我使用的唯一解决方法是从按钮初始化后取消绑定mouseover& ，然后将我自己的/函数绑定到处理我自己切换的按钮。mouseoutmouseovermouseoutui-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');
    });
于 2012-12-13T20:37:41.077 回答
2

Using ui-state-highlight would be easy for you. Instead maintaining the state of ui-state-active, you can assign the above markup to this ui-state-highlight.

于 2012-12-17T05:17:50.560 回答
0

Not strictly legal, but try adding a type="checkbox" attribute to your div or perhaps do this.button.type = 'checkbox' The button will still be a div, but you might get the effect you want.

The other day I was doing some soul searching, tracking down a similar problem, and ended up at the following "offending" lines in 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";

A bit after that there is some code that removes the hoverClass from the button on mouseout. Essentially you need to force toggleButton true.

This is 10 out of 10 hackery, though. Use at your own risk.

于 2012-12-19T07:59:32.260 回答
0

I suppose if styling is the issue, what you can do is build the button manually, something like:

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

This makes it themeroller compatible (the classes don't change between themes). Of course you can replace "ui-button-text-only" with the icon version if you prefer... (I've used this on my own projects, it does the trick)

于 2012-12-19T12:59:41.023 回答