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

また、ボタンはである必要がありますが、divにすることはできませんcheckbox。

???

4

4 に答える 4

7

簡単な回避策

別の提案は、ui-state-highlight代わりに使用することです。

ホバーを手動で処理する

の代わりにcheckbox&の組み合わせを使用する以外に、私が使用した唯一の回避策は、&を初期化後のボタンからバインド解除し、自分の/関数を自分のトグルを処理するボタンにバインドすることです。labeldivmouseovermouseoutmouseovermouseoutui-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

ui-state-highlight を使用するのは簡単です。ui-state-active の状態を維持する代わりに、上記のマークアップをこの ui-state-highlight に割り当てることができます。

于 2012-12-17T05:17:50.560 に答える
0

スタイリングが問題である場合、できることはボタンを手動で作成することだと思います。

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

これにより、テーマローラーと互換性があります (クラスはテーマ間で変わりません)。もちろん、必要に応じて「ui-button-text-only」をアイコンバージョンに置き換えることができます...（私は自分のプロジェクトでこれを使用しましたが、うまくいきます）

于 2012-12-19T12:59:41.023 に答える
0

厳密には合法ではありませんがtype="checkbox"、div に属性を追加してみてください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";

その少し後にhoverClass、 のボタンからを削除するコードがありますmouseout。toggleButton基本的に、 trueを強制する必要があります。

ただし、これは 10 分の 10 のハッカーです。自己責任。

于 2012-12-19T07:59:32.260 に答える