javascript写的ajax的对话框

最新推荐文章于 2025-08-08 17:07:36 发布

curllion

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量667

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript ajax function null button string

本文链接：https://blog.youkuaiyun.com/curllion/article/details/4327904

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的自定义对话框组件，详细展示了如何创建对话框的各个部分，包括背景、空白区域、标题栏及按钮等，并提供了丰富的自定义选项如按钮数量和事件绑定。

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

//msgbox.js

MsgBox.prototype.show = function(message, title, buttons)
{
    this._show(message, title, buttons);
    if (this.onshow != null)
    {
        this.onshow.apply(this);
    }
    for (var i = 0; i < this.showEventHandles.length; i++)
    {
        if (this.showEventHandles[i] != null)
            this.showEventHandles[i].apply(this);
    }
};

MsgBox.prototype._close = function()
{
    this.BackDiv.style.display = "none";
    this.BlankDiv.style.display = "none";
    this.MainDiv.style.display = "none";
    this.TitleBackDiv.style.display = "none";
    this.TitleDiv.style.display = "none";
    this.CloseDiv.style.display = "none";
    this.ContentDiv.style.display = "none";
    this.ButtonsDiv.style.display = "none";
    this.Button1.style.display = "none";
    this.Button2.style.display = "none";
};

MsgBox.prototype.close = function()
{
    this._close();
    if (this.onclose != null)
    {
        this.onclose.apply(this);
    }
    for (var i = 0; i < this.closeEventHandles.length; i++)
    {
        if (this.closeEventHandles[i] != null)
            this.closeEventHandles[i].apply(this);
    }
    this.dispose();
};
MsgBox.prototype.attachEvent = function(sEvent, fpNotify)
{
    var tmpEventHandles = null;
    switch (sEvent)
    {
        case "onclose":
            if (this.onclose == fpNotify) return;
            tmpEventHandles = this.closeEventHandles;
            break;
        case "onshow":
            if (this.onshow == fpNotify) return;
            tmpEventHandles = this.showEventHandles;
            break;
        case "onButton1Click":
            if (this.onButton1Click == fpNotify) return;
            tmpEventHandles = this.button1ClickEventHandles;
            break;
        case "onButton2Click":
            if (this.onButton2Click == fpNotify) return;
            tmpEventHandles = this.button2ClickEventHandles;
            break;
        default: break;
    }
    if (tmpEventHandles != null)
    {
        for (var i = 0; i < tmpEventHandles.length; i++)
        {
            if (tmpEventHandles[i] == fpNotify)
                return;
        }
        tmpEventHandles.push(fpNotify);
    }
}
MsgBox.prototype.detachEvent = function(sEvent, fpNotify)
{
    var tmpEventHandles = null;
    switch (sEvent)
    {
        case "onclose":
            if (this.onclose == fpNotify)
            {
                this.onclose = null;
                return;
            }
            tmpEventHandles = this.closeEventHandles;
            break;
        case "onshow":
            if (this.onshow == fpNotify)
            {
                this.onshow = null;
                return;
            }
            tmpEventHandles = this.showEventHandles;
            break;
        case "onButton1Click":
            if (this.onButton1Click == fpNotify)
            {
                this.onButton1Click = null;
                return;
            }
            tmpEventHandles = this.button1ClickEventHandles;
            break;
        case "onButton2Click":
            if (this.onButton2Click == fpNotify)
            {
                this.onButton2Click = null;
                return;
            }
            tmpEventHandles = this.button2ClickEventHandles;
            break;
        default: break;
    }
    if (tmpEventHandles != null)
    {
        for (var i = 0;i < tmpEventHandles.length; i++)
        {
            if (tmpEventHandles[i] == fpNotify)
            {
                tmpEventHandles.splice(i,1);
                return;
            }
        }
    }
}
MsgBox.prototype.dispose = function()
{
    this.ButtonsDiv.removeChild(this.Button1);
    this.ButtonsDiv.removeChild(this.Button2);
    this.MainDiv.removeChild(this.ButtonsDiv);
    this.MainDiv.removeChild(this.ContentDiv);
    this.TitleBackDiv.removeChild(this.CloseDiv);
    this.TitleBackDiv.removeChild(this.TitleDiv);
    this.MainDiv.removeChild(this.TitleBackDiv);
    this.BackDiv.removeChild(this.MainDiv);
    this.BackDiv.removeChild(this.BlankDiv);
    document.body.removeChild(this.BackDiv);
}

//---------------------

//msgbox-vsdoc.js

MsgBox.prototype =
{
    //外观
    BackDiv: {},
    BlankDiv: {},
    MainDiv: {},
    TitleBackDiv: {},
    TitleDiv: {},
    CloseDiv: {},
    ContentDiv: {},
    ButtonsDiv: {},
    Button1: {},
    Button2: {},
    //属性
    infors:
    {
        /// <summary>
        /// 返回信息的节点名
        /// </summary>
    },
    //事件
    onclose: function()
    {
        /// <summary>
        /// 对话框关闭事件
        /// </summary>
    },
    onshow: function()
    {
        /// <summary>
        /// 对话框弹出事件
        /// </summary>
    },
    //方法
    getMessage: function()
    {
        /// <summary>
        /// 返回对话框的信息
        /// </summary>
        /// <returns type="String">返回对话框的信息</returns>
    },
    setMessage: function(message)
    {
        /// <summary>
        /// 设置对话框的信息
        /// </summary>
        /// <param name="message" type="String">
        /// 要显示的信息;
        /// </param>
    },
    show: function(message, title, buttons)
    {
        /// <summary>
        /// 显示对话框
        /// </summary>
        /// <param name="message" type="String">
        /// 要显示的信息;
        /// </param>
        /// <param name="title" type="String">
        /// 要显示的标题;
        /// </param>
        /// <param name="buttons" type="Int">
        /// 按钮的个数;
        /// 1表示一个按钮，0或null表示两个按钮，-1表示无按钮
        /// </param>
    },
    _show: function(message, title, buttons)
    {
        /// <summary>
        /// 显示对话框,不响应事件的副本
        /// </summary>
        /// <param name="message" type="String">
        /// 要显示的信息;
        /// </param>
        /// <param name="title" type="String">
        /// 要显示的标题;
        /// </param>
        /// <param name="buttons" type="Int">
        /// 按钮的个数;
        /// 1表示一个按钮，0或null表示两个按钮，-1表示无按钮
        /// </param>
    },
    close: function()
    {
        /// <summary>
        /// 隐藏对话框
        /// </summary>
    },
    _close: function()
    {
        /// <summary>
        /// close方法不响应事件的副本
        /// </summary>
    },
    attachEvent: function(sEvent, fpNotify)
    {
        /// <summary>
        /// 绑定事件
        /// </summary>
        /// <param name="sEvent" type="String">
        /// 事件名;
        /// </param>
        /// <param name="fpNotify" type="Function">
        /// 事件响应的方法
        /// </param>
    },
    detachEvent: function(sEvent, fpNotify)
    {
        /// <summary>
        /// 解除事件绑定
        /// </summary>
        /// <param name="sEvent" type="String">
        /// 事件名;
        /// </param>
        /// <param name="fpNotify" type="Function">
        /// 事件响应的方法
        /// </param>
    },
    dispose: function()
    {
        /// <summary>
        /// 消毁对象
        /// </summary>
    }
}