Ползунки jQuery setOpacity отдельных слоев OL, сохраняя максимальный совокупный итог - PullRequest
Новая
       17

Ползунки jQuery setOpacity отдельных слоев OL, сохраняя максимальный совокупный итог

0 голосов
/ 09 января 2012

Есть много примеров использования ползунков jQuery и запуска максимального совокупного итога.Однако мне не удалось разработать версию, которая будет работать с моим приложением.Мне нужно иметь возможность устанавливать отдельные непрозрачности для 6 слоев открытого слоя, используя ползунки jQuery, при этом никогда не превышая совокупную сумму 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);
            });
        }
    });
});

Первоначально я устанавливал непрозрачность слоя OpenLayers с помощью метода setOpacity во время события слайда каждого уникального слайдера.Однако я не мог понять, как сохранить промежуточную сумму с помощью этого метода, чтобы мои ползунки не превышали 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 ползунков **

Любая информация?

1 Ответ

0 голосов
/ 09 января 2012

Если обратный вызов 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/

...