淘客导航网站开发网站专题制作 公司

淘客导航网站开发,网站专题制作 公司,无锡装饰网站建设,seo优化是啥jQuery EasyUI 菜单与按钮 - 创建简单的菜单 jQuery EasyUI 提供了强大的 Menu#xff08;菜单#xff09;和 LinkButton#xff08;链接按钮#xff09;组件。本教程将展示如何创建最基本的下拉菜单#xff08;包括顶级菜单和子菜单#xff09;、上下文菜单#xff08…jQuery EasyUI 菜单与按钮 - 创建简单的菜单jQuery EasyUI提供了强大的Menu菜单和LinkButton链接按钮组件。本教程将展示如何创建最基本的下拉菜单包括顶级菜单和子菜单、上下文菜单右键菜单以及使用按钮触发菜单。官方参考Menu 文档https://www.jeasyui.com/documentation/menu.phpLinkButton 文档https://www.jeasyui.com/documentation/linkbutton.php教程示例https://www.jeasyui.com/tutorial/menu/menu1.php步骤 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: 创建最简单的下拉菜单通过按钮触发!-- 按钮 --ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-okonclickshowMenu()操作菜单/a!-- 菜单定义隐藏在页面中 --dividmmclasseasyui-menustylewidth:150px;divdata-optionsiconCls:icon-add新增/divdivdata-optionsiconCls:icon-edit编辑/divdivdata-optionsiconCls:icon-remove删除/divdivclassmenu-sep/div!-- 分隔线 --divdata-optionsiconCls:icon-save保存/divdivspan更多.../spandivdivdata-optionsiconCls:icon-cut剪切/divdivdata-optionsiconCls:icon-copy复制/divdivdata-optionsiconCls:icon-paste粘贴/div/div/div/div步骤 3: JavaScript 控制菜单显示scripttypetext/javascriptfunctionshowMenu(){$(#mm).menu(show,{left:200,// 可选指定位置top:100});}/script步骤 4: 完整示例带按钮触发 右键上下文菜单!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titlejQuery EasyUI 简单菜单/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/headbodyh2简单菜单示例/h2!-- 按钮触发菜单 --ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-okplaintrueonclickshowMenu()点击打开菜单/a!-- 下拉菜单 --dividmmclasseasyui-menustylewidth:180px;divdata-optionsiconCls:icon-add新增/divdivdata-optionsiconCls:icon-edit编辑/divdivdata-optionsiconCls:icon-remove删除/divdivclassmenu-sep/divdivdata-optionsiconCls:icon-save保存/divdivspan编辑选项/spandivdivdata-optionsiconCls:icon-cut剪切/divdivdata-optionsiconCls:icon-copy复制/divdivdata-optionsiconCls:icon-paste粘贴/div/div/div/div!-- 右键上下文菜单绑定到整个页面 --dividcontextMenuclasseasyui-menustylewidth:150px;divdata-optionsiconCls:icon-reload刷新/divdivdata-optionsiconCls:icon-print打印/divdivclassmenu-sep/divdivdata-optionsiconCls:icon-help帮助/div/divscripttypetext/javascript$(function(){// 按钮点击显示菜单$(#mm).menu({onClick:function(item){$.messager.alert(提示,您选择了item.text);}});// 右键上下文菜单整个页面$(document).bind(contextmenu,function(e){e.preventDefault();$(#contextMenu).menu(show,{left:e.pageX,top:e.pageY});});});functionshowMenu(){$(#mm).menu(show);}/script/body/html关键说明菜单项使用div标签data-options指定图标、文本等。子菜单在div内再嵌套一个div即可实现多级菜单。分隔线使用div classmenu-sep/div事件onClick事件可捕获用户点击的菜单项。显示方式menu(show, {left, top})指定位置显示。按钮点击或右键触发都非常方便。右键菜单通过$(document).bind(contextmenu, ...)实现。更多高级用法与datagrid结合行右键菜单。与toolbar结合工具栏下拉菜单。使用menubutton一个按钮自带下拉菜单更常见于工具栏。!-- 更常用的 Menubutton --ahrefjavascript:void(0)classeasyui-menubuttonmenu#mmiconClsicon-edit编辑/a如果需要工具栏菜单、datagrid 右键菜单、或完整源码示例请告诉我