jq 插件jRange纵向滑动

最近要写一个用滑块拖动或者点击获取时间范围。我在网上查到了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;
            }
...
}   

你可能感兴趣的:(jq 插件jRange纵向滑动)