在 jQuery EasyUI 中,对话框(dialog)是一种常见的弹出式窗口,用于显示信息、获取用户输入等。以下是一个简单的例子,演示如何创建一个对话框:

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