- 已解决 -
我知道它们存在,但我还没有找到可以轻松满足一些非常基本需求的 slider ,而且我相信我不是唯一对这个问题感到沮丧的人。这是我到目前为止所拥有的。我的方向是否正确?
我正在尝试做的事情:
使用 JQuery UI slider ,我需要在页面上使用多个 slider 。每个 slider 都有一个最小值 0、一个动态最大值和一个动态默认值。我使用 html 元素 min、max、value 在输入字段中设置这些值,稍后通过 javascript/jquery 检索它们。
除了它们各自的最大值之外,还需要有一个总的最大值,所有 slider 的总和不能超过。最后,我还需要可用性来更新输入框的 slider (以及 slider 本身)。
到目前为止我有什么:
在研究了一些 slider 之后,我决定使用 JQuery UI slider 并最终看到了这篇让我开始实现我的目标的帖子:Combined total for multiple jQuery-UI Sliders
我将代码更改为 (1) 使用隐藏的输入字段来检索总最大值; (2) 用当前值填充输入文本字段而不是跨度; (3) 从 max= 属性中设置单个 slider 的初始最大值; (4) 将 slider 设置为禁用:如果初始最大值为 0,则为真; (5) 监听文本框的变化,如果不超过最大值,则根据输入的数字移动 slider 。
当前代码 (JSFiddle):(请参阅答案中的 jsfiddle)
( slider #1 的初始最大值为 0 - 禁用//其他 slider 的最大值为 500//总表最大值为 1000)
slider 正确的做法:
- 它调整得很好并且正确地保持在总最大限制之下
- 正确设置初始个体最大值和总最大值
- 当最大值为 0 时设置并保持禁用状态
- 更改文本框时正确滑动
我需要帮助/解决问题的想法:
- 改变 slider 往往会改变单个 slider 最大值 = 总最大值
- 更改文本框可正确滑动当前栏,但不会更新其他 slider 以防止它们超过总最大值
- 我目前在文本框上使用 .focusout() 事件,因为 .change() 导致它变得疯狂 b/c slider 也在更改文本框。
让我知道你的想法。
更新:
我很难过没有听到任何回应,但我想我破解了它。需要限制原始代码的可靠性并大部分重写。我将在下面提交我的解决方案作为答案。请尝试一下,让我知道您的想法。这是一个相当大的过程,所以希望有人觉得这很有用:)
最佳答案
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:
每个 slider 都需要一个 li
您可以使用 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 被禁用,您可能希望添加此内容以防止人们使用文本框:
$(".slider").each(function() {
var disabled = Number($(this).slider("option", "disabled"));
if(disabled == 1) {
$(this).siblings('.value').attr('disabled', 'disabled');
}
});
关于javascript - JQuery UI Slider - 多个 slider 的组合最大值也有各自的最大值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9360246/