4

ユーザーがスライダーで範囲を選択できるようにするが、スライダーの範囲選択を反転できるようにするという、やや奇妙な要求があります。たとえば、スライダーに次の選択肢がある場合:

<----[]==========[]---->

ボタンをクリックして、その選択を反転できます。次のように視覚的に表示したいと思います。

<====[]----------[]====>

その後、スライダーは期待どおりに機能し続けますが、強調表示が逆になります。1 つのハンドルで範囲に固定の最大値または最小値を設定することで、このスライダーで同様のことができることは知っていますが、2 つのハンドルが使用されているときにそれが可能かどうかはわかりません。これがjQuery UIスライダーで実行可能かどうかは誰にも分かりますか?

4

1 に答える 1

5

CSSをいじって、好きなように見せることができます。スライダーの内側部分：

<----[]==========[]---->
       ^^^^^^^^^^

.ui-widget-headerスライダーの外側の部分から背景を取得します。

<----[]==========[]---->
 ^^^^              ^^^^

から背景を取得します.ui-widget-content。toggleClassしたがって、それらを逆にするには、ウィジェット全体（外側の背景用）と親指（内側の領域用）でこれらのクラスを切り替える必要があります。外側の領域はスライダー自体であり、内側の領域は.ui-slider-rangeスライダーの内側です。

たとえば、次のようなスライダーがある場合：

<div id="slider-range"></div>

次に、これで背景を反転させることができます：

$('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');

スライダーがどこにあるかを追跡したい場合や、#slider-range .ui-slider-range代わりにクラスをチェックする場合があります。

デモ： http： //jsfiddle.net/ambiguous/Mu8XS/

jQuery-UIクラスを切り替えることに抵抗がある場合は、スライダーをでラップし、<div>そのクラスを切り替えて<div>、jQuery-UICSSをオーバーライドできます。

.inverted .ui-widget-content {
    /* The usual background properties for .ui-widget-header */
}
.inverted .ui-widget-header {
    /* The usual background properties for .ui-widget-content */
}

.inverted次に、ラッパー<div>をオンに切り替えて、背景を入れ替えることができます。

于 2011-12-28T23:31:22.077 に答える