<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彈出窗口提示信息,支持按鈕回調事件。可以自定義css樣式、覆蓋blockUI的樣式等

    首先要到jquery blockUI 官方網址: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' 
            },
            
            // 默認回調函數 取消或隱藏 dialog
            emptyHandler: function () {
                $.unblockUI();
            },
            
            // 用戶回調函數
            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, // 設置主題需要jquery UI http://www.malsup.com/jquery/block/theme.html                
                            title: "dialog",
                            message: $("#callback"),
                            fadeIn: 1000,
                            fadeOut: 1200
                        });
                        setTimeout($.removeDialog, 2000);
                    });
                    
                    // 帶確定、取消按鈕提示框,支持事件回調,及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("你點擊了確定按鈕");
                            }
                        });
                    });
                    
                    // 非對象配置屬性,多個參數配置
                    /**
                      $.confirm 方法參數config配置介紹:
                      當第一個參數是一個對象:
                      對象中可以出現以下屬性配置,并且可以出現$.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回調函數
                        onCancel 是取消按鈕的click事件回調方法
                        okText是ok按鈕的文字 默認是ok
                        cancelText是cancel按鈕的文本內容
                      
                      如果第一個參數不是一個對象,那么
                          參數1表示 message 及提示文字
                        參數2表示ok按鈕的click事件回調函數
                        參數3表示cancel按鈕的click事件回調函數
                        參數4表示ok按鈕的文本
                        參數5表示cancel按鈕的文本內容
                        
                      注意:如果第一參數是一個對象,后面又出現了相應的參數配置;這種情況下對象配置優先于
                      后面的參數配置,而且參數的位置也會改變:
                          參數1是對象配置
                        參數2表示 message 及提示文字
                        參數3表示ok按鈕的click事件回調函數
                        參數4表示cancel按鈕的click事件回調函數
                        參數5表示ok按鈕的文本
                        參數6表示cancel按鈕的文本內容
                    */
                    $("#confirm2").click(function () {
                        $.confirm({ message: "is a message", timeout: 3000 }, "message", function () {
                                alert("success");
                            }, function () {
                                alert("failure");
                            }, "按鈕");
                    });    
                    
                    /**
                       第一個參數是對象配置,當對象配置中出現的選項會覆蓋后面的參數配置
                       $.alert 方法 config 介紹:
                       當第一個參數 是一個對象:
                         {
                             message: arguments[i++] || "default alert message!",
                             onOk: arguments[i++] || _options.emptyHandler(),
                             okText: arguments[i] || "ok"
                        }
                        message 是提示框的提示信息
                        onOk是確定按鈕回調函數
                        okText是ok按鈕的文字 默認是ok
                        
                      當第一個參數不是一個對象的情況下,那么
                        參數1表示 message 及提示文字
                        參數2表示ok按鈕的click事件
                        參數3表示ok按鈕的文本
                        
                        注意:如果第一個參數是一個對象,對象中出現的配置:message、onOk、okText,這些配置將會
                        覆蓋后面的配置,也就是說這些配置在第一個參數中出現后,后面的參數就不需要
                     */
                    $("#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
    本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。


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

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

    建議使用:json對象。這樣就不受參數的位置限制了。直接要調用方傳入:$.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了   回復  更多評論
      
    主站蜘蛛池模板: 美女被免费视频网站a| 亚洲色偷偷av男人的天堂| 精品亚洲456在线播放| 国产福利在线免费| 亚洲一区二区三区深夜天堂| 在线免费观看你懂的| 亚洲精品在线播放| 青青青国产在线观看免费网站| 亚洲avav天堂av在线网爱情| 在线视频免费观看高清| 亚洲国产精品成人午夜在线观看| 成人免费无码视频在线网站| 久久久久亚洲AV无码去区首| 免费一级毛片在线播放不收费| 高清免费久久午夜精品| 亚洲国产无套无码av电影| 在线成人精品国产区免费| 亚洲春色在线观看| 色播在线永久免费视频| 成年网站免费入口在线观看| 久久精品国产亚洲AV果冻传媒| www视频免费看| 国产综合激情在线亚洲第一页| 亚洲伊人久久综合影院| 99精品视频在线观看免费专区 | 中文字幕亚洲图片| 免费视频成人片在线观看| 激情综合亚洲色婷婷五月APP| 在线免费观看一级毛片| 久久国产乱子伦精品免费午夜| 91情国产l精品国产亚洲区| 成年美女黄网站18禁免费| 午夜在线免费视频| 久久亚洲精品人成综合网| 蜜桃精品免费久久久久影院| 久草免费福利视频| 亚洲AV无码国产一区二区三区| 国产成人精品日本亚洲网站| 24小时日本在线www免费的| 一级特黄录像免费播放中文版| 亚洲理论片中文字幕电影|