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;
            }
...
}   
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 0.一个纯 JavaScript 的图表库 ECharts ★Star 19690 ECharts,一个纯 Jav...
    npmstart阅读 5,060评论 2 12
  • javascript功能插件大集合,写前端的亲们记得收藏 包管理器管理着 javascript 库,并提供读取和打...
    狗狗嗖阅读 823评论 0 1
  • 我师父毕业了。 初一的时候团委招人,参加广播站选拔。在团委办公室门口排队等,紧张半天。我就一直呼气、吸气,别紧张,...
    程遂然阅读 385评论 5 3
  • 上期谈到刘克庄曾因一首《落梅》诗被参劾落职,这是怎么一回事呢?此事说来话长,要从南宋“开禧北伐”讲起。 记得前几期...
    播古听今阅读 585评论 0 2
  • 今天是和艾先生实行日常规则的第一天。开始就不错了哟,后续继续保持。我们的欲望一点一点慢慢的满足,会越来越觉得很快乐...
    李忠怡_007阅读 225评论 0 6