Question

我需要一个Slider Group，或类似的东西（我不确定官方名称）。

基本上，有多个滑块，它们都加起来达到100％。通过增加一个，你减少其他人。

我知道这个问题已经解决了，因为我已经看到它在Humble Bundle上使用了，你可以在那里选择捐款的去向。那里有图书馆吗？

如果没有，我可以使用jQuery-UI或其他一些UI框架构建一些东西。

Answer 1

您可以使用jQuery UI滑块轻松完成此操作。下面是您要查看的javascript的一些伪代码。该文档很好地介绍了事件的工作方式：

API文档：http://api.jqueryui.com/slider/

JSFiddle：https://jsfiddle.net/b54dntrz/

HTML：

    <div id="slider1"></div>
    <br/>
    <div id="slider2"></div>

JavaScript的：

$(document).ready(function () {
    $('#slider1').slider({ 
        max: 100,
        slide: function (event, ui) {
            var slider2val = $('#slider2').slider('value');
            if (ui.value + slider2val > 100) {
                $('#slider2').slider({
                    value: slider2val - 1

                });
            }
        }
    });
    $('#slider2').slider({
        max: 100,
        slide: function (event, ui) {
            var slider1val = $('#slider1').slider('value');
            if (ui.value + slider1val > 100) {
                $('#slider1').slider({
                    value: slider1val - 1
                });
            }
        },
    });

})

HTML表格滑块组

1 个答案: