easyui封装dialog 对话框窗口

本文主要介绍使用easyui框架创建对话框弹框

用法一：通过已存在的DOM节点元素标签创建

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
        data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>

用法二：使用Javascript创建对话框窗口
主要介绍自定义封装对话框窗口，可以满足大部分需求

openDialog函数所需参数含义介绍：
_this：目标div的id 。例如：$(’#mianId’)
title： 对话框标题
width： 对话框宽度
href： 对话框内容的.html文件 例如：demo/dialogDemo.html
options: 对话框所需实现的提交submit、加载load等函数流程

//封装dialog
function openDialog(_this,title,width,href,options) {
    _this.dialog({
        title: title,
        width: width,
        height: 'auto',
        closed: true,
        cache: false,
        href: href,
        modal: true,
        onLoad: options.onLoad,
        buttons: [{
            id: 'visible-' + _this[0].id,
            text: '确定',
            iconCls: 'icon-ok',
            handler: options.submit
        }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
                closeDialog(_this);
            }
        }],
        //主要为了隐藏“确定”按钮
        onOpen: options.onOpen
    });
    resizeDialog(_this);
}
//通过计算使窗口居于屏幕中间位置
function resizeDialog(_this) {
    _this.window('open').window('resize', { top:  ($(window).height() - 500) * 0.5 });
}
//关闭对话框窗口
function closeDialog(target){
    target.dialog('close')
}

如何调用：

 openDialog($('#mianId'),'标题',600,'demo/dialogDemo.html',{
        onLoad:function(){
            //可以进行清空表单等操作
        },
        submit:function () {
            //提交到后端接口
        }
    });