jQuery UI 实例 - 菜单(Menu)
jQuery UI 实例 - 菜单(Menu)
jQuery UI 是 jQuery 库的一个扩展,它提供了一些常用的 UI 控件和效果,其中之一就是菜单(Menu)控件。菜单是一个常见的 UI 控件,它通常用在 web 应用程序中,提供了一个交互性的方式来选择操作和菜单项。
基本用法
要创建一个菜单,需要将一个 <ul>
元素转换为菜单。以下是一个基本的 HTML 结构:
<ul id="menu">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
要使用 jQuery UI 的菜单控件,需要在代码中引入相应的 JavaScript 和 CSS 文件:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
接着,在 JavaScript 中初始化菜单控件:
$(function() {
$("#menu").menu();
});
现在,菜单控件应该已经工作了。当用户右键单击菜单项时,将会弹出一个菜单。
选项和方法
选项
菜单控件提供了以下选项:
disabled
: 禁用菜单icons
: 自定义菜单图标itemClasses
: 自定义菜单项类名position
: 定义菜单的位置role
: 定义菜单的角色submenuOpen
: 菜单二级菜单是否自动打开
例如,可以使用以下代码设置菜单控件的 position 选项:
$(function() {
$("#menu").menu({
position: { my: "left top", at: "right top" }
});
});
方法
菜单控件提供了以下方法:
widget()
: 获取菜单的根元素menu( "destroy" )
: 销毁菜单,使其恢复到初始状态menu( "collapseAll" )
: 关闭所有子菜单menu( "collapse", event, item )
: 关闭指定子菜单menu( "expand" )
: 打开菜单menu( "focus", event, item )
: 将焦点设置在指定的菜单项上menu( "isFirstItem" )
: 来判断选中项是否为第一个菜单项,是返回 true,否则返回 falsemenu( "isLastItem" )
: 同上,用来判断选中项是否为最后一个菜单项menu( "next" )
: 将焦点转移到下一个菜单项menu( "previous" )
: 将焦点转移到上一个菜单项menu( "refresh" )
: 重新应用所有菜单项上的选项和事件menu( "select" )
: 选择当前菜单项
例如,可以使用以下代码将焦点设置在第一个菜单项上:
$(function() {
$("#menu").menu("focus", null, $("#menu li:first-child"));
});
事件处理
菜单控件提供了以下事件:
blur
: 在失去焦点时触发create
: 在菜单创建时触发focus
: 在获取焦点时触发select
: 在选择菜单项时触发
例如,可以使用以下代码在选择菜单项时弹出一个提示框:
$(function() {
$("#menu").menu({
select: function(event, ui) {
alert("您选择了 " + ui.item.text() + " 菜单项。");
}
});
});
总结
jQuery UI 的菜单控件可以轻松地将一个普通的 <ul>
元素转换成一个交互性的菜单。菜单控件提供了多种选项和方法来自定义和操作菜单,同时也提供了多种事件处理函数来响应用户与菜单的交互行为。