jQuery UI滑块-多个滑块的合并最大值,这些滑块也具有各自的最大值 [英] JQuery UI Slider - Combined Max for multiple sliders that also have individual max values
问题描述
-已解决-
我知道它们存在,但是我还没有找到可以轻松满足某些非常基本需求的滑块,而且我敢肯定,我不是唯一一个对此问题感到沮丧的人.到目前为止,这就是我所拥有的.我朝着正确的方向前进吗?
- Solved -
I Know they exist, but I haven't found a slider that can easily meet some very basic needs and I'm sure I'm not the only one frustrated with this problem. This is what I have so far. Am I heading in the right direction?
我要做什么:
使用JQuery UI滑块,页面上需要多个滑块.每个滑块将具有最小值0,动态最大值和动态默认值.我在带有html元素min,max,value的输入字段中设置了这些值,然后稍后通过javascript/jquery检索它们.
Using the JQuery UI slider, I need multiple sliders on the page. Each slider will have a min of 0, a dynamic max, and a dynamic default value. I set these values in an input field with the html elements min, max, value and retrieve them later through javascript / jquery.
除了它们各自的最大值外,还需要有一个总的最大值,所有滑块的总和不能超过.最后,我还需要从输入框更新滑块(以及滑块本身)的方法.
In addition to their individual max values, there also needs to be a total max value that the sum of all sliders cannot exceed. Finally, I also need availability to update the slider from the input box (as well as the slider itself).
到目前为止我所拥有的:
研究了许多滑块之后,我决定使用JQuery UI滑块,并最终遇到了这篇帖子,使我开始着手实现自己的目标:
After researching a number of sliders, I settled on using the JQuery UI slider and eventually came across this post that got me started with reaching my goals: Combined total for multiple jQuery-UI Sliders
我将代码更改为(1)使用隐藏的输入字段来检索总最大值; (2)使用当前值填充输入文本字段而不是跨度; (3)从max =属性设置单个滑块的初始最大值; (4)将滑块设置为禁用:如果初始最大值为0,则为true;否则为false. (5)侦听文本框的更改,并在不超过最大值的情况下根据输入的数字移动滑块.
I altered the code to (1) Use a hidden input field to retrieve total max value; (2) populate an input text field instead of a span with the current value; (3) set the individual slider's initial max value from the max= attribute; (4) set the slider to disabled: true if the initial max is 0; and (5) listen for changes to the text box and move the slider according to number entered if it will not exceed the max value.
当前代码(JSFiddle):(请参见答案中的jsfiddle)
Current Code (JSFiddle): (see the jsfiddle in answer)
(滑块#1的初始最大值为0-禁用//其他滑块的最大值为500//总表最大值为1000)
(Slider #1 Initial max is 0 - disabled // Other Sliders have max of 500 // total table max is 1000)
滑块的正确操作:
- 它调整得很好,可以正确地保持在最大总限制以下
- 正确设置初始个体最大值和总数最大值
- 设置最大值时为0并保持禁用状态
- 更改文本框时正确滑动
我需要什么帮助/有关修复的想法:
- 更改滑块会改变单个滑块的最大值=总最大值
- 更改文本框可正确滑动当前栏,但不会更新其他滑块以防止它们超过总最大值
- 我目前正在文本框上使用.focusout()事件,因为.change()会使它变得疯狂b/c滑块也在更改文本框.
让我知道您的想法.
更新:
我很遗憾没有听到任何回应,但我认为我已将其破解.需要限制原始代码的可靠性,并且大多需要重写.我将在下面提交我的解决方案作为答案.请尝试一下,让我知道您的想法.这是一个相当大的过程,所以希望有人会发现它有用:)
I was sad not to hear any responses, but I think I cracked it. Needed to limit reliability on that original code and mostly rewrite. I will submit my solution as an answer below. Please try it out and let me know what you think. This was quite a process, so hopefully someone finds this useful :)
推荐答案
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:
每个滑条需要一个li
您可以使用CSS来另外设置不同部分的样式.例如.为slideBG提供背景图片.
您可能希望隐藏总计框,当然,您可以编写最大值脚本.
HTML:
You need an li for each slider
You can use CSS to additionally style different parts. E.g. give slideBG a background image.
You might want to make the totaling boxes hidden and, of course, you might script the max value.
<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>
如果禁用了滑块,则可能需要添加此内容以防止其他人使用文本框:
You might want to add this in to keep folks from using the text box if the slider is disabled:
$(".slider").each(function() {
var disabled = Number($(this).slider("option", "disabled"));
if(disabled == 1) {
$(this).siblings('.value').attr('disabled', 'disabled');
}
});
这篇关于jQuery UI滑块-多个滑块的合并最大值,这些滑块也具有各自的最大值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!