JQuery的UI滑块 - 联合最大多个滑块也有个别最大值

Question

- 解决 -
我知道它们的存在，但我还没有找到一个滑块可以轻松满足一些非常基本的需求，我当然，我不是唯一一个对这个问题感到沮丧的人。这是我迄今为止所拥有的。我正朝着正确的方向前进吗？

我正在尝试做的：

使用jQuery UI滑块，我需要在页面上的多个滑块。每个滑块的最小值为0，动态最大值和动态默认值。我在输入域与所述html元素最小值，最大值，价值和后来通过JavaScript/jquery的检索它们设置这些值。

除了它们各自的最大值，还需要有一个总的最大值，所有滑块的总和不能超过。最后，我还需要可用性来更新输入框中的滑块（以及滑块本身）。

我有这么远：

研究多个滑块后，我定居在使用jQuery UI滑块和最终跨越这个帖子让我开始达到我的目标是传来：Combined total for multiple jQuery-UI Sliders

我将代码更改为（1）使用隐藏的输入字段检索总体最大值; （2）用当前值填充输入文本字段而不是跨度; （3）从max =属性中设置单个滑块的初始最大值; （4）将滑块设置为禁用：如果初始最大值为0，则为true; （五）听取更改到文本框，并根据若不会超过最大值输入的数字移动滑块。

目前代码（的jsfiddle）：（见答案的jsfiddle）

（滑块＃1初始max是0 - 禁用//其他滑块有500 //总表最大的最大值为1000）

什么滑块做对：

1. 它很好地调整，并在总的最大极限保持正确
2. 设置初始个体最大和总最大正常
3. 设置，并保持在禁用时最大为0
4. 幻灯片正确当您更改文本框中

我需要什么样的定影帮助/意见：

1. 改变滑块会改变个人滑块最大=总最大
2. 更改文本框中正确地滑动的电流条，但不不更新其他滑块，让他们不过去总最大
3. 我目前使用的文本框中.focusout（）事件，因为.change（）导致它去疯狂的B/C滑块也在发生变化文本框。

让我知道您的想法。

UPDATE：

我很伤心没有听到任何回应，不过我觉得我破解了。需要限制该原始代码的可靠性，并且主要是重写。我将在下面提供我的解决方案作为答案。请尝试一下，让我知道你的想法。这是一个相当的过程，所以希望有人认为这有用:)

Answer 1

的jsfiddle：http://jsfiddle.net/mikecruz/bAntY/

使用Javascript/jQuery的：

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

sliders.each(function() { 
    var max = document.getElementById("sliderMax").value; 
    var value = Number($(this).text(), 10), 
     availableTotal = max; 

    $(this).empty().slider({ 
     value: 0, 
     min: 0, 
     max: $(this).siblings().attr("max"), 
     range: "max", 
     step: 1, 
     animate: 100, 
     disabled: (function(curMax) { 
      if (curMax < 1) { 
       return 1; 
      } 
      return 0; 
     })($(this).siblings().attr("max")), 
     stop: function(event, ui) { 
      // Update text box to current value and call .change() 
      $(this).siblings().attr("value", ui.value); 
      $(this).siblings().trigger('change'); 
     } 
    }); 
}); 

$(".value").change(function() { 
    var thisAmount = Number($(this).prop("value")); 
    var totalMax = Number(document.getElementById("sliderMax").value); 
    var indMin = Number($(this).attr("min")); 
    var indMax = Number($(this).attr("max")); 
    var total = 0; 

    //Get the values of all other text boxes 
    $('.value').not(this).each(function() { 
     total += Number($(this).prop("value")); 
    }); 

    //Find the remaining from our total sliders max 
    var remaining = totalMax - total; 

    if(remaining < 0) { 
     remaining = 0; 
    } 
    //if we are under our minimums, go for it! Otherwise, reduce the number. 
    if (thisAmount >= indMin && thisAmount < indMax && thisAmount < totalMax && thisAmount < remaining) { 
     $(this).siblings(".slider").slider("option", "value", thisAmount); 
     //total += thisAmount; 
    } 
    else { 
     //var setMax = ((indMax + totalMax) - Math.abs(indMax - totalMax))/2; 
     var setMax = Math.min(indMax, totalMax, remaining); 
     $(this).siblings(".slider").slider("option", "value", setMax); 
     $(this).prop("value", setMax); 
     //total += (thisAmount - setMax); 
    } 

    //above was getting buggy, so lets just reset total and get it again 
    total = 0; 
    //Get the values of all text boxes 
    $('.value').each(function() { 
     total += Number($(this).prop("value")); 
    }); 

    //Find our new remaining number after updating total for this value 
    remaining = totalMax - total; 
    if(remaining < 0) { 
     remaining = 0; 
    } 
    //Set each slider to the current point and update their max values. 
    $('.value').each(function() { 
    var sliderVal = Number($(this).prop("value")); 
    var sliderMin = Number($(this).attr("min")); 
    var sliderMax = Number($(this).attr("max")); 
    var setNewMax = (((sliderMax + totalMax) - Math.abs(sliderMax - totalMax))/2); 
    var newMax = sliderVal + remaining; 

    $(this).prop("max", newMax);   
    if(newMax < setNewMax) { 
     $(this).siblings('.slider').slider("option", "max", newMax); 
     $(this).siblings('span').text('/' + (newMax)); 
    } 
    else { 
     $(this).siblings('.slider').slider("option", "max", setNewMax); 
     $(this).siblings('span').text('/' + (setNewMax)); 
    } 
    $(this).siblings(".slider").slider("option", "value", sliderVal); 
    }); 

    $('#sliderTotal').attr("value", total); 
}); 

HTML：
您需要的李对于每个滑块
您可以使用CSS来另外设计不同的部件。例如。给slideBG一个背景图像。
您可能希望隐藏总计框，当然，您可以编写最大值。

<form> 
<ul id="sliders"> 
    <li> 
     <span class="slideBG"><div class="slider"></div> 
     <input type="text" class="value" name="slider1" value="0" min="0" max="0"/> 
     <span>0</span></span> 
    </li> 
    <li> 
     <span class="slideBG"><div class="slider"></div> 
     <input type="text" class="value" name="slider2" value="0" min="0" max="500" /> 
     <span>0</span></span> 
    </li> 
    <li> 
     <span class="slideBG"><div class="slider"></div> 
     <input type="text" class="value" name="slider3" value="0" min="0" max="500" /> 
     <span>0</span></span> 
    </li> 
    <li> 
     <span class="slideBG"><div class="slider"></div> 
     <input type="text" class="value" name="slider4" value="0" min="0" max="500"/> 
      <span>0</span></span> 
    </li> 
    <li> 
     <span class="slideBG"><div class="slider"></div> 
     <input type="text" class="value" name="slider5" value="0" min="0" max="500"/> 
      <span>0</span></span> 
    </li> 
    <li> 
     <span class="slideBG"><div class="slider"></div> 
     <input type="text" class="value" name="slider6" value="0" min="0" max="500"/> 
      <span>0</span></span> 
    </li> 
</ul> 
    <br><label for="sliderMax">Total Max:</label> 
    <input type="text" id="sliderMax" name="sliderMax" value="1000"/> 
    <br><br><label for="sliderTotal">Slider Totals:</label> 
    <input type="text" id="sliderTotal" name="sliderTotal" value="0" /> 
</form> 

编辑：

您可能想如果滑块被禁用添加这让人们从使用文本框：

$(".slider").each(function() { 
    var disabled = Number($(this).slider("option", "disabled")); 
    if(disabled == 1) { 
     $(this).siblings('.value').attr('disabled', 'disabled');  
    } 
}); 

Answer 2

您好我刚试过类似的东西，但以不同的方式实现它。我有一个最大的多个滑块。所有滑块的数值加起来不能超过总数。防爆。总共100％的3个滑块。滑块可以是10％，50％，40％。

这不会回答你想要的一切，但它可能是很好的其他用户在寻找类似的东西。

var sliders = $('.slider'); 
sliders.each(function(i) { 
    var slider = $(sliders[i]); 
    var input = $('#' + slider.attr('datanamespace')); 
    slider.slider({ 
    value: slider.attr('datatotal'), 
    min: 0, 
    max: max, 
    step: 1, 
    slide: function(event, ui) { 
     if (ui.value < slider.attr('datavalue')) { 
     return false; 
     } 
     var inputs = $('.slideInput'); 
     var total = ui.value; 

     for (var i = 0; i < inputs.length; i++) { 
     var inp = $(inputs[i]); 
     if (inp.attr('id') != input.attr('id')) { 
      total = total + parseInt(inp.val()); 
     } 
     } 

     if (total > max) { 
     return false; 
     } 
     input.val(ui.value); 
    } 
    }); 
    input.val(slider.slider("value")); 
});