最近要寫一個用滑塊拖動或者點擊獲取時間范圍幅聘。我在網(wǎng)上查到了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;
}
...
}
