JQuery UI Dialog 参数传递及事件交互技术

本文介绍了如何在Mvc服务端解析页面并使用JQuery UI Dialog进行参数传递和事件交互。在Html页面初始化时,通过Dialog参数设置和回调函数实现页面属性配置。当直接打开客户端静态页面时,事件处理需注意访问window而非window.parent。同时讲解了如何获取主页面方法、订阅和取消事件,以及Dialog子页面的关闭和容器元素的管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JQuery UI Dialog 是主页面和子页面交互的常用控件,经常碰到的问题是:参数传递,事件交互和页面元素的清除回收。本文使用MVC4,JQuery,Html开发做以示例。


1. Dialog打开的代码示例如下:

var chatDialog = $("#divChatDialog").load("../im/ChatDialog", function () {
    var dialogOptions = {
        title: "To:" + who,
        width: 600,
        height: 500,
        modal: true,
        autoOpen: false,
        beforeClose: function (evt, ui) {
            //从Messenger主页面获取messenger对象
            var messenger = window.parent.getMessengerInstance();
            //取消消息接收事件
            messenger.onMessageRecieved.unsubscribe(WebChatDialog.messageRecievedHandler);
        }
    };

    var dialogExtendOptions = {
        "maximize": true,
        "minimize": true,
        "dblclick": "maximize" || false,
        "titlebar": "" || false
    };
    chatDialog.dialog(dialogOptions).dialogExtend(dialogExtendOptions);
    chatDialog.data("who", who).dialog('open');
});


示例中用到了DialogExtend扩展插件,dialog的打开方式没有大的变化,只是增加了样式,最大化,最小化的便捷设置。

2. Dialog 页面打开时的运行顺序

1) Mvc 服务端解析页面:

生成页面元素,上述示例中load方法中的页面地址,就是服务端要解析的页面;

2) Html 页面初始化:

脚本代码:


    <script type="text/javascript">
        $(function () {
            $("#MyChatSplitter").splitter({
                type: "h",
                sizeTop: true, /* use height set in stylesheet */
                accessKey: "P",
                cookie: false
            });
            $("#message").focus();


            WebChatDialog.initChatContentUI();
        });
    </script>

此处是onDocumentReady的执行方法。

3) 执行load方法后的回调函数

在回调函数里,真正进行Dialog参数的初始化,Dialog的页面属性设置和Dialog的open。


4) 直接打开客户端静态页面

如果没有经过MVC控制器,直接打开客户端静态页面,则执行onDocumentReady()方法,后期需要注意的是没有了window.parent属性,而是直接访问window属性;因为还是在当前窗口里呈现页面,并没有新的window对象产生。

var filterHtmlPage = divFilterContainer.load("/Common/Content/filterdialog.html",
    function () {
        var dialogOptions = {
            title: '多列过滤',
            width: 450,
            height: 500,
            position: 'center',
            modal: false,
            resizable: true,
            autoOpen: false,
            close: function (event, ui) {
                $(this).dialog("destroy");
                $(this).remove();
            }
        };

        filterHtmlPage
            .dialog(dialogOptions)
            .dialog('open');
});



3. 主页面传递参数给Dialog

chatDialog.data("who", who).dialog('open');

利用Element元素的data方法传入参数,可以是各种对象封装类型的参数。

4. Dialog 页面如何访问传入参数

//获取主页面传入给Dialog的参数
var who = window.parent.$("#divChatDialog").data("who");

5. Dialog 访问主页面的hidden、div 或 方法

1) 获取主页面hidden 或 div


//从主页面hidden元素读取

var currentUser = window.parent.$("#hdnCurrentUserName").val();


2) 获取主页面方法


//从Messenger主页面获取messenger对象
var messenger = window.parent.getMessengerInstance();

getMessengerInstance()是主页面上实现的方法,可以在Dialog页面脚本上调用。

6. 事件交互
主页面上数据变化,需要控制子页面Dialog的显示。
1) 主页面上的事件定义

    $.extend(true, window, {
        "WebMessenger": {
            //method
            "initUserConnection": initUserConnection,
            "sendMessage": sendMessage,
            "displayNewMessage": displayNewMessage,
            "onMessageRecieved": new im4.Event()
        }
    });

此处定义了onMessageRecieved 的事件,其激活方法如下:


        function recievedNewMessage(message) {
            var msgRecievedEvent = self.WebMessenger.onMessageRecieved;
            trigger(msgRecievedEvent, { "message": message });
        }

主页面收到消息后,激活订阅事件。self.WebMessenger.onMessageRecieved用于获取订阅的事件对象,trigger方法是触发订阅事件执行。

    function trigger(evt, args, e) {
        e = e || new im4.EventData();
        args = args || {};
        args.messenger = self;
        return evt.notify(args, e, self);
    }

2) Dialog 对主页面事件的订阅

    //初始化聊天界面
    function initChatContentUI() {
        //从Messenger主页面读取当前登录用户
        var currentUser = window.parent.$("#hdnCurrentUserName").val();


        //从Messenger主页面获取messenger对象
        var messenger = window.parent.getMessengerInstance();


        //注册消息接收事件
        messenger.onMessageRecieved.subscribe(messageRecievedHandler);
    }

在页面初始化是先获取到主页面上声明的Messenger等对象,然后进行事件的订阅。messageRecievedHandler 是子页面Dialog上实现的事件处理函数。


3)取消事件订阅

在Dailog关闭前,取消对主页面事件的订阅, beforeClose是在dialogOptions中定义的。


        beforeClose: function (evt, ui) {
            //从Messenger主页面获取messenger对象
            var messenger = window.parent.getMessengerInstance();
            //取消消息接收事件
            messenger.onMessageRecieved.unsubscribe(WebChatDialog.messageRecievedHandler);
        }

7. Dialog 子页面的关闭

<div id="bottomBar" style="position:absolute;bottom:10px;right:60px;">
    <input type="button" id="close" style="right:10px;margin:10px;" value="关闭" onclick="window.parent.$('#divChatDialog').dialog('close');" />
    <input type="button" id="sendmessage" style="right:10px;margin:10px;" value="发送"/>
</div>

在dialog子页面定制自己的关闭按钮,onclick事件中调用父页面的div元素的对话框属性的close方法,写法是:window.parent.$('#divChatDialog').dialog('close') .


8. Dialog容器元素的清除或销毁

var dialogOptions = {
    title: "新消息",
    width: 140,
    height: 180,
    position: ['right', 'bottom'],
    autoOpen: false,
    close: function (event, ui) {
        //销毁容器元素,但是初始Div存在
        $(this).dialog("destroy");
        // 删除初始Div
        $(this).remove();
    }
};

调用destroy 销毁容器元素,但是初始div依然存在;调用remove,则删除初始div元素。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值