Question

我正在尝试创建一些互连的滑块。所有滑块应总是给出100的总和。因此，如果滑块1 = 50，滑块2和3应自动设置为25。

到目前为止，代码有一些限制：我无法操纵滑块（intermediateChange：true），滑块不再移动，当其中一个达到100时，渣油就会变为0。

这是我的代码：

<script>
    require(["dijit/form/HorizontalSlider"], function(HorizontalSlider) {
        var slider1 = new HorizontalSlider({
            minimum: 0,
            maximum: 100,
            value: 10,
            intermediateChanges: false,
            onChange: function() {
                console.log("Slider 1: " + slider1.get('value'));
                var residue = slider2.get('value') + slider3.get('value')
                slider2.set('value', (slider2.get('value') / residue) * (100 - slider1.get('value')));
                slider3.set('value', (slider3.get('value') / residue) * (100 - slider1.get('value')));
            }
        }, "slider1");

        var slider2 = new HorizontalSlider({
            minimum: 0,
            maximum: 100,
            value: 45,
            intermediateChanges: false,
            onChange: function() {
                console.log("Slider 2: " + slider2.get('value'));
                var residue = slider1.get('value') + slider3.get('value')
                slider1.set('value', (slider1.get('value') / residue) * (100 - slider2.get('value')));
                slider3.set('value', (slider3.get('value') / residue) * (100 - slider2.get('value')));
            }
        }, "slider2");

        var slider3 = new HorizontalSlider({
            minimum: 0,
            maximum: 100,
            value: 45,
            intermediateChanges: false,
            onChange: function() {
                console.log("Slider 3: " + slider3.get('value'));
                var residue = slider1.get('value') + slider2.get('value')
                slider1.set('value', (slider1.get('value') / residue) * (100 - slider3.get('value')));
                slider2.set('value', (slider2.get('value') / residue) * (100 - slider3.get('value')));
            }
        }, "slider3");

        slider1.startup();
        slider2.startup();
        slider3.startup();
    });
</script>

如果滑块保持连接，即使一个滑块最大化，我怎样才能实现？有更聪明的解决方案吗？这样，每增加一个滑块，代码就会变长......

Answer 1

你可以尝试[dojo / aspect]包。http://dojotoolkit.org/reference-guide/1.10/dojo/aspect.html

例如：

//example object
var original = {
        someMethod: function(arg1, arg2) {
            console.warn("original.someMethod called: ", arg1, arg2);
            return "Hello " + arg1 + " " + arg2;
        }
    };
//executed after "somemthod"
aspect.after(original, "someMethod", function(arg1, arg2) {
        console.warn("After method called with arguments: ", arg1, arg2);
    }, true);

//executed before "someMethod"
    aspect.before(original, "someMethod", function(arg1, arg2) {
        console.warn("aspect.before: ", arg1, arg2);
    });

// calling "someMethod" shall trigger aspect before and after ,  
    original.someMethod("micro", "soft");

你可以在第一个滑块onChange方法后使用aspect / after并更改aspect / after方法中的第二个和第三个滑块

Answer 2

我在jQuery UI中找到了这个连接滑块的好例子：[http://jsfiddle.net/redsunsoft/caPAb/2/][1]

我在Dojo中需要完全相同的功能。所以我试图翻译它，但我不明白，如何用Dojo做一些基本的事情。

到目前为止，这是我的代码，其中包含一些意见/问题：

<script>
    require(["dojo/dom-construct", "dojo/query", "dijit/form/HorizontalSlider", "dojo/NodeList-manipulate", "dojo/NodeList-traverse"], function(domConstruct, query, HorizontalSlider) {
        var sliders = query("#sliders .slider");
        var availableTotal = 100;

        sliders.forEach(function(node) {
            var init_value = parseInt(query(node).text());

            query(node).siblings(".value").text(init_value);

            domConstruct.empty(node);

            var slider = new HorizontalSlider({ // Is it ok to create a new variable with the same name for every slider?
                value: init_value,
                minimum: 0,
                maximum: availableTotal,
                discreteValues: 101,
                intermediateChanges: true,
                showButtons: false,
                onChange: function(value) {
                    query(node).siblings(".value").text(Math.round(value)); // Does not work, though it works outside the onChange function

                    var total = 0;

                    sliders.forEach(function() { // How can I select all sliders, except the current one (jQuery: "not(this)")
                        total += query(node).siblings(".slider").get("value"); // How can I get the values of the sliders?
                    });

                    total += value; // Is "value" the actual value of the slider, that is moved?

                    var delta = availableTotal - total;

                    sliders.forEach(function() {
                        var t = query(node);
                        var value = t.siblings(".slider").get("value");

                        var new_value = value + (delta/2);

                        if (new_value < 0 || value == 100) 
                            new_value = 0;
                        if (new_value > 100) 
                            new_value = 100;

                        t.siblings(".value").text(Math.round(new_value));
                        t.siblings(".slider").set("value", new_value); // How can I set the values of the sliders?
                    });
                }
            }, node);

            slider.startup(); // Where to startup the sliders?
        });
    });
</script>

多个连接/相关滑块与Dojo

2 个答案: