Несколько подключенных/зависимых слайдеров с Dojo

Question

Я пытаюсь создать несколько слайдеров, которые взаимосвязаны. Все ползунки должны всегда давать сумму 100. Таким образом, если Slider 1 = 50, Slider 2 и 3 должны быть установлены на 25 автоматически.

код работает до сих пор с некоторыми ограничениями: Я не могу манипулировать ползунки жить (intermediateChange: истина) и ползунки не двигаются больше, когда один из них достиг 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] package. 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 метод и внести изменения во второй и третий слайдер внутри аспекта/после метода

Answer 2

Я нашел это хороший пример подключенных ползунков с пользовательским интерфейсом jQuery: [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>