深入学习jquery源码之弹出框插件实现

深入学习jquery源码之弹出框设计

jquery自带的提示框

$.messager.confirm('提示', '您确定通过吗?', function (r) {	
        if (r) {
		
		}
});

弹出框插件

function (window, $, undefined) {

    var COOKIE_USER = "COOKIE_USER",
          SERVICE_ROOT = "http://854:8000/",

        SERVICE_PATH = SERVICE_ROOT + "/",
        TIMEOUT_PATH = "/index.html",
        APP_ID = "656859d2eb52a",
        DEBUG = true
        ;
    $.support.cors = true;
    var jqueryAjax = $.ajax;


    /******************************************core****************************** */
    var _Core = function () {
        var eventarr = [];

        this.DEBUG = function () { return DEBUG; };

        this.SERVICEROOT = function () {
            return SERVICE_ROOT;
        }
        this.APPID = APP_ID;
        //验证失败，
        this.TimeOut = function () {
            //alert("身份验证失败,请重新登录!");
            $Core.LogOut();
            window.top.location.href = TIMEOUT_PATH;
        };

        $(function () {
            var _interval = setInterval(function () {
                //if
                if (!window.ajaxruning) {
                    clearInterval(_interval);
                    pageLoad();
                }
            }, 100);
            $Core.ValidPage();
            $Core.ValidAction();

        });
    };

  window.$Core = new _Core();


  var _UI = function () {
        var _message = function () {
            var createAlert = function (type, msg, timeout) {
                if (timeout === undefined)
                    timeout = 2000;

                var div = $(
                    '<div class="cntenalert" >' +
                    '<div class="alert-icons"></div>' +
                    '<div class="alert-close">×</div>' +
                    '<div class="alert-msg"></div></div>');
                var winWidth = ($(window).width() - 200) / 2;
                div.css("left", winWidth);
                div.addClass(type);

                var close = div.find(".alert-close");
                var divmsg = div.find(".alert-msg");
                close.click(function () {
                    div.fadeOut(function () {
                        div.remove();
                    });
                });

                divmsg.text(msg);

                div.fadeIn(function () {

                });

                $("body").append(div);
                if (timeout > 0)
                    setTimeout(function () {
                        div.fadeOut(function () {
                            div.remove();
                        });
                    }, timeout);

            }
            /**
             * 成功提示
             * @param {any} msg
             */
            this.success = function (msg) {
                createAlert("alert", msg);
            }
            /**
             * 错误的提示
             * @param {any} msg
             */
            this.error = function (msg) {
                createAlert("alert-error", msg, 5000);
            }
            /**
             * 提醒
             * @param {any} msg
             */
            this.warning = function (msg) {
                createAlert("alert-warning", msg, 3000);
            }
            /**
             * 清除所有提示信息
             * */
            this.clear = function () {
                $(".cntenalert").fadeOut(function () {
                    $(".cntenalert").remove();
                });
            }

        }
        this.message = new _message();
        /**
         * 打开一个url 的Dialog 对话框
         * @param {any} id 指定一个名字
         * @param {any} url 页面地址
         * @param {any} options Dialog 参数
         */
        this.openDialog = function (id, url, options) {
            var frameid = id + "_frame";
            var win = $("#" + id);
            if (url.indexOf("?") > -1)
                url = url + "&_r=" + Math.random();
            else
                url = url + "?_r=" + Math.random();
            var getframe = function (id, url) {
                var f = $('<iframe id="{0}" src="{1}" width="100%" height="100%" scrolling="no" frameborder="0" ></iframe>'.format(id, url));
                return f;
            };

            if (win.size() == 0) {
                var $frame = getframe(frameid, url);
                //$frame.height(options.height - 43);
                var defaultOptions = {
                    maximizable: true,
                    resizable: true,
                    closed: false,
                    cache: false,
                    modal: true,
                    constrain: true,
                    width: "80%",
                    height: "90%"
                };
                if (options) {
                    $.extend(defaultOptions, options,
                        {
                            onClose: function () {
                                win.remove();
                                if ($.isFunction(options.onClose)) {
                                    options.onClose.apply(this);
                                }
                            }
                        });
                }
                defaultOptions.content = $frame;

                var dd = $("<div id='" + id + "' style='overflow:hidden' />");
                return dd.dialog(defaultOptions);
            } else {
                $("#" + frameid).attr("src", url);
                return win.dialog("open");
            }

        }
    };
    $Core.UI = new _UI();
})(window, jQuery);

使用:

$Core.UI.message.warning("选请选择数据!");

$Core.UI.message.success("保存成功！");


 $Core.UI.message.error(data.msg);

                var url = "../user/UserForm.html?s=" + Math.random();
                $Core.UI.openDialog("redwind", url + "&id=" + value +"&type=red",
                    {
                        title: "查看",
                        width: '80%',
                        height: '90%',
                        onClose: function () {
                        }
                    });