国外展柜网站深训网站

国外展柜网站,深训网站,建设外贸网站要多少钱,邢台做网站口碑好jQuery EasyUI 菜单与按钮 - 创建分割按钮#xff08;Split Button#xff09; jQuery EasyUI 的 splitbutton 组件是一种特殊的菜单按钮#xff0c;它将按钮分为两个部分#xff1a; 左侧主体#xff1a;可点击执行默认主要操作#xff08;例如“保存”#xff09;。…jQuery EasyUI 菜单与按钮 - 创建分割按钮Split ButtonjQuery EasyUI的splitbutton组件是一种特殊的菜单按钮它将按钮分为两个部分左侧主体可点击执行默认主要操作例如“保存”。右侧下拉箭头点击显示关联的下拉菜单提供更多相关选项。这比 menubutton 更灵活常用于“保存”按钮主体保存箭头选择“另存为”“保存并关闭”等。官方参考教程https://www.jeasyui.com/tutorial/mb/splitbutton.php文档https://www.jeasyui.com/documentation/splitbutton.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginSplitButton步骤 1: 引入 EasyUI 资源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步骤 2: 创建基本的 Split Button在a标签上添加classeasyui-splitbutton并通过menu属性指定关联菜单。!-- 保存分割按钮 --ahrefjavascript:void(0)idsaveBtnclasseasyui-splitbuttondata-optionsmenu:#mm-save,iconCls:icon-save保存/a!-- 关联菜单 --dividmm-saveclasseasyui-menustylewidth:150px;divdata-optionsiconCls:icon-save保存/divdivdata-optionsiconCls:icon-save另存为.../divdivclassmenu-sep/divdivdata-optionsiconCls:icon-ok保存并关闭/divdivdata-optionsiconCls:icon-cancel取消/div/div!-- 另一个示例打印分割按钮 --ahrefjavascript:void(0)classeasyui-splitbuttondata-optionsmenu:#mm-print,plain:true,iconCls:icon-print打印/adividmm-printclasseasyui-menudiv直接打印/divdiv打印预览/divdiv页面设置/div/div步骤 3: 处理主体点击和菜单项点击事件scripttypetext/javascript$(function(){// 主体按钮点击默认操作$(#saveBtn).splitbutton({onClick:function(){$.messager.alert(提示,执行默认保存操作);// 这里写主要保存逻辑}});// 菜单项点击$(#mm-save).menu({onClick:function(item){vartextitem.text;if(text保存){$(#saveBtn).splitbutton(options).onClick.call($(#saveBtn)[0]);}else{$.messager.alert(操作,您选择了text);}}});});/script步骤 4: 完整示例工具栏风格 多种用法!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titlejQuery EasyUI Split Button 示例/titlelinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbodyh2jQuery EasyUI 分割按钮Split Button示例/h2p标准分割按钮/paidsb-savehref#classeasyui-splitbuttondata-optionsmenu:#mm1,iconCls:icon-save保存/adividmm1classeasyui-menustylewidth:150px;divdata-optionsiconCls:icon-save保存/divdivdata-optionsiconCls:icon-save另存为.../divdivclassmenu-sep/divdivdata-optionsiconCls:icon-ok保存并继续/divdivdata-optionsiconCls:icon-reload保存并新建/div/divp工具栏风格plain/pdivstylepadding:10px;background:#eee;ahref#classeasyui-splitbuttondata-optionsmenu:#mm2,plain:true文件/aahref#classeasyui-splitbuttondata-optionsmenu:#mm3,plain:true,iconCls:icon-edit编辑/a/divdividmm2classeasyui-menudiv新建/divdiv打开/divdiv保存/div/divdividmm3classeasyui-menudiv剪切/divdiv复制/divdiv粘贴/div/divscript$(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关键说明区别于 menubuttonmenubutton整个按钮点击都弹出菜单。splitbutton左侧主体可单独点击执行默认操作右侧箭头才弹出菜单。常用属性menu关联菜单 ID必填。onClick主体按钮点击事件。plain:true简洁模式适合工具栏。支持所有 linkbutton 属性如iconCls、disabled。菜单第一项通常与主体操作一致便于用户快速选择。实际应用场景富文本编辑器加粗主体 下拉更多样式。数据表格导出主体导出 Excel 下拉选择 PDF、CSV 等。表单提交主体提交 下拉“提交并新增”等。更多示例官方分割按钮教程https://www.jeasyui.com/tutorial/mb/splitbutton.php与 toolbar 结合常用于 datagrid、window、dialog 的工具栏。如果需要将这些按钮集成到 datagrid 工具栏、动态菜单或其他高级用法示例请继续提问