概述

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

使用此插件可以大大提高用户体验,此插件是一个轻量级jquery plugin,只有2kb左右,非常易于使用;

主页:http://code.google.com/p/jquery-loadmask/

Download: http://code.google.com/p/jquery-loadmask/downloads/list

DEMO: http://jquery-loadmask.googlecode.com/svn/trunk/demo/index.html

Quick Start

下载之后的目录结构如下图所示:

使用此插件非常简单,如下步骤所示:

1、  引用jquery,1.2.3以上版本

<script type="text/javascript" src="jquery-1.7.1.js"></script>

2、  引用jquery.loadmask.css、jquery.loadmask.js(或者min版jquery.loadmask.min.js)

<link href="jquery.loadmask.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='jquery.loadmask.min.js'></script>

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

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

4、  调用unmask()方法解除屏蔽。

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

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

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

方法

mask([label] [,delay])

在选择的DOM元素上显示加载屏蔽层,支持一个或多个selectors。

定义

$.fn.mask = function(label, delay){
……
}

参数

label:

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

=undefined

delay:

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

案例

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

unmask()

移除DOM元素上的屏蔽层,此方法支持一个或多个selector;

定义

$.fn.unmask = function(){
……
}

参数

案例

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

isMasked()

检查一个DOM元素上是否有屏蔽层,如果没有屏蔽层或屏蔽层延迟显示,都返回false,否则返回true;

定义

$.fn.isMasked = function(){
……
}

参数

案例

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

实现分析

调用mask方法之后,会在指定的DOM元素追加一个div元素:

<div class="loadmask"></div>

可以通过更改jquery.maskload.css文件中的.loadmask class来更改此屏蔽层样式;

如果label有值,会再追加一个DIV元素

<div class="loadmask-msg"><div>Waiting...</div></div>

可以通过更改jquery.maskload.css文件中的.loadmask-msg类来更改提示信息样式;

jquery.maskload.js学习笔记的更多相关文章

  1. jquery.tablesorter.js 学习笔记

    jquery.tablesorter.js 一般情况下,表格数据的排序方式有两种,第一种是让后端服务将排序后的数据直接输出,另外一种方式就是使用客户端排序,而jquery.tablesorter.js ...

  2. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  3. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  4. Node.js学习笔记(3):NPM简明教程

    Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  7. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

随机推荐

  1. Python队列服务 Python RQ Functions from the __main__ module cannot be processed by workers.

    在使用Python队列服务 Python RQ 时候的报错: Functions from the __main__ module cannot be processed by workers. 原因 ...

  2. Java条形码生成方案及二维码要点

    1.什么是条形码及其应用 条形码(barcode)是将宽度不等的多个黑条和空白,按照一定的规则排列,用来表示一组信息的图形标识符.常见的条形码是由反射率相差很大的黑条和白条排成的平行线图案. 条形码可 ...

  3. Moq4在.NET3.5和.NET4版本之间的差异

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Moq4在.NET3.5和.NET4版本之间的差异.

  4. 【16】成对使用new和delete时要采取相同形式

    简而言之,new时不带[],delete时也不带[]:new时带[],delete时也要带[].如果不匹配,要么造成多销毁对象,导致未定义行为:要么导致少销毁对象,导致内存泄漏.

  5. Media Player框架

    导入MediaPlayer.framework框架. //声明一个媒体播放器 var moviePlayer:MPMoviePlayerController? @IBAction func playM ...

  6. verilog语法:进程名

    always @ (posedge clk, negedge rstn)begin:State_flipflops if(!rstn) y<=S1; else y<=Y;end请问这段程序 ...

  7. Java类加载及实例化的调用顺序

    标题起得略拗口,大概意思就是说在一个Java类中,域和构造方法的调用顺序. 1. 没有继承的情况 单独一个类的场景下,初始化顺序为依次为 静态数据,继承的基类的构造函数,成员变量,被调用的构造函数. ...

  8. 黑色遮罩引导蒙版 CSS实现方式

    一.微云的实现 网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的. 然后上周五我去微云转悠的时候,也看到了引导层 ...

  9. MongoDB 2.6.x 的安装部署

    1. 下载mongodb 2.6.x版本的zip包,在D盘创建目录MongoDB,解压缩到D:\MongoDB目录. 创建数据库目录D:\MongoDB\data,接下来打开命令行窗口,切换到D:\M ...

  10. 20160127 linux 学习笔记

    Linux学习笔记第一天 Linux基本介绍 Linux的起源和发展: 简单说linux是一种操作系统,可以安装在包括服务器.个人电脑,乃至PDA.手机.打印机等各类设备中. 起源: Linux起源于 ...