jquery JRangec插件动态设置选项 setValue

使用该插件准备工作

下载地址  https://github.com/nitinhayaran/jRange

jquery.range.js

jquery.js

jquery.range.css

场景【需求】

开始时间必须<=结束时间

当用户点击开始时间29时应该退回原来的15

1  解决方案不做讨论  简单说下思路为

  设置开始时间的可选范围  $('.slider').jRange('updateRange', '1,28');

当开始时间的值改变后 使用$('.slider').jRange('updateRange', '5,10');  修改结束时间的可选范围

结束时间改变后 修改开始时间的可选范围

2  点击值不可选时退回原来的点

single-sliderb  为开始时间的input class   

single-slidere  结束时间的input class

当用户点击开始时间29时应该退回原来的15

使用$('.single-sliderb').jRange('setValue',value);进行修改

jRange 插件中有3个事件  分别是

ondragend   鼠标拖拽后执行

onbarclicked  鼠标点击后执行

onstatechange  值被改变后执行

我的逻辑是
1鼠标拖拽后  如果值不符合要求 则退回原值

$('.single-sliderb').jRange({
    from:1,
    to:last,
    step: 1,
    scale: dayArr,
    format: '%s',
    width:850,
    showLabels: true,
    snap: true,
    ondragend:function () {
        var beginyear = $('.beginyear').val();
        var endyear = $('.endyear').val();
        var beginmonth = $('.beginmonth').val();
        var endmonth = $('.endmonth').val();
        var evalue = $('.single-slidere').val();
        var values = $('.single-sliderb').val(); //8

       if(beginyear == endyear && beginmonth==endmonth && Number(values) > Number(evalue)){
            $('.single-sliderb').jRange('setValue',value);
            return false;
       }

        if(value != values){
            $("#modelform").submit()
        }
    }

})


2鼠标点击后 如果目标值不符合 则退回原值

$('.single-sliderb').jRange({
    from:1,
    to:last,
    step: 1,
    scale: dayArr,
    format: '%s',
    width:850,
    showLabels: true,
    snap: true,
    ondragend:function () {
        var beginyear = $('.beginyear').val();
        var endyear = $('.endyear').val();
        var beginmonth = $('.beginmonth').val();
        var endmonth = $('.endmonth').val();
        var evalue = $('.single-slidere').val();
        var values = $('.single-sliderb').val(); //8

       if(beginyear == endyear && beginmonth==endmonth && Number(values) > Number(evalue)){
            $('.single-sliderb').jRange('setValue',value);
            return false;
       }

        if(value != values){
            $("#modelform").submit()
        }
    },
    onbarclicked:function () {
        var beginyear = $('.beginyear').val();
        var endyear = $('.endyear').val();
        var beginmonth = $('.beginmonth').val();
        var endmonth = $('.endmonth').val();
        var evalue = $('.single-slidere').val();
        var values = $('.single-sliderb').val(); //8

        if(beginyear == endyear && beginmonth==endmonth && Number(values) > Number(evalue)){
            setTimeout(function(){$('.single-sliderb').jRange('setValue',value)},800); //注意 注意  注意
            return false;
        }

        if(value != values){
            $("#modelform").submit()
        }
    }
});

这里为什么要用 serTimeout 执行setValue？
因为
插件本身有一个滑动的效果【有bug】 就是说我点击 某个值后 插件执行顺序 a改变值 滑动效果 b执行回调方法
当执行a的时候 滑动需要时间 滑动结束前 我的js就已经执行完毕 包括回调方法 这时无论回调方法将值设置为多少 都将继续执行a的滑动 最终结果都是滑动到点击时候的目标值位置


为什么鼠标拖拽后的事件里面可以不用setTimeout 因为拖拽方法本身就是"滑动效果" 拖拽完后 直接执行回调 不会执行别的任何东西

如果想使用 onstatechange 需要给插件增加个属性  clickordrag  判断是点击进行的改变还是滑动进行的改变

由于这个方法是在改变值后就会执行   导致 用户如果由 1滑动到10  那么将会执行10次  实际上我们只需要最终到10的时候的回调

增加了clickordrag后需要在点击 和滑动事件里面分别改变这个值得状态 比如 1 or 2  在回调方法里面使用这个属性判断用户是滑动还是点击  只要点击的时候执行自己的代码

ps:最佳解决办法是 在滑动结束后执行回调方法最为妥当  (解决后再来更改答案)