本质上,我要做的是一个用于一堆日期的单手柄 jQuery UI 滑块。选择的日期范围总是两周。我想做的只是从两周范围的开始日期(即句柄所在的日期)开始两周后显示一个范围(范围不必是功能性的 - 只是显示)。这个范围是固定的。
例如,如果句柄在 1 月 1 日,我希望将范围扩展到 1 月 14 日。如果滑块移动到 1 月 3 日,我希望移动范围在 16 日结束。
有谁知道这是否可能?
本质上,我要做的是一个用于一堆日期的单手柄 jQuery UI 滑块。选择的日期范围总是两周。我想做的只是从两周范围的开始日期(即句柄所在的日期)开始两周后显示一个范围(范围不必是功能性的 - 只是显示)。这个范围是固定的。
例如,如果句柄在 1 月 1 日,我希望将范围扩展到 1 月 14 日。如果滑块移动到 1 月 3 日,我希望移动范围在 16 日结束。
有谁知道这是否可能?
jQuery UI 滑块在设计时并未考虑到这一点,但您可以自己处理滑块的slide
和stop
事件来重置您喜欢的范围值。
http://docs.jquery.com/UI/Slider
这无论如何都不能满足您的所有要求,但这是一个开始。
$('#myslider').slider({
min:1,
max:31,
values:[1, 14],
step:1,
range:true,
slide:function(event, ui) {
var s = $(this);
var values = s.slider('option', 'values');
if(ui.handle.nextElementSibling == null) // max slider
values[0] = values[1] - 14;
else // min slider
values[1] = values[0] + 14;
s.slider('option', 'values', values);
},
stop:function() {
var s = $(this);
var min = s.slider('option', 'min'),
max = s.slider('option', 'max'),
values = s.slider('option', 'values');
if(values[0] <= min)
values = [min, min + 14];
if(values[1] >= max)
values = [max - 14, max];
s.slider('option', 'values', values);
}
});