jQuery EasyUI 窗口 - 自定义窗口工具栏
jQuery EasyUI 窗口 - 自定义窗口工具栏
jQuery EasyUI 是一个基于 jQuery 的前端UI框架,其中窗口组件具有高度的定制性以及易用性。在窗口组件中,可以自定义窗口工具栏,以便在窗口中添加各种操作按钮,提高窗口操作的效率。
窗口工具栏
在 EasyUI 窗口中,默认情况下会有一个包含 minimize(最小化)、maximize(最大化)、close(关闭)按钮的工具栏。如果需要添加额外的按钮,需要自定义工具栏。
自定义窗口工具栏需要通过 toolbar
属性进行设置。该属性指向一个包含工具栏按钮的 jQuery 选择器或 HTML 元素。具体步骤如下:
- 创建包含工具栏按钮的 HTML 元素
- 设置窗口配置项中的
toolbar
属性值为包含按钮的选择器或元素 - 通过 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 窗口工具栏,并加以处理工具栏按钮的点击事件。这样可以大幅提高窗口的定制性,同时也方便了用户的使用。