js实例教程-jQuery插件实现屏蔽单个元素使用户无法点击

发布时间:2018-11-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery插件实现屏蔽单个元素使用户无法点击脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

<!DOCTYPE htML>
<html XMlns="https://www.w3.org/1999/xhtml">
<head>
<;meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<tITle></title>
<script src="https://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 pHtml = &#39;<p class="pMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0)"> </p>';
$(this).wrap('<span style="position: relative"></span>');
$(this).parent().append(pHtml);
$(this).data("mask","true");
}
//取消屏蔽
$.fn.unmask = function () {
$(this).parent().find(".pMask").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>

代码如下:

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://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 pHtml = '<p class="pMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0)"> </p>';
$(this).wrap('<span style="position: relative"></span>');
$(this).parent().append(pHtml);
$(this).data("mask","true");
}
//取消屏蔽
$.fn.unmask = function () {
$(this).parent().find(".pMask").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技巧 脚本宝典 欢迎评论哦!&nbsp;js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jQuery插件实现屏蔽单个元素使用户无法点击全部内容,希望文章能够帮你解决js实例教程-jQuery插件实现屏蔽单个元素使用户无法点击所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。