2

フィドル- 一連の値があります。スライド インスタンスを破棄して再構築せずに、新しいハンドルを追加したり、それらの一部を削除したりすることはできますか?

のようなもの$('#slider').slider('addValueAt',5);または削除します。

新しい値を実際の値と等しくすることはできないため、値は 12 個までしかありません。

そのカスタムコードはすでに持っています。

$(function () {
    var handlers = [0, 2, 4 , 9, 12];
    $("#slider").slider({
        min: 0,
        max: 12,
        values: handlers,
        slide: function (evt, ui) {
            for (var i = 0, l = ui.values.length; i < l; i++) {
                if (i !== l - 1 && ui.values[i] + 1 > ui.values[i + 1]) {
                    return false;
                }
                else if (i === 0 && ui.values[i] + 1 < ui.values[i - 1]) {
                    return false;
                }
            }
        }
    });
});

私はもう試した

$("#slider").slider('option','values', newArrayOfValues);

ただし、実際の値を移動するだけで、新しいものを削除または追加することはありません

4

1 に答える 1

4

jquery ui のバージョン 1.10.x にアップグレードできる場合は、次のようなことができます。

(function ($) {
    $.widget('my-namespace.customSlider', $.ui.slider, {
        addValue: function( val ) {
            //Add your code here for testing that the value is not in the list
            this.options.values.push(val);
            this._refresh();
        },
        removeValue: function( ) {
            this.options.values.pop( );
            this._refresh();
        }
    });
})(jQuery);

その後、次のように使用できます。

$("#slider").customSlider({/* options */});

そして値を追加します：

$("#slider").customSlider('addValue', 5);

このコードでは、既存の jquery-ui スライダーから継承する新しいスライダー ウィジェットを作成しています。addValue メソッドでは、ウィジェットの内部値配列を手動で更新し、元の jQuery-ui スライダーのプライベート _refresh() メソッドを呼び出します。これは、ウィジェットの作成時に最初にスライダーがハンドルを生成する方法です。_refresh() メソッドは、jQuery ui の最近のバージョンの 1 つに追加されました。アップグレードできない場合でも、この手法は可能ですが、マークアップを挿入してドラッグ イベントをバインドするコードを作成する必要があります。

これが実際に動作していることを示すフィドルですhttp://jsfiddle.net/ac2A3/5/

スライド イベントを処理するコードは、ウィジェットの値が適切であることに依存しているため、少し変更する必要があります。

于 2014-04-01T21:55:07.447 に答える