<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆-57  評論-117  文章-1  trackbacks-0

    對jQuery blockUI插件進行了小的封裝擴展,支持confirm、alert、dialog彈出窗口提示信息,支持按鈕回調(diào)事件。可以自定義css樣式、覆蓋blockUI的樣式等

    首先要到j(luò)query blockUI 官方網(wǎng)址:http://malsup.com/jquery/block/

    下載jquery.blockUI JS lib:http://malsup.com/jquery/block/jquery.blockUI.js?v2.38

    而且還需要jquery lib:http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

    jquery.blockUI.dialog.js

    /***
     * jquery blockUI Dialog plugin 
     * v1.1 
     * @createDate -- 2012-1-4
     * @author hoojo
     * @email hoojo_@126.com
     * @requires jQuery v1.2.3 or later, jquery.blockUI-2.3.8
     * Copyright (c) 2012 M. hoo
     * Dual licensed under the MIT and GPL licenses:
     * http://hoojo.cnblogs.com
     * http://blog.csdn.net/IBM_hoojo
     **/
     
    ;(function ($) {
        
        var _dialog = $.blockUI.dialog = {};
        
        // dialog 默認配置
        var defaultOptions = {
            css: { 
                paddingTop: '15px', 
                paddingBottom: '12px', 
                opacity: .7, 
                color: '#ffffff',
                border: 'none', 
                'border-radius': '10px', 
                backgroundColor: '#000000' 
            },
            
            // 默認回調(diào)函數(shù) 取消或隱藏 dialog
            emptyHandler: function () {
                $.unblockUI();
            },
            
            // 用戶回調(diào)函數(shù)
            callbackHandler: function (fn) {
                return function () {
                    fn();
                    defaultOptions.emptyHandler();
                };
            },
            
            // confirm 提示 html元素
            confirmElement: function (settings) {
                settings = settings || {};
                var message = settings.message || "default confirm message!";
                var okText = settings.okText || "ok";
                var cancelText = settings.cancelText || "cancel";
                
                if (typeof settings.onOk !== "function") {
                    settings.onOk = this.emptyHandler;
                }
                if (typeof settings.onCancel !== "function") {
                    settings.onCancel = this.emptyHandler;
                }
                var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;
                var cancelCallback = this.callbackHandler(settings.onCancel) || this.emptyHandler;
                
                var html = [
                    '<div class="dialog confirm">',
                    '<p>',
                    message,
                    '</p>',
                    '<input type="button" value="',
                    okText,
                    '" class="btn ok-btn"/>',
                    '<input type="button" value="',
                    cancelText,
                    '" class="btn cancel-btn"/>'
                ].join("");
                
                var $el = $(html);
                $el.find(":button").get(0).onclick =  okCallback;
                $el.find(":button:last").get(0).onclick = cancelCallback;
                return $el;
            },
            
            // alert 提示html元素
            alertElement: function (settings) {
                settings = settings || {};
                var message = settings.message || "default alert message!";
                var okText = settings.okText || "ok";
                
                if (typeof settings.onOk !== "function") {
                    settings.onOk = this.emptyHandler;
                }
                
                var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;
                
                var html = [
                    '<div class="dialog alert">',
                    '<p>',
                    message,
                    '</p>',
                    '<input type="button" value="',
                    okText,
                    '" class="btn ok-btn"/>'
                ].join("");
                
                var $el = $(html);
                
                $el.find(":button:first").get(0).onclick =  okCallback;
                return $el;
            }
        };
        
        var _options = defaultOptions;
        
        // 對外公開的dialog提示html元素,提供配置、覆蓋
        $.blockUI.dialog.confirmElement = function () {
            return _options.confirmElement(arguments[0]);
        };
        
        $.blockUI.dialog.alertElement = function () {
            return _options.alertElement(arguments[0]);
        };
        
        // 提供jquery 插件方法
        $.extend({
            confirm: function (opts) {
                var i = (typeof opts === "object") ? 1 : 0;
                var defaults = {
                    message: arguments[i++] || "default confirm message!",
                    onOk: arguments[i++] || _options.emptyHandler(),
                    onCancel: arguments[i++] || _options.emptyHandler(),
                    okText: arguments[i++] || "ok",
                    cancelText: arguments[i] || "cancel"
                };
                opts = opts || {};
                opts.css = $.extend({}, _options.css, opts.css);
                
                // 覆蓋默認配置
                var settings = $.extend({}, _options, defaults, opts);
                settings = $.extend(settings, { message: _dialog.confirmElement(settings) });
                settings = $.extend({}, $.blockUI.defaults, settings);
                $.blockUI(settings);
            },
            alert: function (opts) {
                var i = (typeof opts === "object") ? 1 : 0;
                
                var defaults = {
                    message: arguments[i++] || "default alert message!",
                    onOk: arguments[i++] || _options.emptyHandler(),
                    okText: arguments[i] || "ok"
                };
                
                opts = opts || {};
                opts.css = $.extend({}, _options.css, opts.css);
                
                var settings = $.extend({}, _options, defaults, opts);
                settings = $.extend(settings, { message: _dialog.alertElement(settings) });
                settings = $.extend({}, $.blockUI.defaults, settings);
                $.blockUI(settings);
            },
            
            // dialog提示
            dialog: function (opts) {
                var settings = $.extend({}, $.blockUI.defaults, _options, opts || {});
                $.blockUI(settings);
            },
            // 移除dialog提示框
            removeDialog: function () {
                _options.emptyHandler();
            }
        });
    })(jQuery);

    應用樣式文件block.dialog.css

    dialog是全局樣式,btn是所有按鈕的樣式、ok-btn是ok按鈕樣式、cancel-btn是取消按鈕樣式

    .dialog {
        font-size: 12px;
    }
     
    .btn {
        border: 1px solid #ccc;
        /*background-color: #ccc;*/
        border-radius: 5px;
        min-width: 25%;
        width: auto;
        font-size: 12px;
    }
     
    .ok-btn {
        /*background-color: #ccc;*/
    }
     
    .cancel-btn { 
        /*background-color: #aeface;*/
        margin-left: 10%;
    }

     

    examples.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>blockUI Dialog Examples</title>
        
        <meta http-equiv="author" content="hoojo">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="blockUI/block.dialog.css" />
        <link rel="stylesheet" href="blockUI/block.css" />
        <script type="text/javascript" charset="UTF-8" src="mobile/jquery-1.6.4.js"></script>
        <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI-2.3.8.js"></script>
        <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI.dialog-1.1.js"></script>
        
        <script type="text/javascript">
            ;(function ($) {
                $(function () {
                
                    // dialog 提示框
                    $("#dialog").click(function () {
                        //$.dialog();
                        //$.dialog({message: $("#callback")});
                        $.dialog({
                            //theme: true, // 設(shè)置主題需要jquery UI http://www.malsup.com/jquery/block/theme.html                
                            title: "dialog",
                            message: $("#callback"),
                            fadeIn: 1000,
                            fadeOut: 1200
                        });
                        setTimeout($.removeDialog, 2000);
                    });
                    
                    // 帶確定、取消按鈕提示框,支持事件回調(diào),及message等屬性配置
                    $("#confirm").click(function () {
                        $.confirm({
                            message: "你確定要刪除嗎?",
                            okText: "確定",
                            cancelText: "取消",
                            onOk: function () {
                                alert("你點擊了確定按鈕");
                            },
                            onCancel: function () {
                                alert("你點擊了取消按鈕");
                            }
                        });
                    });    
                    
                    // 警告提示框 對象模式配置css、message、按鈕文本提示
                    $("#alert").click(function () {
                        $.alert({
                            message: "你確定要刪除嗎?",
                            okText: "確定",
                            css: {
                                "background-color": "white",
                                "color": "red"
                            },
                            onOk: function () {
                                alert("你點擊了確定按鈕");
                            }
                        });
                    });
                    
                    // 非對象配置屬性,多個參數(shù)配置
                    /**
                      $.confirm 方法參數(shù)config配置介紹:
                      當?shù)谝粋€參數(shù)是一個對象:
                      對象中可以出現(xiàn)以下屬性配置,并且可以出現(xiàn)$.blockUI的配置
                          {
                            message: arguments[i++] || "default confirm message!",
                            onOk: arguments[i++] || _options.emptyHandler(),
                            onCancel: arguments[i++] || _options.emptyHandler(),
                            okText: arguments[i++] || "ok",
                            cancelText: arguments[i] || "cancel"
                        }
                        message 是提示框的提示信息
                        onOk是確定按鈕的click回調(diào)函數(shù)
                        onCancel 是取消按鈕的click事件回調(diào)方法
                        okText是ok按鈕的文字 默認是ok
                        cancelText是cancel按鈕的文本內(nèi)容
                      
                      如果第一個參數(shù)不是一個對象,那么
                          參數(shù)1表示 message 及提示文字
                        參數(shù)2表示ok按鈕的click事件回調(diào)函數(shù)
                        參數(shù)3表示cancel按鈕的click事件回調(diào)函數(shù)
                        參數(shù)4表示ok按鈕的文本
                        參數(shù)5表示cancel按鈕的文本內(nèi)容
                        
                      注意:如果第一參數(shù)是一個對象,后面又出現(xiàn)了相應的參數(shù)配置;這種情況下對象配置優(yōu)先于
                      后面的參數(shù)配置,而且參數(shù)的位置也會改變:
                          參數(shù)1是對象配置
                        參數(shù)2表示 message 及提示文字
                        參數(shù)3表示ok按鈕的click事件回調(diào)函數(shù)
                        參數(shù)4表示cancel按鈕的click事件回調(diào)函數(shù)
                        參數(shù)5表示ok按鈕的文本
                        參數(shù)6表示cancel按鈕的文本內(nèi)容
                    */
                    $("#confirm2").click(function () {
                        $.confirm({ message: "is a message", timeout: 3000 }, "message", function () {
                                alert("success");
                            }, function () {
                                alert("failure");
                            }, "按鈕");
                    });    
                    
                    /**
                       第一個參數(shù)是對象配置,當對象配置中出現(xiàn)的選項會覆蓋后面的參數(shù)配置
                       $.alert 方法 config 介紹:
                       當?shù)谝粋€參數(shù) 是一個對象:
                         {
                             message: arguments[i++] || "default alert message!",
                             onOk: arguments[i++] || _options.emptyHandler(),
                             okText: arguments[i] || "ok"
                        }
                        message 是提示框的提示信息
                        onOk是確定按鈕回調(diào)函數(shù)
                        okText是ok按鈕的文字 默認是ok
                        
                      當?shù)谝粋€參數(shù)不是一個對象的情況下,那么
                        參數(shù)1表示 message 及提示文字
                        參數(shù)2表示ok按鈕的click事件
                        參數(shù)3表示ok按鈕的文本
                        
                        注意:如果第一個參數(shù)是一個對象,對象中出現(xiàn)的配置:message、onOk、okText,這些配置將會
                        覆蓋后面的配置,也就是說這些配置在第一個參數(shù)中出現(xiàn)后,后面的參數(shù)就不需要
                     */
                    $("#alert2").click(function () {
                        $.alert({
                            css: {
                                "background-color": "red"
                            },
                            timeout: 1200,
                            onOk: function () {
                                alert("確定");
                            }
                        }, 
                        "你有一條消息", 
                        function () {
                            alert("被覆蓋");
                        }, "yes?");
                    });        
                    
                    var _confirm = function (msg) {
                        $.confirm({
                            message: msg,
                            onOk: function () {
                                alert("你點擊了確定按鈕");
                            },
                            onCancel: function () {
                                alert("你點擊了取消按鈕");
                            }
                        });                    
                    };
                    $("#confirm3").click(function () {
                        _confirm("message");
                    });        
                    
                    var _alert = function (msg) {
                        $.alert({
                            message: msg,
                            css: {
                                "background-color": "white",
                                "color": "red"
                            },
                            onOk: function () {
                                alert("你點擊了確定按鈕");
                            }
                        });
                    }
                    $("#alert3").click(function () {
                        _alert();
                    });    
                });
            })(jQuery);
        </script>
        
      </head>
          
      <body>
          <ul>
              <h2>jQuery blockUI Dialog Demos</h2>
              <li>dialog demo <input type="button" value="dialog" id="dialog"/></li>
              <li>confirm callback demos<input type="button" value="confirm" id="confirm"/></li>
              <li>confirm callback demos 2<input type="button" value="confirm" id="confirm2"/></li>
              <li>confirm callback demos 3<input type="button" value="confirm" id="confirm3"/></li>
              <li>alert callback demos<input type="button" value="alert" id="alert"/></li>
              <li>alert callback demos 2<input type="button" value="alert" id="alert2"/></li>
              <li>alert callback demos 3<input type="button" value="alert" id="alert3"/></li>
          </ul>
          
          <div style="display: none;">
              <div id="callback">
                  <p>ok or cancel? asdfaf jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos</p>
                  <input type="button" value="OK" class="btn ok-btn"/>
                  <input type="button" value="Cancel" class="btn cancel-btn"/>
              </div>
          </div>
      </body>
    </html>

    image

    作者:hoojo
    出處:
    blog:http://blog.csdn.net/IBM_hoojo
             http://hoojo.cnblogs.com
    本文版權(quán)歸作者和博客園共有,歡迎轉(zhuǎn)載,但未經(jīng)作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權(quán)利。


    版權(quán)所有,轉(zhuǎn)載請注明出處 本文出自:
    分享道版權(quán)所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明出處,謝謝
    posted on 2012-01-09 14:19 hoojo 閱讀(3285) 評論(3)  編輯  收藏 所屬分類: Ajax【富客戶端技術(shù)】HTML/CSSjQuery

    評論:
    # re: jquery blockUI 擴展插件 Dialog 2012-01-09 17:30 | 陽葵
    給個小建議:
    對于參數(shù)的傳遞,建議不要使用固定的位置,比如你的方法當中約定了第幾個參數(shù)是什么內(nèi)容,第幾個參數(shù)是什么內(nèi)容。我覺得這種方式不靈活,而且增加學習成本。

    建議使用:json對象。這樣就不受參數(shù)的位置限制了。直接要調(diào)用方傳入:$.alert({
    message:"",onOk:function(){}
    })  回復  更多評論
      
    # re: jquery blockUI 擴展插件 Dialog 2012-01-10 09:14 | hoojo
    @陽葵
    可以這樣傳遞  回復  更多評論
      
    # re: jquery blockUI 擴展插件 Dialog 2012-01-11 09:10 | tb
    好久沒有用jquery了   回復  更多評論
      
    主站蜘蛛池模板: 亚洲日本视频在线观看| 久香草视频在线观看免费| 亚洲免费在线播放| 天堂亚洲免费视频| 亚洲精品福利你懂| 久艹视频在线免费观看| 亚洲第一区精品观看| 亚洲乱码在线视频| 日韩中文字幕免费视频| 久久久久无码专区亚洲av| 亚洲欧美日韩中文二区| 18禁免费无码无遮挡不卡网站| 亚洲中文字幕不卡无码| 大桥未久亚洲无av码在线| 美女被免费喷白浆视频| 亚洲国产精品第一区二区| 日本激情猛烈在线看免费观看| 成人免费看黄20分钟| 亚洲美女一区二区三区| 久久国产乱子精品免费女| 亚洲午夜成人精品电影在线观看| 亚洲av永久无码精品网址| 免费福利网站在线观看| 夜夜亚洲天天久久| 曰批全过程免费视频在线观看无码| 亚洲日韩人妻第一页| 日韩一级片免费观看| 四虎影院免费在线播放| 亚洲一区欧洲一区| 97免费人妻无码视频| 亚洲综合一区二区| 99re免费视频| 亚洲狠狠综合久久| 久久青草91免费观看| 亚洲Av综合色区无码专区桃色 | 人妻无码久久一区二区三区免费 | 亚洲性猛交xx乱| 香港a毛片免费观看| 久久精品国产亚洲av麻豆| 永久在线观看免费视频| 亚洲AV无码乱码在线观看富二代|