jQuery EasyUI窗口自定义工具栏：隐藏默认按钮与添加自定义图标

本文详细介绍如何在jQuery EasyUI中自定义窗口（Window）的工具栏。通过设置collapsible、minimizable等属性为false，可隐藏默认按钮；利用tools属性可添加带有自定义图标和点击事件的按钮。包含完整代码示例与效果演示，帮助开发者快速实现个性化窗口界面。

查看自定义窗口效果

在开始编码之前，我们先看一下最终实现的窗口效果。自定义工具栏允许我们完全控制窗口右上角的按钮行为，既可以去掉不必要的默认按钮，也可以添加符合业务需求的自定义操作。

jQuery EasyUI窗口右上角显示自定义的添加和移除图标工具栏 — 图1：包含自定义添加和移除图标的EasyUI窗口工具栏

前置准备

在修改窗口工具栏之前，请确保已完成以下准备工作：

引入jQuery EasyUI库：确保页面已正确引入jQuery和EasyUI的核心JS/CSS文件。
准备图标资源：EasyUI默认使用CSS类名（如icon-add）来显示图标，确保你的EasyUI主题包中包含这些图标文件。
确定窗口ID：在HTML中为你的窗口容器定义一个唯一的id，例如win。

操作步骤

第1步：创建基础窗口并理解默认行为

默认情况下，jQuery EasyUI的window组件会自动生成四个工具按钮：collapsible（可折叠）、minimizable（可最小化）、maximizable（可最大化）和closable（可关闭）。我们可以通过简单的HTML标记创建一个基础窗口。

操作目的：建立一个包含默认工具栏的窗口，作为后续自定义的基础。

代码示例：


    window content

默认EasyUI窗口显示四个标准工具按钮：折叠、最小化、最大化和关闭 — 图2：默认状态下的EasyUI窗口，右上角显示四个标准工具按钮

第2步：隐藏不需要的默认工具按钮

如果业务场景不需要某些默认功能（例如不允许窗口最大化），可以通过将对应的属性设置为false来隐藏这些按钮。这可以简化界面，提升用户体验。

操作目的：移除窗口右上角不必要的默认按钮，使界面更简洁。

代码示例：

$('#win').window({
    collapsible: false, // 隐藏折叠按钮
    minimizable: false, // 隐藏最小化按钮
    maximizable: false  // 隐藏最大化按钮
    // closable默认为true，如需隐藏可设置为false
});

第3步：添加自定义工具按钮

除了隐藏默认按钮，我们还可以完全自定义工具栏。通过tools属性，可以添加任意数量的自定义按钮，每个按钮都可以指定图标和点击事件。

操作目的：在窗口右上角添加具有特定功能（如添加、删除）的自定义按钮。

代码示例：

$('#win').window({
    collapsible: false,
    minimizable: false,
    maximizable: false,
    tools: [{
        iconCls: 'icon-add', // 使用EasyUI内置图标类名
        handler: function(){
            alert('add'); // 点击后触发的回调函数
        }
    },{
        iconCls: 'icon-remove',
        handler: function(){
            alert('remove');
        }
    }]
});