首页 > Web开发 > 详细

JS弹出框插件zDialog再次封装

时间:2016-01-14 00:49:31      阅读:240      评论:0      收藏:0      [点我收藏+]

    zDialog插件网址:http://www.jq22.com/jquery-info2426

    再次封装zDialog的代码:

技术分享
(function ($) {
    $.extend({
        iDialog: function (param) {
            var diag = new Dialog();
            if (!param.height && !param.width) {
                diag.Width = $(top.window).width();
                diag.Height = $(top.window).height();
            }
            else {
                diag.Width = param.width;
                diag.Height = param.height;
            }
            diag.Title = param.title;
            diag.Drag = false;
            diag.ShowButtonRow = false; //ShowButtonRow:是否不显示按钮栏,值为布尔型(true|false),默认值为false,当定义了OKEvent或调用了addButton时自动设为true。
            diag.URL = param.url;
            diag.OkEvent = param.OkEvent; //这里是OkEvent而不是OKEvent,是为了隐藏弹出框自带按钮栏
            diag.show();
        }
    });
})(jQuery);
View Code

    弹出最大化窗口(因插件本身的原因,最大化窗口比实际window大小略小一点):

技术分享
//弹出最大化窗口
$.iDialog({
    title: "修改",
    url: "/Auth/UserManage/Edit?id=" + row.Id,
    OkEvent: function () {
        reloadgrid(); //调用方法刷当前页面,即弹出框的父页面
    }
});
View Code

    弹出一般窗口:

技术分享
$.iDialog({
    title: "添加",
    url: "/Auth/UserManage/Add",
    width: 500,
    height: 300,
    OkEvent: function () {
        save();
    }
});
View Code

    当窗口中的页面保存成功,需要刷新父窗口,这样调用:

技术分享
parentDialog.OkEvent();
parentDialog.close();
View Code

    当窗口中的页面保存成功时,传值给父页面,这样调用:

    父页面:

技术分享
$.iDialog({
    title: "添加",
    url: "/Auth/UserManage/Add",
    width: 500,
    height: 300,
    OkEvent: function (userName) {
        $("#UserName").val(userName)
    }
});
View Code

    子页面:

技术分享
//保存
function save() {
    parentDialog.OkEvent($("#UserName").val());
    parentDialog.close();
}
View Code

    子窗体如何关闭当前窗体,再关闭父窗体,并刷新父窗体的父页面 :

    子窗体中数据保存完成后,这样调用:

技术分享
parentDialog.OkEvent(parentDialog);
View Code

    子窗体的父窗体中这样调用:

技术分享
$.iDialog({
    title: "添加",
    url: "/Auth/UserManage/Add",
    width: 800,
    height: 400,
    OkEvent: function (childDialog) {
        parentDialog.OkEvent(); //刷新父窗体的父页面
        childDialog.close(); //先关子窗体
        parentDialog.close(); //再关父窗体
    }
});
View Code

    封装后,该插件的特点:多层弹出,且弹出到框架的最顶层;使用方便,代码简捷;可以方便地刷新父页面,可以方便地向父页面传值。

    示意图:

技术分享

     为什么要封装这个插件?我之前用的插件是lhgDialog,是这样封装的:

技术分享
(function ($) {
    $.extend({
        iDialog2: function (param) {
            var api, W;
            if (frameElement && frameElement.api) {
                api = frameElement.api;
                W = api.opener;
            }
            else {
                api = null;
                W = window;
            }
            var defaultParam = $.extend({
                max: false,
                min: false,
                drag: true,
                lock: true,
                top: "50%",
                width: ‘800px‘,
                resize: false,
                parent: api
            }, param);
            W.$.dialog(defaultParam);
        }
    });
})(jQuery);
View Code

    这样使用:

技术分享
$.iDialog2({
    title: ‘修改‘,
    height: 200,
    width: 300,
    content: "url:/Auth/UserManage/Edit?id=" + row.Id
});
View Code

    存在的问题:1、弹出两层窗口,当关闭子窗口时,遮罩层没了,而父窗口还在,这显然是BUG,为什么官网上的Demo是正常的呢?因为它对插件加载有要求,我是在Layout里加载的,所以,所有页面都将这个插件加载一遍,这就是导致BUG的原因。2、如果父页面是Index,弹出Edit窗体,再在Edit窗体里弹出Add窗体,那么在Add窗体里调用方法alert(frameElement.api.opener.location.href);那么提示的url是Index的url而不是Edit的url,这样子窗体能找到父窗体的父页面,而找不到父窗体。

 

JS弹出框插件zDialog再次封装

原文:http://www.cnblogs.com/s0611163/p/5128776.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!