当前位置：首页 > news >正文

jQuery EasyUI 菜单与按钮 - 创建分割按钮（Split Button）

news 2026/8/27 1:49:39

jQuery EasyUI 菜单与按钮 - 创建分割按钮（Split Button）

jQuery EasyUI的splitbutton组件是一种特殊的菜单按钮，它将按钮分为两个部分：

左侧主体：可点击执行默认主要操作（例如“保存”）。
右侧下拉箭头：点击显示关联的下拉菜单，提供更多相关选项。

这比 menubutton 更灵活，常用于“保存”按钮（主体保存，箭头选择“另存为”“保存并关闭”等）。

官方参考：

教程：https://www.jeasyui.com/tutorial/mb/splitbutton.php
文档：https://www.jeasyui.com/documentation/splitbutton.php
在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=SplitButton

步骤 1: 引入 EasyUI 资源

<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建基本的 Split Button

在<a>标签上添加class="easyui-splitbutton"，并通过menu属性指定关联菜单。

<!-- 保存分割按钮 --><ahref="javascript:void(0)"id="saveBtn"class="easyui-splitbutton"data-options="menu:'#mm-save',iconCls:'icon-save'">保存</a><!-- 关联菜单 --><divid="mm-save"class="easyui-menu"style="width:150px;"><divdata-options="iconCls:'icon-save'">保存</div><divdata-options="iconCls:'icon-save'">另存为...</div><divclass="menu-sep"></div><divdata-options="iconCls:'icon-ok'">保存并关闭</div><divdata-options="iconCls:'icon-cancel'">取消</div></div><!-- 另一个示例：打印分割按钮 --><ahref="javascript:void(0)"class="easyui-splitbutton"data-options="menu:'#mm-print',plain:true,iconCls:'icon-print'">打印</a><divid="mm-print"class="easyui-menu"><div>直接打印</div><div>打印预览</div><div>页面设置</div></div>

步骤 3: 处理主体点击和菜单项点击事件

<scripttype="text/javascript">$(function(){// 主体按钮点击（默认操作）$('#saveBtn').splitbutton({onClick:function(){$.messager.alert('提示','执行默认保存操作');// 这里写主要保存逻辑}});// 菜单项点击$('#mm-save').menu({onClick:function(item){vartext=item.text;if(text==='保存'){$('#saveBtn').splitbutton('options').onClick.call($('#saveBtn')[0]);}else{$.messager.alert('操作','您选择了：'+text);}}});});</script>

步骤 4: 完整示例（工具栏风格 + 多种用法）

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI Split Button 示例</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><h2>jQuery EasyUI 分割按钮（Split Button）示例</h2><p>标准分割按钮：</p><aid="sb-save"href="#"class="easyui-splitbutton"data-options="menu:'#mm1',iconCls:'icon-save'">保存</a><divid="mm1"class="easyui-menu"style="width:150px;"><divdata-options="iconCls:'icon-save'">保存</div><divdata-options="iconCls:'icon-save'">另存为...</div><divclass="menu-sep"></div><divdata-options="iconCls:'icon-ok'">保存并继续</div><divdata-options="iconCls:'icon-reload'">保存并新建</div></div><p>工具栏风格（plain）：</p><divstyle="padding:10px;background:#eee;"><ahref="#"class="easyui-splitbutton"data-options="menu:'#mm2',plain:true">文件</a><ahref="#"class="easyui-splitbutton"data-options="menu:'#mm3',plain:true,iconCls:'icon-edit'">编辑</a></div><divid="mm2"class="easyui-menu"><div>新建</div><div>打开</div><div>保存</div></div><divid="mm3"class="easyui-menu"><div>剪切</div><div>复制</div><div>粘贴</div></div><script>$(function(){$('#sb-save').splitbutton({onClick:function(){$.messager.alert('保存','执行默认保存操作');}});$('#mm1').menu({onClick:function(item){if(item.text==='保存'){$('#sb-save').splitbutton('options').onClick();}else{$.messager.alert('操作','选择了菜单项：'+item.text);}}});});</script></body></html>

关键说明

区别于 menubutton：
- menubutton：整个按钮点击都弹出菜单。
- splitbutton：左侧主体可单独点击执行默认操作，右侧箭头才弹出菜单。
常用属性：
- menu：关联菜单 ID（必填）。
- onClick：主体按钮点击事件。
- plain:true：简洁模式（适合工具栏）。
- 支持所有 linkbutton 属性（如iconCls、disabled）。
菜单第一项：通常与主体操作一致，便于用户快速选择。