最近要写一个用滑块拖动或者点击获取时间范围。我在网上查到了jQuery的插件jRange还不错，但是我需要自适应移动端，移动端的时候从横向变成纵向，这个时候我再拖拽，点击就无效了。
var ispc = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? false : true;
//判断是否是pc端
$(function(){
$('.range-slider').jRange({
from: 0, to: (timeArrl.length-1), step:1,
scale:timeArrl,
format: '%s',
snap: true,
width: ispc?$(window).width()*0.90:$(window).height()*0.90,
// width: $(window).width()*0.90,
// width: 400,
showLabels: false,
// showScale: false,
showScale: true,
isRange : true,
rotate:!ispc,//传入rotate
ondragend:function () {
fConstituteTop();
},
onbarclicked:function () {
fConstituteTop();
}
});
var value = "0,"+(timeArrl.length+1)*1
$('.range-slider').jRange('setValue', value);
});
在jquery.range.js加入判断
onDrag: function(pointer, e) {
...
var position = e.clientX - this.domNode.offset().left;
if(this.options.rotate) {
position = e.clientY - this.domNode.offset().top;
}
...
},
barClicked: function(e) {
if(this.options.disable) return;
var x = e.pageX - this.clickableBar.offset().left;
if(this.options.rotate) {
x = e.pageY - this.clickableBar.offset().top;
}
...
}
