文档章节

jQuery Mobile Slider 禁用点击事件

wen1512
 wen1512
发布于 2017/04/25 10:44
字数 273
阅读 24
收藏 0

在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作。为此需要禁用Slider的点击事件。

官方API并没有提供禁用点击事件的事件的方法,因此要实现这一功能只能另辟蹊径。留意到点击Slider时都要触发一个mousedown方法改变滑块所处的位置,不妨重写这个方法,在mousedown事件触发时,保持原有的滑块位置不变。

实现方法:

  • 首先找到要操作的对象:

输入图片说明

  • 实现代码:
 /***	控制滑块任意位置点击事件不可用
**/
function disableSliderTrack($slider) {

    $slider.bind("mousedown", function (event) {

        var x = event.pageX;
        var y = event.pageY;

        var $handle = $(this).find(".ui-slider-handle");

        var left = $handle.offset().left;
        var right = left + $handle.outerWidth();
        var top = $handle.offset().top;
        var bottom = top + $handle.outerHeight();

        return (x >= left && x <= right && y >= top && y <= bottom);

    });
}
  • 在页面加载时初始化所有滑块对象
$(function(){            
      disableSliderTrack($(".ui-slider-track"));
});

至此大功告成。条条大道通罗马,通过重写控件的mousedown方法也能实现对click事件的“禁用”。

© 著作权归作者所有

共有 人打赏支持
wen1512
粉丝 1
博文 38
码字总数 32057
作品 0
大庆
高级程序员
2014年140个最好的jQuery插件集合

Material Design Preloader Want to create a Google’s latest Material Design look-alike pre-loader? If yes, this jQuery plugin created by Aaron Lumsden will help you do so and y......

IanSun
2015/03/14
0
0
JQuery插件开发教程 | WhyJQuery

【前言】 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇...

柒月-小妖精
2013/11/14
0
1
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
50个必备的实用jQuery代码段.

如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}}); 2. 解决jQuery, prototype共存......

被风遗忘
2012/04/28
0
14

没有更多内容

加载失败,请刷新页面

加载更多

分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
15分钟前
1
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
22分钟前
0
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
32分钟前
15
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
59分钟前
1
0
区块链技术中的那些能商用的企业级应用

WEPOWER是一家立陶宛初创企业,旨在改变可再生电力项目的付费方式。WePower公司创始人Nick Martyniuk表示,政府统一收购价的存在推动了全球风能与太阳能市场的发展。因此,他的公司希望帮助那...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部