剖析Jquery Easyui对话框组件Dialog的使用方法

<divclass="easyui-dialog"

   title="弹出框"

   data-options="iconCls:'icon-add',resizable:true,modal:true"

   style="width: 400px;height: 200px;">

  弹出框内容

</div>

<divid="box">

弹出框内容

</div>

<divid="tt">

<ahref="#"class="easyui-linkbutton"

data-options="iconCls:'icon-edit',plain:true">编辑</a>

<ahref="#"class="easyui-linkbutton"

data-options="iconCls:'icon-help',plain:true">帮助</a>

</div>

<script>

$(function () {

$('#box').dialog({

width : 400,

height : 200,

title : '弹出框标题',

modal : true,

// 是否显示可折叠按钮

collapsible : false,

// 是否显示最小化按钮

minimizable : false,

// 是否显示最大化按钮

maximizable : false,

// 是否可以改变对话框窗口大小

resizable : false,

// 设置对话框窗口顶部工具栏

//buttons : '#tt',

toolbar : [{

 text : '编辑',

 iconCls : 'icon-edit',

 handler : function () {

 alert('edit');

 },

}, {}],

// 对话框窗口底部按钮

buttons : [{

 text : '保存',

 iconCls : 'icon-ok',

 handler : function () {

 alert('save');

 }

},{}]

})

});

</script>

//Dialog 事件

$('#box').dialog({

 width : 600,

 height : 400,

 modal :true,

 onClose :function() {

 alert('关闭后触发！');

 },

});

//返回外部窗口对象

//console.log($('#box').window('dialog'));

//使用$.fn.window.defaults 重写默认值对象。