jQuery UI combined slider percentage(jQuery UI 组合滑块百分比)
问题描述
我已经采用了这个例子,并在上面添加了 5 个滑块.
I have taken this example and added 5 sliders on it.
示例:http://jsfiddle.net/redsunsoft/caPAb/2/
我的例子:http://jsfiddle.net/9azJG/
var sliders = $("#sliders .slider");
var availableTotal = 100;
sliders.each(function() {
var init_value = parseInt($(this).text());
$(this).siblings('.value').text(init_value);
$(this).empty().slider({
value: init_value,
min: 0,
max: availableTotal,
range: "max",
step: 2,
animate: 0,
slide: function(event, ui) {
// Update display to current value
$(this).siblings('.value').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 delta = availableTotal - total;
// Update each slider
sliders.not(this).each(function() {
var t = $(this),
value = t.slider("option", "value");
var new_value = value + (delta/2);
if (new_value < 0 || ui.value == 100)
new_value = 0;
if (new_value > 100)
new_value = 100;
t.siblings('.value').text(new_value);
t.slider('value', new_value);
});
}
});
});
当存在五个滑块时,每次拖动滑块时,jQuery 滑块都会以一种奇怪的方式做出反应.似乎目标滑块的值在每一步都变为零并返回到原始值.
When there are five sliders present, the jQuery sliders react in a weird way each time the sliders are dragged. It seems like the value for the target sliders goes to zero and back to the original value on each step.
有谁知道是什么导致了这个问题?我一直在寻找几个小时没有任何想法.
Would anyone know what causes this issue? I have been searching for hours without any idea.
推荐答案
delta/n
where n = { 主滑块下的滑块数 }
delta/n
where n = { number of sliders that are under the main slider }
var new_value = value + (delta/4);
演示
这篇关于jQuery UI 组合滑块百分比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:jQuery UI 组合滑块百分比


- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01