jQuery EasyUI 菜单按钮小部件

简介

jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合，提供了诸如表格、树形控件、窗口、工具栏等基础组件，并支持国际化和主题定制。

其中，菜单按钮小部件是一种常用的按钮组件，可以在按钮上下方弹出一个菜单，提供更多的操作选项。

特点

• 灵活的配置项，可自定义菜单项和样式；
• 支持多层级菜单；
• 可通过事件绑定实现复杂交互逻辑；
• 兼容主流浏览器。

使用方法

引入 EasyUI 核心文件和菜单按钮文件

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>

创建菜单按钮

<a id="menuBtn" class="easyui-menubutton" data-options="menu:'#mm'">菜单按钮</a>
<div id="mm" class="easyui-menu">
    <div data-options="name:'save'">保存</div>
    <div data-options="name:'delete'">删除</div>
    <div data-options="name:'update'">更新</div>
</div>

上面的代码通过设置 data-options 属性来配置菜单按钮和菜单，其中 menu 属性指定了要显示的菜单。菜单项可以通过 <div> 元素来定义，其中 data-options 属性用于配置菜单项的名称和其他属性。

绑定事件处理函数

$(function() {
    $('#mm').menu({
        onClick: function(item) {
            switch(item.name) {
                case 'save':
                    save();
                    break;
                case 'delete':
                    del();
                    break;
                case 'update':
                    update();
                    break;
            }
        }
    });
});

function save() {
    // 保存操作
}

function del() {
    // 删除操作
}

function update() {
    // 更新操作
}

上面的代码通过 menu() 方法初始化菜单，并绑定 onClick 事件处理函数。当用户点击菜单项时，onClick 事件就会被触发，并传递当前选中的菜单项信息。根据不同的菜单项名称，可以执行不同的操作。

其他配置项

菜单按钮还支持其他配置项，例如下列常用配置项：

• align：菜单对齐方式，默认为 'left'；
• duration：菜单显示/隐藏动画持续时间，默认为 'normal'；
• position：菜单显示位置，默认为 'bottom'；
• disabled：禁用按钮，默认为 false；
• iconCls：按钮图标的 CSS 类名。

更多配置项请参考官方文档。

总结

jQuery EasyUI 的菜单按钮小部件提供了一种简单而灵活的方式来增强 Web 应用的交互性。使用这个小部件，可以为用户提供更多的操作选项，同时也可以让你的应用看起来更加专业和美观。