jquery.maskload.js學(xué)習(xí)筆記

昵稱10504424 2013-11-18

展開全文

概述

Loadmask是一個(gè)jquery plugin，使用此插件可以在DOM元素加載或更改內(nèi)容時(shí)為此DOM元素添加一個(gè)屏蔽層，以防止用戶互動，同時(shí)起到提醒用戶后臺任務(wù)正在運(yùn)行的作用。

使用此插件可以大大提高用戶體驗(yàn)，此插件是一個(gè)輕量級jquery plugin，只有2kb左右，非常易于使用；

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

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

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

Quick Start

下載之后的目錄結(jié)構(gòu)如下圖所示：

使用此插件非常簡單，如下步驟所示：

1、引用jquery，1.2.3以上版本

1	`<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、調(diào)用mask(label,delay)方法屏蔽DOM元素。

4、調(diào)用unmask()方法解除屏蔽。

5、調(diào)用isMasked()方法判斷某個(gè)DOM元素是否已屏蔽。

方法

mask([label] [,delay])

在選擇的DOM元素上顯示加載屏蔽層，支持一個(gè)或多個(gè)selectors。

定義

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

參數(shù)

label:

一個(gè)文本字符串，顯示在最外層的一個(gè)加載提示信息（在等待圖片邊上），如果此參數(shù)值為undefined，則只顯示一個(gè)不帶等待圖標(biāo)和文本提示的屏蔽層；

=undefined

delay:

以毫秒為單位的延遲顯示屏蔽層的時(shí)間，如果還沒有到延遲時(shí)間又調(diào)用了unmask()方法，那么什么都不會發(fā)生，即不會再顯示屏蔽層。

案例

unmask()

移除DOM元素上的屏蔽層，此方法支持一個(gè)或多個(gè)selector；

定義

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

參數(shù)

無

案例

isMasked()

檢查一個(gè)DOM元素上是否有屏蔽層，如果沒有屏蔽層或屏蔽層延遲顯示，都返回false，否則返回true；

定義

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

參數(shù)

無

案例

實(shí)現(xiàn)分析

調(diào)用mask方法之后，會在指定的DOM元素追加一個(gè)div元素：

可以通過更改jquery.maskload.css文件中的.loadmask class來更改此屏蔽層樣式；

如果label有值，會再追加一個(gè)DIV元素

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

可以通過更改jquery.maskload.css文件中的.loadmask-msg類來更改提示信息樣式；

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)