0

jQuery スライダーを使用して最大累積合計を実行する例は多数あります。しかし、自分のアプリケーションで動作するバージョンの草案を作成できませんでした。jQuery スライダーを使用して、6 つの openlayers レイヤーの個々の不透明度を設定できる必要がありますが、累積合計で 100 スライダー ユニットを超えないようにする必要があります。

更新しました

これが私が現在それを実装している方法です。コードの重複を減らすためにコードのリファクタリングを行う方法を理解することはできません...

var sliders = $("#sliders .slider");

sliders.each(function() {
var value = parseInt($(this).text()),
    availableTotal = 100;

$(function() {
    $("#one").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_1.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#two").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_2.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#three").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_3.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#four").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_4.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#five").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_5.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#six").slider({
        range: "min",
        min: 0,
        value: 8,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_6.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
});
});

オリジナル

私が最もよく知っている例は、ここと以下に投稿されています http://jsfiddle.net/markieta/cWyQ3/

var sliders = $("#sliders .slider");
sliders.each(function() {
    var value = parseInt($(this).text()),
        availableTotal = 100;
    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 100,
        range: "min",
        animate: true,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().text(ui.value);
            // Get current total
            var total = 0;
            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;
            var max = availableTotal - total;
            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");
                t.slider("option", "max", max + value).siblings().text(value);
                t.slider('value', value);
            });
        }
    });
});

もともと、私はそれぞれのユニークなスライダーのスライド イベント中に setOpacity メソッドを使用して OpenLayers レイヤーの不透明度を設定していました。ただし、スライダーが累積単位を 100 を超えないように、この方法で現在の合計を維持する方法がわかりませんでした。

$(function() {
    $( "#slider1" ).slider({
    range: "min",
    min: 0,
    value: opacities[0],
    slide: function(e, ui) {
        hii_1.setOpacity(ui.value / 100);
        $( "#amount1" ).val( ui.value );
        }
    });
    $("#amount1" ).val($( "#slider1" ).slider( "value" ) );
});

** x6 スライダー **

洞察はありますか？

4

1 に答える 1

0

slideコールバックが戻っfalseた場合、親指は動きません。

に基づいて、スライドを防ぐためにfalseを返しますui.value。

したがって、他のスライダーの合計値を取得し、現在のスライダーの新しい値を追加して、false高すぎる場合は戻るだけです。

slide: function(event, ui) {
    var total = ui.value;
    // sliders is all the sliders, we skip `this` because
    // we need to get the current value from ui.value as
    // above.
    sliders.not(this).each(function() {
        total += $(this).slider("option", "value");
    });
    if(total > availableTotal) // availableTotal is your max across all sliders
        return false;
    //...
}

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

于 2012-01-09T06:48:15.510 に答える