在 jQuery EasyUI 中,您可以通过 dialog 方法的配置选项来自定义对话框。以下是一个例子,演示如何创建一个自定义样式和内容的对话框:

1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站([EasyUI 官网](http://www.jeasyui.com/))下载并引入这些文件。

2. 在 HTML 中创建一个按钮,用于触发对话框:
<button id="openCustomDialogBtn">打开自定义对话框</button>

3. 在 JavaScript 中使用 EasyUI 的 dialog 方法初始化对话框,并自定义对话框的样式和内容:
<script>
  $(document).ready(function(){
    // 初始化对话框
    $('#customDialog').dialog({
      title: '自定义对话框',      // 对话框标题
      width: 400,               // 对话框宽度
      height: 200,              // 对话框高度
      closed: true,             // 初始时对话框是否关闭
      modal: true,              // 是否模态对话框
      iconCls: 'icon-custom',   // 自定义图标样式,可以使用 EasyUI 提供的图标
      content: '自定义内容',     // 对话框内容,可以是 HTML 字符串
      buttons: [{
        text: '自定义按钮',
        iconCls: 'icon-custom-btn',
        handler: function(){
          // 自定义按钮点击事件
          console.log('自定义按钮被点击');
          // 在这里添加自定义按钮的逻辑
          // 关闭对话框
          $('#customDialog').dialog('close');
        }
      }],
      onClose: function(){
        // 对话框关闭时的回调函数
        console.log('对话框已关闭');
      }
    });

    // 绑定按钮点击事件
    $('#openCustomDialogBtn').click(function(){
      // 打开对话框
      $('#customDialog').dialog('open');
    });
  });
</script>

4. 在 HTML 中创建一个用于容纳对话框内容的 div:
<div id="customDialog"></div>

在这个例子中,我们通过 dialog 方法初始化了一个对话框,并自定义了对话框的标题、图标、内容以及按钮。您可以根据实际需求调整对话框的配置参数、样式和内容。




转载请注明出处:http://www.zyzy.cn/article/detail/13132/jQuery EasyUI