Jquery Easyui对话框组件Dialog使用详解（14）

Dialog对话框组件依赖于Window（窗口）组件、linkbutton 组件

加载方式
Class加载

<div class="easyui-dialog" title="弹出框" data-options="iconCls:"icon-add",resizable:true,modal:true" style="width: 400px;height: 200px;">弹出框内容</div>

JS调用加载

 <div id="box"> 弹出框内容 </div> <div id="tt"> <a href="#" class="easyui-linkbutton" data-options="iconCls:"icon-edit",plain:true">编辑</a> <a href="#" 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>

属性列表
窗口属性扩展自 Window（面板），窗口新增或重新定义的属性如下

Dialog 是继承自 Window 组件的，所以 Window 组件和 Panel 组件均可用

事件列表
窗口的事件完整继承自 Window（面板）。所以，直接参考 Window 面板的事件即可。

//Dialog 事件$（"#box"）.dialog（{ width : 600, height : 400, modal : true, onClose : function （） { alert（"关闭后触发！"）; },}）;

方法列表
对话框的方法扩展自 Window（窗口），对话框新增方法如下

//返回外部窗口对象//console.log（$（"#box"）.window（"dialog"））;//使用$.fn.window.defaults 重写默认值对象。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。