是否可以在单句柄jQuery UI滑块上具有固定的静态范围?

时间:2011-11-12 14:32:36

标签: jquery jquery-ui jquery-ui-slider

基本上我要做的就是一堆日期的单句柄jQuery UI滑块。选择的日期范围总是两周。我想做的只是从两个星期范围的开始日期(这是句柄所在的日期)开始显示一个范围(范围不一定是功能的 - 只是显示),两周前进。这个范围是固定的。

例如,如果句柄在1月1日,我希望范围延长到1月14日。如果滑块移动到1月3日,我希望移动范围在16日结束。

有人知道这是否可行?

1 个答案:

答案 0 :(得分:4)

jQuery UI滑块的设计并未考虑到这一点,但您可以自行处理滑块的slidestop事件,以重置您喜欢的范围值。

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);
    }
});