srcmini本文概述
jQuery UI Menu小部件由带有弹出菜单的主菜单栏组成。弹出菜单中的某些项目还具有子弹出菜单。只要维护父子关系, 就可以使用标记元素来创建这些菜单。
jQuery UI使用menu()方法创建菜单。
句法：
你可以两种形式使用menu()方法。
$(selector, context).menu (options) Method$(selector, context).menu ("action", params) Method第一种方法
menu（选项）方法指定应将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>立即测试
第二种方法
菜单（“操作”, 参数）方法用于对菜单元素执行操作, 例如启用/禁用菜单。该操作在第一个参数中指定为字符串（例如, “ 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>立即测试
评论前必须登录！
注册