zoukankan      html  css  js  c++  java
  • JS弹出框插件zDialog再次封装

        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",
         500,
        height: 300,
        OkEvent: function () {
            save();
        }
    });
    View Code

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

    parentDialog.OkEvent();
    parentDialog.close();
    View Code

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

        父页面:

    $.iDialog({
        title: "添加",
        url: "/Auth/UserManage/Add",
         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",
         800,
        height: 400,
        OkEvent: function (childDialog) {
            parentDialog.OkEvent(); //刷新父窗体的父页面
            childDialog.close(); //先关子窗体
            parentDialog.close(); //再关父窗体
        }
    });
    View Code

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

        示意图:

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

    /**
    * lhgdialog 弹出框封装
    * @param 参数
    */
    (function ($) {
        $.extend({
            iDialog: function (param) {
                if (typeof (param) == "object") {
                    var api;
                    if (frameElement && frameElement.api) {
                        api = frameElement.api;
                        $.dialog.setting.zIndex++;
                    }
                    else {
                        $.dialog.setting.zIndex = 1977;
                    }
                    var max = false;
                    if (!param.width && !param.height) {
                        param.width = $(top.window).width() - 18;
                        param.height = $(top.window).height() - 45;
                        param.drag = false;
                        max = true;
                    }
                    var defaultParam = $.extend({
                        max: false,
                        min: false,
                        drag: true,
                        lock: true,
                        top: "50%",
                         '800px',
                        resize: false,
                        parent: api
                    }, param);
                    if (max) {
                        $.dialog(defaultParam).max();
                    } else {
                        $.dialog(defaultParam);
                    }
                } else if (typeof (param) == "string" && param == "close") {
                    if (frameElement.api.opener.reloadgrid) {
                        frameElement.api.opener.reloadgrid();
                    }
                    else if (frameElement.api.opener.refresh) {
                        frameElement.api.opener.refresh();
                    } else {
                        frameElement.api.opener.location = frameElement.api.opener.location;
                    }
                    frameElement.api.close();
                }
                else {
                    alert("iDialog参数错误");
                }
            }
        });
    })(jQuery);
    View Code

         这样使用:

    $.iDialog({
        title: '报告流转过程',
        height: "500px",
         "800px",
        content: "url:/ViewReport/ViewReport/ReportFlow?ReportCode=" + row.REPORTCODE
    });
    View Code

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

        花了一两天时间,终于解决遮罩层问题,代码如下:

    /*!
     * 框架页面卸载前关闭所有穿越的对话框
     * 同时移除拖动层和遮罩层
     */
    _top != window && $(window).bind('unload',function()
    {
        var bl = true; //此处修改
        var list = lhgdialog.list;
        for( var i in list )
        {
            if (list[i]) {
                    //此处修改
                if (!lhgdialog.list[i]._lock && !lhgdialog.list[i].parent) {
                    bl = false;
                }
                list[i].close();
            }
        }
        _singleton && _singleton.DOM.wrap.remove();
        
        _$doc.unbind('keydown',onKeyDown);
        
        if (bl) { //此处修改
            $('#ldg_lockmask', _doc)[0] && $('#ldg_lockmask', _doc).remove();
            $('#ldg_dragmask', _doc)[0] && $('#ldg_dragmask', _doc).remove();
        }
    });
    View Code

        父子页面的问题也已解决,代码在上面。

  • 相关阅读:
    Atitit  atiMail atiDns新特性 v2  q39
    Atitit  atiMail atiDns新特性 v2  q39
    Atitit.aticmd v4  新特性q39 添加定时器释放功能
    Atitit.aticmd v4  新特性q39 添加定时器释放功能
    Atitit. Atiposter 发帖机 新特性 poster new feature   v7 q39
    Atitit. Atiposter 发帖机 新特性 poster new feature   v7 q39
    Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
    Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
    atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31
    知也atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31无涯 - I
  • 原文地址:https://www.cnblogs.com/s0611163/p/5128776.html
Copyright © 2011-2022 走看看