1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站([EasyUI 官网](http://www.jeasyui.com/))下载并引入这些文件。
2. 在 HTML 中创建一个按钮,用于触发对话框:
<button id="openDialogBtn">打开对话框</button>
3. 在 JavaScript 中使用 EasyUI 的 dialog 方法初始化对话框:
<script>
$(document).ready(function(){
// 初始化对话框
$('#myDialog').dialog({
title: '我的对话框', // 对话框标题
width: 400, // 对话框宽度
height: 200, // 对话框高度
closed: true, // 初始时对话框是否关闭
modal: true, // 是否模态对话框
buttons: [{
text: '确定',
iconCls: 'icon-ok',
handler: function(){
// 确定按钮点击事件
console.log('确定按钮被点击');
// 在这里添加确定按钮的逻辑
// 关闭对话框
$('#myDialog').dialog('close');
}
},{
text: '取消',
iconCls: 'icon-cancel',
handler: function(){
// 取消按钮点击事件
console.log('取消按钮被点击');
// 在这里添加取消按钮的逻辑
// 关闭对话框
$('#myDialog').dialog('close');
}
}],
onClose: function(){
// 对话框关闭时的回调函数
console.log('对话框已关闭');
}
});
// 绑定按钮点击事件
$('#openDialogBtn').click(function(){
// 打开对话框
$('#myDialog').dialog('open');
});
});
</script>
4. 在 HTML 中创建一个用于容纳对话框内容的 div:
<div id="myDialog">对话框内容可以在这里添加</div>
在这个例子中,我们通过 dialog 方法初始化了一个对话框,并定义了确定和取消两个按钮。按钮的点击事件可以在 handler 中进行自定义逻辑。对话框关闭时,onClose 回调函数会被触发。
您可以根据实际需求调整对话框的配置参数和按钮的数量以及样式。
转载请注明出处:http://www.zyzy.cn/article/detail/13131/jQuery EasyUI