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

代码如下:

<!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>

赞 (0)

相关推荐

  • jQuery 动态云标签插件

    jQuery 动态云标签插件

    前言: 最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法.高深的语法几乎没有,就有一个return:foreach()方法来返回对象实例本身,还有一个extend()函数,用来扩展参数对象的属性,这也是为了对象在调完我这个方法后方便链式操作. 插件打包下载地址:点我下载 插件名:动态云标签 插件特点: 在指定块级元素内动态生成a标签 a标签的高度.宽度.位置.层数.背景颜色随机可控

  • jQuery插件实现控制网页元素动态居中显示

    本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !dimension.horizontal) return; //won't do anything anyway if(parent) parent = self.parent(); else par

  • formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)

    formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)

    原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存储的状态还原到表单元素上. 其中也用了json数据格式, 之前想对插件中所需的功能,从零开始写,但是觉得太冗余,没必要.就基于另外2个plugin现实. 分别是:jquery.json 和 jStorage. 这两个插件本身实用小巧, api简单易用, 其中jStorage在老一点的浏览器(不支持原生JSON操作)中需要用到jquery.json或者json2 formSt

  • 基于jQuery的动态表格插件

    基于jQuery的动态表格插件

    在这里我们需要控制用户的输入验证,表格的添加删除,用户输入数据的统计聚合,还有相应的计算列比如商品的总价=商品的单价*商品数量,再如,同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的数据库.本插件则简单的处理了这些繁琐的事情. 插件属性说明: 1:rowTemplate:这是插入列的模板,在模板中我们的序号这种行号标示的需要rownum 的class.在模板中的需要唯一编号的比如我们的radiobutton的name属性在每个td单元格需要唯一的name组,再如id这种需要唯

  • jquery弹窗插件colorbox绑定动态生成元素的方法

    colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好. colorbox官网:http://www.jacklmoore.com/colorbox/ 刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过. 以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了. 常规的用法是这样的: 复制代码 代码如下: <a class="test" href="test.jpg" titl

  • 基于jquery打造的百分比动态色彩条插件

    基于jquery打造的百分比动态色彩条插件

    以前没写过jquery插件,在开发这个时,写一下代码,又看一下jquery插件的定义(如何开发之类的东东),来来去去的. 之所以要写这个插件,主要是为了往后的项目中方便实现这类型的功能,在之前做问卷调查那个应用中,就用到这个来显示结果,但当时开发时并不用是插件的,一大堆代码,看也烦,用起来很麻烦(当时就调了一个上午). 还好,这个功能比较简单,正好合适新手写插件. 具体的效果如图: 这个也算是简单的比例图吧. 插件的具体的代码如下: 复制代码 代码如下: ; (function ($) { $.

  • 扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

    解决思路如下: 首先,判断事件的当前节点,也就是jquery的currentTarget是否在target的包含中,即下面的扩展$.containsNode. 然后,在调用hover的时候的mouseover和mouseout事件里判断currentTarget是否在target的包含中,即$.fn.fhover扩展 下面就是相关代码: 复制代码 代码如下: $.containsNode = function(parentNode, childNode) { if (parentNode.con

  • jquery网页元素拖拽插件效果及实现

    jquery网页元素拖拽插件效果及实现

    复制代码 代码如下: ;(function($){$.fn.extend({"jlzindex" : function(){ //用于判断和设置各个对话框的z-indexvar $dragindex = $(this);var arrzindex = new array();for(var i=0; i < $dragindex.length; i++){ //初始化数组元素值,并按拖拽项顺序设置z-index值var zidxnum = 10000 - i - i -2;arr

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

    复制代码 代码如下: <!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

  • jQuery插件jRumble实现网页元素抖动

    jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"><

  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HTML 首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载. <script type="text/javascript" src="js/jquery.js"></script&

  • 详解angular2采用自定义指令（Directive）方式加载jquery插件

    由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述 首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素 这里需要讲一下,jqu

  • 分享20个提升网站界面体验的jQuery插件

    分享20个提升网站界面体验的jQuery插件

    jQuery到目前为止还是非常流行,很多用户喜欢使用jQuery插件加进自己的网站上提升界面及交互性能,这是好的,但我发现很多网站使用的插件还是比较旧,而这点就不太好了,是应该要换换"新款"啦! 随便Web技术不停的进步,很多新鲜.创新并且实用的jQuery插件已经开发出来,大家应该多点关注这方面的资讯. 今天为大家整理20个提升网站界面的体验的jQuery插件,这些都是比较"新款"的代码,喜欢的请用到你的网站项目上吧! Card 友好的信用卡表单插件,模拟真实的信

  • 2013年优秀jQuery插件整理小结

    2013年优秀jQuery插件整理小结

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示插件.3D旋转菜单等等.这些插件的官网都提供了详细的API和相关代码下载,也提供了一些案例展示,可以说稍懂一点前端的同学按照他们提供的API就会使用这些插件. 1.Makisu : jQuery CSS 3D Dropdown Menu concept Makisu是一个jQuery和css3制

  • jQuery插件StickUp实现网页导航置顶

    实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic

  • 50 个 jQuery 插件可将你的网站带到另外一个高度

    50 个 jQuery 插件可将你的网站带到另外一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性--除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

  • jQuery插件实现大图全屏图片相册

    大图全屏图片相册jQuery插件,支持左右按钮切换以及点击大图自动切换图片,基于jQuery插件jQuery.album.js,插件支持参数自定义功能,viewMode:0没有缩略图 1有缩略图  2缩略图.全屏幕.可以对图片进行左右转,具体的参数大家可以查看jQuery.album.js文件,总之效果很不错,喜欢的朋友可学习下 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

随机推荐