自适应网站建设沈阳深圳万齐创享网站建设

自适应网站建设沈阳,深圳万齐创享网站建设,WordPress密码重设怎么改,wordpress301jQuery EasyUI 菜单与按钮 - 创建菜单按钮#xff08;Menu Button#xff09; jQuery EasyUI 的 menubutton 组件是一个结合了 linkbutton 和 menu 的下拉菜单按钮。点击或鼠标悬停在按钮上时#xff0c;会自动显示关联的下拉菜单。它常用于工具栏、导航栏等场景#xff0…jQuery EasyUI 菜单与按钮 - 创建菜单按钮Menu ButtonjQuery EasyUI的menubutton组件是一个结合了linkbutton和menu的下拉菜单按钮。点击或鼠标悬停在按钮上时会自动显示关联的下拉菜单。它常用于工具栏、导航栏等场景提供更紧凑的操作方式。menubutton默认在点击按钮时显示菜单支持图标、纯文本、禁用等 linkbutton 的所有特性。官方参考教程https://www.jeasyui.com/tutorial/mb/menubutton.php文档https://www.jeasyui.com/documentation/menubutton.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginMenuButton步骤 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: 创建菜单按钮最简单方式直接在a标签上添加classeasyui-menubutton并通过menu属性指定关联的菜单 ID。!-- 菜单按钮 --ahrefjavascript:void(0)classeasyui-menubuttondata-optionsmenu:#mm1,iconCls:icon-edit编辑/aahrefjavascript:void(0)classeasyui-menubuttondata-optionsmenu:#mm2,iconCls:icon-help,plain:false帮助/a!-- 关联的菜单1 --dividmm1classeasyui-menustylewidth:120px;divdata-optionsiconCls:icon-undo撤销/divdivdata-optionsiconCls:icon-redo重做/divdivclassmenu-sep/divdivdata-optionsiconCls:icon-cut剪切/divdivdata-optionsiconCls:icon-copy复制/divdivdata-optionsiconCls:icon-paste粘贴/div/div!-- 关联的菜单2 --dividmm2classeasyui-menustylewidth:150px;div项目1/divdiv项目2/divdivclassmenu-sep/divdivspan子菜单/spandivdiv子项1/divdiv子项2/div/div/div/div步骤 3: 工具栏风格plain 属性常用于 datagrid 或 panel 的 toolbar。divstylepadding:10px;background:#fafafa;ahrefjavascript:void(0)classeasyui-menubuttondata-optionsmenu:#mm3,plain:true,iconCls:icon-save保存/aahrefjavascript:void(0)classeasyui-menubuttondata-optionsmenu:#mm4,plain:true,iconCls:icon-print打印/a/div步骤 4: 处理菜单点击事件scripttypetext/javascript$(function(){// 为菜单添加点击事件推荐绑定到菜单本身$(#mm1).menu({onClick:function(item){$.messager.alert(提示,您点击了item.text);// 这里可以执行具体操作如新增、删除等}});});/script步骤 5: 完整示例!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titlejQuery EasyUI Menu 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 菜单按钮Menu Button示例/h2p标准菜单按钮/pahrefjavascript:void(0)idmb-editclasseasyui-menubuttondata-optionsmenu:#mm-edit,iconCls:icon-edit编辑/adividmm-editclasseasyui-menustylewidth:150px;divdata-optionsiconCls:icon-cut剪切/divdivdata-optionsiconCls:icon-copy复制/divdivdata-optionsiconCls:icon-paste粘贴/divdivclassmenu-sep/divdivdata-optionsiconCls:icon-remove删除/div/divp工具栏风格/pdivstylepadding:10px;background:#eee;ahref#classeasyui-menubuttondata-optionsmenu:#mm-file,plain:true文件/aahref#classeasyui-menubuttondata-optionsmenu:#mm-help,plain:true,iconCls:icon-help帮助/a/divdividmm-fileclasseasyui-menudiv新建/divdiv打开/divdiv保存/div/divdividmm-helpclasseasyui-menudiv关于/div/divscript$(function(){$(#mm-edit).menu({onClick:function(item){$.messager.alert(操作,执行item.text);}});});/script/body/html关键说明创建方式只需指定menu:#menuId无需额外 JavaScript 初始化。常用属性menu关联菜单的 ID必填。duration菜单显示/隐藏动画时长。plain:true简洁模式适合工具栏。支持所有 linkbutton 属性如iconCls、disabled。事件推荐在 menu 上绑定onClick而非 menubutton。优势无需手动 show/hide 菜单自动处理下拉。扩展splitbutton类似 menubutton但按钮主体可点击执行默认操作下拉箭头显示菜单下一个常见组件。与 datagrid toolbar 结合非常适合 CRUD 操作按钮。更多示例官方创建菜单按钮https://www.jeasyui.com/tutorial/mb/menubutton.php键盘导航https://www.jeasyui.com/easyui/demo/menubutton/nav.html如果需要 splitbutton分裂按钮、动态菜单、或与 datagrid 集成示例请继续提问