我正在尝试实现一个有 4 个 jQuery-UI 滑块的页面,并且我想让所有 4 个滑块的总数永远不会超过 400。
我不介意以哪种方式实现这一点,它可以从 0 开始,一旦您更改 1 个滑块,剩余的可用总数就会减少,或者将滑块设置为超过最大值,从而减少其他滑块上的值。
附:滑块以 10 为增量移动。
欢迎提出任何想法和建议,我已经建立了一个jsFiddle http://jsfiddle.net/Y5ZLL/如果你想测试一下。
好啦,开始吧:
var sliders = $("#sliders .slider");
sliders.each(function() {
var value = parseInt($(this).text(), 10),
availableTotal = 400;
$(this).empty().slider({
value: 0,
min: 0,
max: 400,
range: "max",
step: 10,
slide: function(event, ui) {
// Update display to current value
$(this).siblings().text(ui.value);
// Get current total
var total = 0;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
// Need to do this because apparently jQ UI
// does not update value until this event completes
total += ui.value;
var max = availableTotal - total;
// Update each slider
sliders.not(this).each(function() {
var t = $(this),
value = t.slider("option", "value");
t.slider("option", "max", max + value)
.siblings().text(value + '/' + (max + value));
t.slider('value', value);
});
}
});
});
这是一个简单的演示:http://jsfiddle.net/yijian/Y5ZLL/4/ http://jsfiddle.net/yijiang/Y5ZLL/4/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)