使用该插件准备工作
下载地址 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鼠标拖拽后 如果值不符合要求 则退回原值需要给插件增加个属性 clickordrag 判断是点击进行的改变还是滑动进行的改变$('.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
由于这个方法是在改变值后就会执行 导致 用户如果由 1滑动到10 那么将会执行10次 实际上我们只需要最终到10的时候的回调
增加了clickordrag后需要在点击 和滑动事件里面分别改变这个值得状态 比如 1 or 2 在回调方法里面使用这个属性判断用户是滑动还是点击 只要点击的时候执行自己的代码
ps:最佳解决办法是 在滑动结束后执行回调方法最为妥当 (解决后再来更改答案)