JQuery.BlockUI是眾多JQuery插件彈出層中的一個，它小巧（原版16k，壓縮后10左右）,容易使用, 功能齊全，支持Iframe，支持Modal，可定制性高也意味他默認(rèn)謙虛的外表。

jQuery的BlockUI插件可以讓你在使用AJAX時模擬同步行為，鎖定瀏覽器(模式窗口)。當(dāng)被激活時，它會防止用戶活動的頁面（或頁面的一部分），直到它被禁用。 BlockUI添加元素的DOM，給它的外觀和阻止用戶交互行為。

1、首先引入插件

2、調(diào)用

3、樣式修改

jQuery blockUI 提供的默認(rèn)樣式過于樸素, 可以在每一次調(diào)用blockUI() 函數(shù)時進(jìn)行修改. 也一次直接修改庫文件 jquery.blockUI.js, 修改$.blockUI.defaults 對象相關(guān)的代碼：

顯示源碼

// 重寫defaults對象中的屬性
    $.blockUI.defaults = { 
    
    //彈出的信息
    message:  '<h1>Please wait...</h1>', 
 
    //定義消息框樣式
    // $.blockUI.defaults.css = {}; 

    //默認(rèn)定義消息框樣式Css樣式
    css: { 
        padding:        0, 
        margin:         0, 
        width:          '30%', 
        top:            '40%', 
        left:           '35%', 
        textAlign:      'center', 
        color:          '#000', 
        border:         '3px solid #aaa', 
        backgroundColor:'#fff', 
        cursor:         'wait' 
    }, 
 
    // 遮罩樣式
    overlayCSS:  { 
        backgroundColor: '#000', //顏色
        opacity:         0.6 //透明度
    }, 
 
    // 使用$.growlUI完成自動氣泡時的樣式 
    growlCSS: { 
        width:    '350px', 
        top:      '10px', 
        left:     '', 
        right:    '10px', 
        border:   'none', 
        padding:  '5px', 
        opacity:   0.6, 
        cursor:    null, 
        color:    '#fff', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px',  //貌似是圓角
        '-moz-border-radius':    '10px' 
    }, 
 
    // 是否在非IE瀏覽器中使IFrame獲得焦點，未驗證的
    forceIframe: false, 
 
    // 遮罩層的Z-Index值，越大越在上面
    baseZ: 1000, 
 
    // 是否居中
    centerX: true, 
    centerY: true, 
 
    //是否允許拉大 
    //短的網(wǎng)頁上。禁用如果你想防止車身高度的變化
    allowBodyStretch: true, 
 
   //遮罩時是否禁用鍵盤和鼠標(biāo)事件
    bindEvents: true, 
 
    // be default blockUI will supress tab navigation from leaving blocking content 
    // (if bindEvents is true) 
    //遮罩內(nèi)容的Tab導(dǎo)航是否可用
    constrainTabKey: true, 
 
    //淡入時間
    fadeIn:  200, 
 
       //淡出時間
    fadeOut:  400, 
 
    // time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock 
    //自動淡出時間
    timeout: 0, 
 
    //disable if you don't want to show the overlay 
    //是否自動遮罩
    showOverlay: true, 
 
    // if true, focus will be placed in the first available input field when 
    // page blocking 
    //自動獲得焦點
    focusInput: true, 
 
    //抑制FF/Linux的疊加樣式的使用（由于具有不透明的性能問題）
    applyPlatformOpacityRules:true,
 
    //調(diào)用解封已完成時回調(diào)方法;
    // onUnblock(element, options) 
    onUnblock: null

 總結(jié)：上面的文字個人認(rèn)為寫的比較爛，但基本的使用沒有問題，詳盡的支持是官網(wǎng)：http://www./jquery/block/,這個站還有一些其它插件也值得看看。

本文示例下載

tipswindow是一個很一般的JQuery彈出層插件，但使用簡單，有相對漂亮的外觀，代碼比較通俗。下面介紹使用方法：

1、首先引入該插件相關(guān)文件，分別是樣式，JQuery庫，該插件

2、修改tipswindow.css文件中圖片的路徑，默認(rèn)與css文件在同一個目錄下。
3、編寫代碼，如在圖片上設(shè)置單擊事件后放大顯示圖片：

其它用法網(wǎng)友總結(jié)如下：
1.彈出文本信息提示：
tipsWindown("提示","text:提示信息內(nèi)容","250","150","true","","true","msg")

2.彈出頁面中的某個ID的html：
tipsWindown("標(biāo)題","id:testID","300","200","true","","true","id")

3.彈出圖片：
tipsWindown("圖片","img:圖片路徑","250","150","true","","true","img")

4.get加載一個.html文件（也可以是.php/.asp?id=4之類的）：
tipsWindown("標(biāo)題","url:get?test.html","250","150","true","","true","text");

5.加載一個頁面到框架顯示：
tipsWindown("標(biāo)題","iframe:http://","900","580","true","","true","leotheme");

6.彈出一個不能拖動且沒有遮罩背景的文本信息層：
tipsWindown("提示","text:提示信息內(nèi)容","250","150","false","","false","msg")

7.彈出一個不能拖動，三秒鐘自動關(guān)閉的層：
tipsWindown("提示","text:提示信息內(nèi)容","250","150","false","3000","true","msg")

1、下載本文示例
2、下載官方最新示例與框架（推薦）
官網(wǎng)：http:///javascript/jquery-plugins-tipswindow-2-0.html

jquery.validate是基于jquery的一個B/S客戶端驗證框架，借助jquery的優(yōu)勢，我們可以迅速驗證一些常見的輸入,大大提高了開發(fā)效率，下面是本人做的學(xué)習(xí)筆記：

示例源碼下載

注意：validate只是使驗證變得方便，簡單，本質(zhì)還是使用js，不論多么強大的js驗證，當(dāng)用戶把js禁用或使用機(jī)器直接發(fā)起請求時都不能確保數(shù)據(jù)的完整性，所有不要把希望寄托在客戶端驗證，個人認(rèn)為每一個客戶端驗證都要服務(wù)器進(jìn)行再次驗證。

radio、checkbox、select的驗證其實方法與前面提到?jīng)]有太大的區(qū)別，但問題是錯誤信息會顯示在同一組的第一個元素后面，效果如下所示：

解決這個問題的辦法是將錯誤信息指定到一個特定的位置，validate()方法的參數(shù)中可以進(jìn)行自定義，示例代碼如下:

View Code

<script type="text/javascript">
        jQuery.validator.addMethod("regex",    //addMethod第1個參數(shù):方法名稱
        function(value, element, params) {     //addMethod第2個參數(shù):驗證方法，
            　　　　　　　　　　　　　　　　　　　　//驗證方法參數(shù)（被驗證元素的值，被驗證元素，參數(shù)）
            var exp = new RegExp(params);      //實例化正則對象，參數(shù)為用戶傳入的正則表達(dá)式
            return exp.test(value);                    //測試是否匹配
        },
        "格式錯誤");

        $(function() {
            $("#signupForm").validate(

            {
            rules: {
                txtPassword1: "required",  //密碼1必填

                txtPassword2: {    //密碼2的描述多于1項使用對象類型
                    required: true,  //必填，這里可以是一個匿名方法
                    equalTo: "#txtPassword1",  //必須與密碼1相等
                    rangelength: [5, 10],    //長度5-10之間
                    regex: "^\\w+$"          //使用自定義的驗證規(guī)則
                },

                txtEmail: "email",   //電子郵箱必須合法
                sex: "required"
            },
            messages: {  //對應(yīng)上面的錯誤信息
                txtPassword1: "您必須填寫",

                txtPassword2: {
                    required: "您必須填寫",
                    equalTo: "密碼不一致",
                    rangelength: "長度必須介于{0} 和 {1} 之間的字符串",
                    regex: "密碼只能是數(shù)字、字母與下劃線"
                }
            },

　　　　　　
            //在上例中新增的部分
            errorPlacement: function(error, element) { //指定錯誤信息位置
            if (element.is(':radio') || element.is(':checkbox')) {  //如果是radio或checkbox
                    var eid = element.attr('name');  //獲取元素的name屬性
                    error.appendTo(element.parent());    //將錯誤信息添加當(dāng)前元素的父結(jié)點后面
                } else {
                    error.insertAfter(element); 
                }
            },

            debug: false,  //如果修改為true則表單不會提交
            submitHandler: function() {
                alert("開始提交了");
            }
        });
    });
    </script>

        <p>
            <label for="sex">
                性別</label>
            <input type="radio" id="rdoFemale" name="sex" />男
            <input type="radio" id="rdoMale" name="sex" />女
        </p>

運行結(jié)果如下：

此外：如果在參數(shù)中加上debug:true則只用于調(diào)試表單不會提交到服務(wù)器; submitHandler: function() {}將會在表單提交到服務(wù)器前執(zhí)行一些操作;用remote可以進(jìn)行Ajax驗證,好像有個小bug;在使用ASP.NET與validate組合使用時會有一些問題可以參考網(wǎng)友的博文。 

1、在ASP.NET中按鈕都會解析成submit所有都會觸發(fā)驗證，如果想讓某個按鈕不觸發(fā)驗證可以加上這個樣式：class="cancel"

源碼下載

運行結(jié)果：

注意,如果參數(shù)有多個可以使用數(shù)組，如regex:[1,3,5],方法中可以使用下標(biāo)訪問：params[0]

網(wǎng)友提供的一些擴(kuò)展驗證方法:
// 手機(jī)號碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機(jī)號碼格式錯誤");  

// 電話號碼驗證  
jQuery.validator.addMethod("phone", function(value, element) {
    var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
    return this.optional(element) || (tel.test(value));
}, "電話號碼格式錯誤");

// 郵政編碼驗證  
jQuery.validator.addMethod("zipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "郵政編碼格式錯誤");

// QQ號碼驗證  
jQuery.validator.addMethod("qq", function(value, element) {
    var tel = /^[1-9]\d{4,9}$/;
    return this.optional(element) || (tel.test(value));
}, "qq號碼格式錯誤");

// IP地址驗證
jQuery.validator.addMethod("ip", function(value, element) {
    var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式錯誤");

// 字母和數(shù)字的驗證
jQuery.validator.addMethod("chrnum", function(value, element) {
    var chrnum = /^([a-zA-Z0-9]+)$/;
    return this.optional(element) || (chrnum.test(value));
}, "只能輸入數(shù)字和字母(字符A-Z, a-z, 0-9)");

// 中文的驗證
jQuery.validator.addMethod("chinese", function(value, element) {
    var chinese = /^[\u4e00-\u9fa5]+$/;
    return this.optional(element) || (chinese.test(value));
}, "只能輸入中文");

// 下拉框驗證
$.validator.addMethod("selectNone", function(value, element) {
    return value == "請選擇";
}, "必須選擇一項");

// 字節(jié)長度驗證
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for (var i = 0; i < value.length; i++) {
        if (value.charCodeAt(i) > 127) {
            length++;
        }
    }
    return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("請確保輸入的值在{0}-{1}個字節(jié)之間(一個中文字算2個字節(jié))"));

源碼下載

我們先來使用firebug查看在前面的示例中JS產(chǎn)生的html錯誤提示:

 源碼下載

顯示源碼 

<script type="text/javascript">
        $(function() {
            $("#signupForm").validate(

            //在上例中新增的部分
            {
            rules: {
                txtPassword1: "required",  //密碼1必填

                txtPassword2: {    //密碼2的描述多于1項使用對象類型
                    required: true,  //必填，這里可以是一個匿名方法
                    equalTo: "#txtPassword1",  //必須與密碼1相等
                    rangelength: [5, 10]    //長度5-10之間
                },

                txtEmail: "email"   //電子郵箱必須合法
            },
            messages: {
                txtPassword1: "您必須填寫",

                txtPassword2: {
                    required: "您必須填寫",
                    equalTo: "密碼不一致",
                    rangelength: "長度必須介于{0} 和 {1} 之間的字符串"
                }
            }

        });
    });
</script>

html與前面的示例相同
在上一個示例的基礎(chǔ)上添加了一個messages項，為其指定了一個對象類型的值，與rules基本對應(yīng),特意沒有指定email的錯誤信息，運行結(jié)果如下：

顯示源碼

<script type="text/javascript">
        $(function() {
            $("#signupForm").validate(
            
            //在上例中新增的部分
            {
                rules: {
                    txtPassword1: "required",  //密碼1必填

                    txtPassword2: {    //密碼2的描述多于1項使用對象類型
                        required: true,  //必填，這里可以是一個匿名方法
                        equalTo: "#txtPassword1",  //必須與密碼1相等
                        rangelength: [5, 10]    //長度5-10之間
                    },

                    txtEmail: "email"   //電子郵箱必須合法
                }

            });
        });
    </script>

<form id="signupForm" method="get" action="">
    <fieldset>
        <legend>用戶注冊</legend>
        <p>
            <label for="txtPassword1">
                密碼1</label>
            <input id="txtPassword1" name="txtPassword1" type="password" />
        </p>
        <p>
            <label for="txtPassword2">
                密碼2</label>
            <input id="txtPassword2" name="txtPassword2" type="password" />
        </p>
        <p>
            <label for="txtEmail">
                郵箱</label>
            <input id="txtEmail" name="txtEmail" />
        </p>
        <p>
            <input type="submit" value="提交" />
        </p>
    </fieldset>
</form>

遠(yuǎn)行結(jié)果：

注意：在ASP.NET中使用這種JS驗證方法最好將服務(wù)器控件Id替換成客戶端Id,如：<%=控件Id.ClientId %>,<%=控件Id.UniqueId>

源碼下載