jQuery UI Menu
jQuery UI Menu
jQuery UI Menu 小部件由带有弹出菜单的主菜单栏组成。弹出菜单中的某些项目还具有子弹出菜单。只要维护父子关系，就可以通过使用标记元素来创建这些菜单。
jQuery UI使用menu()方法创建菜单。
语法:
您可以使用menu()方法有两种形式。
$(selector, context).menu(options)
$(selector, context).menu("action", params)
第一个方法
menu(options)方法指定HTML元素及其内容应作为菜单对待和管理。这里的options参数是一个对象，用于指定所涉及菜单项的外观和行为。
语法:
$(selector, context).menu(options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示:
$(selector, context).menu({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表。
| 选项 | 说明 |
| disabled | 如果将此选项设置为true，它将禁用菜单。默认情况下，其值为false。 |
| icons | 此选项设置子菜单的图标。默认情况下，其值为{子菜单: " ui-icon-carat-1-e"}。 |
| menus | 此选项是用作菜单容器的元素(包括子菜单)的选择器。默认情况下，其值为ul。 |
| position | 此选项设置子菜单相对于关联的父菜单项的位置。默认情况下，其值为{my: " left top"，at: " right top"}。 |
| role | 此选项用于自定义用于菜单和菜单项的aria角色。默认情况下，其值为菜单。 |
jQueryUI菜单示例1
让我们以一个简单的示例来演示菜单小部件的功能，不将任何参数传递给menu()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-1").menu();
});
</script>
</head>
<body>
<!-- HTML -->
<ul id="menu-1">
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Java</a>
<ul>
<li><a href="#">Core Java</a></li>
<li><a href="#">J2EE</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">Hibernate</a></li>
<li><a href="#">Struts</a></li>
</ul>
</li>
<li><a href="#">JSF</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</body>
</html>
jQuery UI Menu()示例2
图标和位置的使用:
让我们以一个示例来演示jQuery UI主要功能中两个选项图标的使用和位置。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-2").menu({
icons: { submenu: "ui-icon-circle-triangle-e"},
position: { my: "right top", at: "right-10 top+5" }
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id="menu-2">
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Java</a>
<ul>
<li><a href="#">Core Java IO</a></li>
<li><a href="#">J2EE</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">Hibernate</a></li>
<li><a href="#">Struts</a></li>
</ul>
</li>
<li><a href="#">JSF</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</body>
</html>
第二种方法
menu({option1: value1, option2: value2..... })方法用于对菜单元素执行操作，例如启用/禁用菜单。该操作在第一个参数中指定为字符串(例如，" disable"禁用菜单)。在下表中检查可以通过的操作。
语法:
$(selector, context).menu ("action", params);
以下是可与该方法一起使用的不同操作的列表。
| 动作 | 说明 |
| blur([event]) | 此操作将从菜单上移开焦点。它通过重置任何活动元素样式来触发菜单的模糊事件。这里的事件属于事件类型，代表触发菜单模糊的原因。 |
| collapse([event]) | 此操作将关闭当前活动的子菜单。这里的事件属于事件类型，代表触发菜单崩溃的原因。 |
| collapseall([event] [，all]) | 此操作将关闭所有打开的子菜单。 |
| destroy() | 此操作将完全删除菜单功能。这将使元素返回其初始状态。此方法不接受任何参数。 |
| disable() | 此操作将禁用菜单。此方法不接受任何参数。 |
| enable() | 此操作用于启用菜单。此方法不接受任何参数。 |
| expand([event]) | (如果存在)此操作用于打开当前活动项目下方的子菜单。这里的事件属于事件类型，表示触发菜单展开的原因。 |
| focus([event]，item | 此操作将激活特定的菜单项，如果存在子菜单，则开始打开该菜单并触发菜单的焦点事件。这里的事件是事件类型的事件，代表触发菜单获取焦点的事件，而item是表示菜单项要聚焦/激活的jQuery对象。 |
| isFirstItem() | 此操作返回一个布尔值，该值指示当前活动菜单项是否是第一个菜单项。此方法不接受任何参数。 |
| isLastItem() | 此操作返回一个布尔值，该值指示当前活动菜单项是否为最后一个菜单项。此方法不接受任何参数。 |
| Next([event]) | 此操作将活动状态委托给下一个菜单项。这里的事件属于事件类型，表示触发焦点移动的原因。 |
| Nextpage([event]) | 此操作将活动状态移至可滚动菜单底部下方的第一个菜单项，如果不可滚动，则将最后一个菜单项移至最后一个菜单项。这里的事件属于事件类型，表示触发焦点移动的原因。 |
| option(optionName) | 此操作获取当前与指定的optionName关联的值。这里的optionName是字符串类型，表示要获取的选项的名称。 |
| option() | 此操作获取一个对象，该对象包含表示当前菜单选项哈希的键/值对。 |
| option(optionName，value) | 此操作设置与指定的optionName关联的菜单选项的值。这里的optionName是字符串类型，代表要设置的选项名称，value是对象类型，代表要为选项设置的值。 |
| option(options) | 此操作为菜单设置一个或多个选项。这里的options是object类型，代表要设置的option-value对的映射。 |
| previous([event]) | 此操作将活动状态移至上一个菜单项。这里的事件属于事件类型，表示触发焦点移动的原因。 |
| previouspage([event]) | 此操作将活动状态移至可滚动菜单顶部上方的第一个菜单项，如果不可滚动，则将其移至第一项。这里的事件属于事件类型，表示触发焦点移动的原因。 |
| refresh() | 此操作将初始化尚未初始化的子菜单和菜单项。此方法不接受任何参数。 |
| select([event]) | 此操作将选择当前活动的菜单项，折叠所有子菜单并触发菜单的选择事件。这里的事件属于事件类型，表示触发选择的原因。 |
| widget() | 此操作返回一个包含菜单的jQuery对象。此方法不接受任何参数。 |
jQueryUI Menu()示例3
使用focus和collapseAll方法:
让我们举一个例子演示使用焦点和折叠全部方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
var menu = $("#menu-4").menu();
$( "#menu-4").menu("focus", null, $( "#menu-4").menu().find( ".ui-menu-item:last"));
$(menu).mouseleave(function () {
menu.menu('collapseAll');
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id="menu-4">
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">JSF</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Java</a>
<ul>
<li><a href="#">Core Java</a></li>
<li><a href="#">J2EE</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">Hibernate</a></li>
<li><a href="#">Struts</a></li>
</ul>
</li>
</ul>
</body>
</html>