jquery 屏蔽一个区域内的所有元素,禁止输入

2014-03-11  来源:本站原创  分类:jquery  人气:5 

有时候,需要屏蔽一个div中所有的input类型,使用jquery很简单有效的完成。

jquery 扩展函数:

<script type="text/javascript">
(function($) {
$.fn.disable = function() {
/// <summary>
/// 屏蔽所有元素
/// </summary>
/// <returns type="jQuery" />
return $(this).find("*").each(function() {
$(this).attr("disabled", "disabled");
});
}
$.fn.enable = function() {
/// <summary>
/// 使得所有元素都有效
/// </summary>
/// <returns type="jQuery" />
return $(this).find("*").each(function() {
$(this).removeAttr("disabled");
});
}
})(jQuery);
</script>

使用方式:装载立即屏蔽:

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function() {
$("#div_test").disable();
});
</script>

结果不是很美观,但是还是蛮有效。
当然美观的方式是在上面建立一个图层进行屏蔽。

相关文章
  • jquery 屏蔽一个区域内的所有元素,禁止输入 2014-03-11

    有时候,需要屏蔽一个div中所有的input类型,使用jquery很简单有效的完成. jquery 扩展函数: <script type="text/javascript"> (function($) { $.fn.disable = function() { /// <summary> /// 屏蔽所有元素 /// </summary> /// <returns type="jQuery" /> return $(t

  • JavaScript屏蔽指定区域内右键菜单 2013-12-01

    有时候需要屏蔽部分区域内的右键菜单,下面的代码大家可以测试下. [把鼠标放在这里单击右键试试] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

  • 基于jquery的一个拖拽到指定区域内的效果 2014-11-06

    这两天一直在整这个拖拽的效果,既然学习就要把一个特效的各个方面考虑周全,这样才学到真正的知识.可不,又整理了一个 拖拽的特效. 这个可与前两个不同了,这个是拖拽到指定的区域内的特效.其实逻辑方式差不多,只不过不同的是 找到目标元素,用appendTo 的方法插入到目标元素. 具体的代码如下,有兴趣者可以试下.(由于是初学,做的简单,如果有其他的方法请给下指点,我定感激不尽哈...) <!DOCTYPE HTML> <html> <head> <meta http-

  • jQuery删除一个元素后淡出效果展示删除过程的方法 2014-12-08

    这篇文章主要介绍了jQuery删除一个元素后淡出效果展示删除过程的方法,实例分析了jQuery中fadeTo及slideUp等方法的使用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery删除一个元素后淡出效果展示删除过程的方法.分享给大家供大家参考.具体分析如下: 当我们删除一个元素时希望能看到删除的过程,这个效果通过对元素进行淡出展示动态化删除过程. $("#myButton").click(function() { $("#myDiv").

  • 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的... 2012-07-20

    日期:2012-7-20 来源:GBin1.com 在线演示 本地下载 如果你曾经开发过内容聚合类网站的话,使用程序动态整合来自不同页面或者网站内容的功能肯定对于你来说非常熟悉.通常使用java的话,我们都会使用到一些HTML的解析,例如,httpparser,最早gbin1.com的整合搜索就是使用httpparser来抓取Google和Baidu的搜索结果,并且整合呈现给搜索用户,这也就是GBin1域名的由来. 那么今天呢,我们介绍另外一个超棒的Java的HTML解析器 - jsoup,这个

  • 深入探讨JavaScript.JQuery屏蔽网页鼠标右键菜单及禁止选择复制 2014-01-03

    这篇文章主要介绍了深入探讨JavaScript.JQuery屏蔽网页鼠标右键菜单及禁止选择复制,需要的朋友可以参考下 我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,

  • jQuery 绑定事件到动态创建的元素上的方法实例 2014-11-14

    这篇文章介绍了jQuery 绑定事件到动态创建的元素上的方法实例,有需要的朋友可以参考一下 在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay,想法很简单,逻辑似乎也无错.具体我们来看一下现实到底能不能实现. 1.页面构造个表单,放上几个输入框.代码看起来是这样子的. <form action="/" method="po

  • jquery 提交值不为空的元素示例代码 2014-07-31

    表单提交的时候 ,是根据元素的name这个属性来的,只要不加name属性 就不会提交,具体实现如下,感兴趣的朋友可以参考下哈 jquery 提交值不为空的元素 可以用来查询的时候用 具体代码: //在执行查询的时候,如果表单的字段为空 就不进行提交 $("#form1").submit(function(){ try { $(this).find("*").each(function(){ var elem = $(this); if (elem.prop(&quo

  • 基于jquery的一个简单的脚本验证插件 2014-08-07

    基于jquery的一个简单的脚本验证插件,希望能对大家有所帮助,有demo 主要用到了jquery,以及自定义的一个属性wl_check,属性说明如下: 1.语法 [need:true,type:int,maxlen:15,minlen:2] 2.关键字 need:文本输入框的必填限制 regtype:文本输入框的正则表达式类别验证 minlen:文本输入框的最小输入长度 maxlen:文本输入框的最大输入长度 minval:数字型文本输入框的最值 maxval:数字型文本输入框的最值 notv

  • jQuery中DOM树操作之复制元素的方法 2014-11-06

    这篇文章主要介绍了jQuery中DOM树操作之复制元素的方法,实例分析了DOM树复制元素的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以

  • javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版 原创 2014-11-21

    javascript 区域内 图片等比例缩放实现代码 脚本之家整合版,兼容ie跟firefox. 脚本之家整合篇,欢迎转载. function controlImg(ele,w,h){ var c=ele.getElementsByTagName("img"); for(var i=0;i<c.length;i++){ var w0=c[i].clientWidth,h0=c[i].clientHeight; var t1=w0/w,t2=h0/h; if(t1>1||t2

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

    这篇文章主要介绍了jquery弹窗插件colorbox绑定动态生成元素的方法,colorbox是一款非常好用的弹窗插件,需要的朋友可以参考下 colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好. colorbox官网:http://www.jacklmoore.com/colorbox/ 刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过. 以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了. 常规的用法

  • 如何搭建一个站内搜索引擎(二) 第2章 概述 2014-02-10

    从第1章如何搭建一个站内搜索引擎(一) 第1章 写在最前已经可以简要看出一个站内搜索的雏形.他主要包括2个方向的内容:灌库和搜索. 在这篇文章中,我们将较为系统的描述整个部分的架构. 1.灌库 从数据库(如mysql)中执行查询出数据,首要的前提是数据库中必须存在数据.同理,如果想从搜索引擎中查找到数据,那么搜索引擎中必须存在数据.因此,搜索引擎非常核心的一个部分就是灌库--即把要搜索的数据按照一定的格式灌入到索引库中. 不同类别的搜索引擎灌库方式不同,但是他们的总体流程非常一致.主要有如下图2

  • 如何搭建一个站内搜索引擎(一) 第1章 写在最前 2014-02-10

    搜索引擎,对很多人来说,熟悉又陌生.熟悉,是因为每个人每天都能接触到,比如百度.google.淘宝内部搜索:陌生,是因为鲜有人了解他的原理. 因为工作需要,有幸参与负责了一个站内搜索的项目.所以可以从实现的角度来讲讲怎么去实现一个站内检索系统. 1.为什么要使用检索系统 可能有些人会这么想,站内搜索我直接用数据库的like就可以实现.这种想法其实在实际中不太可行.首先,like语句很可能用不到搜索,因此性能低下:其次,like语句只能做比较精确的比配,相关性比较低下.比如,"我在北京玩的很好&q

  • Js Jquery创建一个弹出层可加载一个页面 2013-10-05

    Js Jquery创建一个弹出层,当加载一个页面进弹出层时出现乱码,示例代码如下,大家可以参考参考 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" conte

  • 一个获取第n个元素节点的js函数 2013-11-06

    这篇文章主要介绍了一个获取第n个元素节点的js函数,功能还不完善 ,需要的朋友可以参考下 一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善 演示:html <ul id="list"> <li>1<button>a</button></li> <li>2<button>b</button><button>o</button></li&

  • JS实现在线统计一个页面内鼠标点击次数的方法 2013-12-11

    这篇文章主要介绍了JS实现在线统计一个页面内鼠标点击次数的方法,实例分析了javascript操作Cookie实现计数的技巧,需要的朋友可以参考下 本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

  • jQuery 滑动方法slideDown向下滑动元素 2013-12-26

    通过 jQuery,您可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素,下为大家介绍下其参数含义 jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换. jQuery slideDown() 方法 jQuery slideDown() 方法用于

  • JavaScript获取一个范围内日期的方法 2014-03-02

    这篇文章主要介绍了JavaScript获取一个范围内日期的方法,涉及javascript操作日期的相关技巧,需要的朋友可以参考下 本文实例讲述了JavaScript获取一个范围内日期的方法.分享给大家供大家参考.具体分析如下: 指定开始和结束时间,范围该范围内的所有日期放入数组 Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()); dat.setDate(dat.getDate() + days