首先引入相关的css 和 js文件
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
然后通过 js 加载的方式 显示对话框
<script type="text/javascript">
$(function () {
$('#dia').dialog({
title:'添加数据信息',
iconCls: 'icon-save',
width:'500',
height: '200',
toolbar: [{
text: 'Add',
iconCls: 'icon-add',
handler: function () {
alert('add')
}
}, '-', {
text: 'Save',
iconCls: 'icon-save',
handler: function () {
alert('save')
}
}],
buttons:[{
text:'确定',//按钮显示的文本
iconCls:'icon-ok',//按钮图标
handler:function(){
alert('ok');//点击按钮引发的事件
}
},{
text:'取消',
handler:function(){
alert('cancel');;
}
}]
});
});
</script>
在body标签中 添加一个div标签设置ID为dia
<body>
<div id="dia">
</div>
</body>
对话框相关属性与方法
title: 返回string 对话框的标题文本。
collapsible：返回true 或 false 是否显示折叠按钮 默认 false
minimizable 返回 true 或 false 定义是否显示最小化按钮。 false
maximizable 返回 true 或 false 定义是否显示最大化按钮。 false
resizable 返回 true 或 false 定义对话框是否可调整尺寸。 false
toolbar 返回一个数组 对话框的顶部工具栏，
buttons 返回一个数据 对话框的底部按钮，
$(’#dia’).dialog(‘open’) 打开对话框
$(’#dia’).dialog(‘close’) 关闭对话框