原文链接：http://jsfiddle.net/9azJG/2/

下例用jQuery UI实现了5个百分比滚动条联动的效果

• 70
  0%
• 20
  0%
• 20
  0%
• 20
  0%
• 10
  0%

HTML代码：

<ul id="sliders">
    <li>
        <div class="slider">70</div>
        <span class="value">0</span>%
    </li>
    <li>
        <div class="slider">20</div>
        <span class="value" >0</span>%
    </li>
    <li>
        <div class="slider">20</div>
        <span class="value" >0</span>%
    </li>
    <li>
        <div class="slider">20</div>
        <span class="value" >0</span>%
    </li>
    <li>
        <div class="slider">10</div>
        <span class="value">0</span>%
    </li>
</ul>

JavaScript代码：

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

sliders.each(function() {
    var init_value = parseInt($(this).text());

    $(this).siblings('.value').text(init_value);

    $(this).empty().slider({
        value: init_value,
        min: 0,
        max: availableTotal,
        range: "max",
        step: 2,
        animate: 0,
        slide: function(event, ui) {
            debugger;
            // Update display to current value
            $(this).siblings('.value').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 delta = availableTotal - total;
            
            // Update each slider
            sliders.not(this).each(function() {
                debugger;
                var t = $(this),
                    value = t.slider("option", "value");

                var new_value = value + (delta/4);
                
                if (new_value < 0 || ui.value == 100) 
                    new_value = 0;
                if (new_value > 100) 
                    new_value = 100;

                t.siblings('.value').text(new_value);
                t.slider('value', new_value);
            });
        }
    });
});

CSS样式：

#sliders {
    width: 300px;
    padding: 20px;
}

#sliders li {
    margin-bottom: 10px;
}

#sliders div {
    margin-bottom: 5px;
}

 

本文链接：http://bookshadow.com/weblog/2014/11/04/jquery-ui-combined-slider-percentage/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

如果您喜欢这篇博文，欢迎您捐赠书影博客： ，查看支付宝二维码