jQuery插件实现屏蔽单个元素使用户无法点击


Posted in Javascript onApril 12, 2013
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
// 下面的插件部分建议放在js文件中, 方便调用 
//-------------- 插件 begin ------------------ 
(function ($) { 
//屏蔽,适合单个元素. 
$.fn.mask = function () { 
var divHtml = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0)"> </div>'; 
$(this).wrap('<span style="position: relative"></span>'); 
$(this).parent().append(divHtml); 
$(this).data("mask","true"); 
} 
//取消屏蔽 
$.fn.unmask = function () { 
$(this).parent().find(".divMask").remove(); 
$(this).unwrap(); 
$(this).data("mask", "false"); 
} 
})(jQuery); 
//-------------- 插件 end ------------------ 
//并没有做disabled处理, 只是上面加多了个屏蔽层, 使之无法点到而已。 
//这样其它地方无须再处理,更方便。 
function changeA2(obj) { 
var t = { 'key': 'b', 'value': '2' };//映射对应关系 
if (obj.value == t.key) { 
$("#A2").val(t.value); 
$("#A2").mask(); 
} else { 
$("#A2").val(""); 
$("#A2").unmask(); 
} 
} 
</script> 
</head> 
<body> 
<select name="A1" id="A1" onchange="changeA2(this)"> 
<option value="">--请选择--</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
<option value="d">d</option> 
</select> 
<select name="A2" id="A2"> 
<option value="">--请选择--</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</body> 
</html>
Javascript 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 #Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 #Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 #Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 #Javascript
关于JavaScript中string 的replace
Apr 12 #Javascript
关于JavaScript与HTML的交互事件
Apr 12 #Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 #Javascript
You might like
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python传递参数方式小结
2015/04/17 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python实现对adb命令封装
2020/03/06 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
10个顶级Python实用库推荐
2021/03/04 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
给男朋友的道歉信
2014/01/12 职场文书
增员口号大全
2014/06/18 职场文书
异地年检委托书范本
2014/09/24 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
商业计划书范文
2019/04/24 职场文书