Loadmask是一个jquery plugin,使用此插件可以在DOM元素加载或更改内容时为此DOM元素添加一个屏蔽层,以防止用户互动,同时起到提醒用户后台任务正在运行的作用。

它可实现的效果:

aaarticlea/png;base64,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" alt="" />

下载地址:http://pan.baidu.com/s/1pJ3U7P5

1. 调用mask(label,delay)方法屏蔽DOM元素。

$("#myDiv").mask();
$("#myDiv").mask(“Loading…”);
$("#myDiv").mask(“Loading…”,500);

参数

label:

一个文本字符串,显示在最外层的一个加载提示信息(在等待图片边上),如果此参数值为undefined,则只显示一个不带等待图标和文本提示的屏蔽层;



=undefined

delay:

以毫秒为单位的延迟显示屏蔽层的时间,如果还没有到延迟时间又调用了unmask()方法,那么什么都不会发生,即不会再显示屏蔽层。

2. 调用unmask()方法解除屏蔽。

$("#myDiv").unmask();

3. 调用isMasked()方法判断某个DOM元素是否已屏蔽。

if($("#myDiv").isMasked()){
  $("#myDiv").unmask();
}

jquery插件Loadmask的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  3. BootStrap_04之jQuery插件(导航、轮播)、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  4. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  5. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  6. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

随机推荐

  1. python百分号%—%s、%d、%f

    百分号%表示占位符,在后续通过%传入真实的值 %s  拼接字符串,实际可以接受任何类型的值 %d  只能拼接整数数字 %.nf  四舍五入拼接浮点数,n表示保留到小数点后n位,不加.n默认保留6位小数 ...

  2. c++中对应java ShutdownHook的退出处理器

    最近学习cpp(至于为什么,可参考http://www.cnblogs.com/zhjh256/p/6321972.html),c++标准库第二版5.8.2节的时候,发现c++有一个对应java Sh ...

  3. 安装OpenOffice

    附件: OpenOffice 1.下载解压 tar -zxvf Apache_OpenOffice_4.1.3_Linux_x86-64_install-rpm_zh-CN.tar.gz 2.安装 / ...

  4. 20145225 《网络对抗》逆向及Bof基础实践

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  5. MOV/MOVX/MOVC、RAM/ROM

    (一) MOV:访问内部RAM(数据存储器),串行口访问 (对于51单片机来说,内部RAM256bit,00H-FFH) MOVX:访问外部RAM MOVC:访问程序存储器 ROM,(对于51单片机来 ...

  6. git_如何查看两个版本之间那些文件被修改

    需求 由于工程比较庞大,接近500M,每部署一次如果都全量部署,不仅仅磁盘空间耗费较大,最主要是要等很长时间, 之前就一直有这个问题,但是也就没有弄,上周领导发话了,这个问题必须要解决了 前记 增加带 ...

  7. Specify Computed Columns in a Table

    https://docs.microsoft.com/en-us/sql/relational-databases/tables/specify-computed-columns-in-a-table ...

  8. CodeCombat最后一题GridMancer

    http://codecombat.com/play/level/gridmancer 刚开始没看懂,题目,后来才慢慢看懂的, 题目要求,用最少的矩形框填充空白的地方 var grid = this. ...

  9. SPA (单页应用程序)

    单页Web应用 编辑 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程 ...

  10. java的基本数据类型默认值

    这里就举int类型 默认值在类实例化,也就是对象中才有默认值0,或者是静态变量. 1.先看局部变量使用(不行,报错) 2.静态变量 3.类非静态属性