Question

How can I make a jQuery UI button maintain ui-state-active?

I have a button, that I want to be a toggle button. So when I activate it should stay active.

Currently if I set ui-state-active on a button it will get removed if I hover over it.

The markup for the button is just:

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

And the button must be a div, it can’t be a checkbox.

???

Answer 1

Simple workaround

Another suggestion is to use ui-state-highlight instead.

Manually handle hover

Aside from using a checkbox & label combination instead of a div, the only workaround I’ve used is to unbind mouseover & mouseout from the button post-initialization, then binding my own mouseover/mouseout function to the button that handles the toggling of ui-state-hover myself.

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