在 jQuery EasyUI 中,您可以通过自定义窗口工具栏来添加自定义按钮或其他控件。以下是一个简单的例子,演示如何创建一个带有自定义工具栏的窗口:

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

2. 在 HTML 中创建一个用于触发窗口的按钮:
<button id="openWindowBtn">打开窗口</button>

3. 在 JavaScript 中使用 EasyUI 的 window 方法初始化窗口,并添加自定义工具栏:
<script>
  $(document).ready(function(){
    // 初始化窗口
    $('#myWindow').window({
      title: '我的窗口', // 窗口标题
      width: 400,       // 窗口宽度
      height: 200,      // 窗口高度
      closed: true,     // 初始时窗口是否关闭
      modal: true,      // 是否模态对话框
      onClose: function(){
        // 窗口关闭时的回调函数
        console.log('窗口已关闭');
      },
      tools: [{
        iconCls: 'icon-add', // 自定义图标样式,可以使用 EasyUI 提供的图标
        handler: function(){
          // 自定义工具栏按钮点击事件
          console.log('自定义按钮被点击');
          // 在这里添加自定义按钮的逻辑
        }
      }]
    });

    // 绑定按钮点击事件
    $('#openWindowBtn').click(function(){
      // 打开窗口
      $('#myWindow').window('open');
    });
  });
</script>

4. 在 HTML 中创建一个用于容纳窗口内容的 div:
<div id="myWindow">窗口内容可以在这里添加</div>

在上述代码中,通过在窗口配置参数中使用 tools 选项,您可以自定义窗口的工具栏。在这个例子中,我们添加了一个自定义按钮,点击按钮时会触发 handler 中定义的回调函数。

您可以根据实际需求自定义工具栏,添加多个工具按钮或其他控件。


转载请注明出处:http://www.pingtaimeng.com/article/detail/13129/jQuery EasyUI