jQuery EasyUI 窗口 - 自定义窗口工具栏

jQuery EasyUI 是一个基于 jQuery 的前端UI框架，其中窗口组件具有高度的定制性以及易用性。在窗口组件中，可以自定义窗口工具栏，以便在窗口中添加各种操作按钮，提高窗口操作的效率。

窗口工具栏

在 EasyUI 窗口中，默认情况下会有一个包含 minimize（最小化）、maximize（最大化）、close（关闭）按钮的工具栏。如果需要添加额外的按钮，需要自定义工具栏。

自定义窗口工具栏需要通过 toolbar 属性进行设置。该属性指向一个包含工具栏按钮的 jQuery 选择器或 HTML 元素。具体步骤如下：

1. 创建包含工具栏按钮的 HTML 元素
2. 设置窗口配置项中的 toolbar 属性值为包含按钮的选择器或元素
3. 通过 JavaScript 来设置按钮的点击事件

HTML 元素

在 HTML 中创建工具栏的总体结构如下：

<div id="myToolbar">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">按钮1</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">按钮2</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">按钮3</a>
</div>

其中，工具栏按钮的结构为：

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">按钮1</a>

其中，class="easyui-linkbutton" 用于渲染按钮样式，data-options 用于设置按钮配置项，其中 iconCls 用于设置按钮的图标。

配置项

对于工具栏，需要在窗口配置项中设置 toolbar 属性，该属性值为一个包含工具栏按钮的 jQuery 选择器或 HTML 元素。如下：

$('#myWindow').window({
    title: '自定义工具栏',
    width: 500,
    height: 300,
    toolbar: '#myToolbar'
});

在上述配置中，工具栏采用的是 HTML 元素，其选择器为 #myToolbar。

按钮事件

在添加了自定义工具栏按钮后，需要设置按钮的点击事件。对于工具栏按钮，可以通过 jQuery EasyUI linkbutton 组件中提供的 onClick 事件来进行处理。具体代码如下：

$('#btn1').bind('click', function(){
    // TODO: 处理按钮 1 点击事件
});
$('#btn2').bind('click', function(){
    // TODO: 处理按钮 2 点击事件
});
$('#btn3').bind('click', function(){
    // TODO: 处理按钮 3 点击事件
});

在上述代码中，通过 bind() 方法绑定 onClick 事件，并在方法中编写相应的处理逻辑。

结论

通过以上步骤，可以灵活定制 EasyUI 窗口工具栏，并加以处理工具栏按钮的点击事件。这样可以大幅提高窗口的定制性，同时也方便了用户的使用。