jQuery UI菜单 jQueryUI菜单|jQueryUI

本文概述

第一种方法
jQueryUI菜单示例1
jQuery UI Menu()示例2
第二种方法
jQueryUI Menu()示例3

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://img.readke.com/220430/0050164004-0.jpg"> < /script> < script src="http://img.readke.com/220430/00501AU1-1.jpg"> < /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="http://www.srcmini.com/#"> C< /a> < /li> < li> < a href="http://www.srcmini.com/#"> C++< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Java< /a> < ul> < li> < a href="http://www.srcmini.com/#"> Core Java< /a> < /li> < li> < a href="http://www.srcmini.com/#"> J2EE< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Spring< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Hibernate< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Struts< /a> < /li> < /ul> < /li> < li> < a href="http://www.srcmini.com/#"> JSF< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 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://img.readke.com/220430/0050164004-0.jpg"> < /script> < script src="http://img.readke.com/220430/00501AU1-1.jpg"> < /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="http://www.srcmini.com/#"> C< /a> < /li> < li> < a href="http://www.srcmini.com/#"> C++< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Java< /a> < ul> < li> < a href="http://www.srcmini.com/#"> Core Java IO< /a> < /li> < li> < a href="http://www.srcmini.com/#"> J2EE< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Spring< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Hibernate< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Struts< /a> < /li> < /ul> < /li> < li> < a href="http://www.srcmini.com/#"> JSF< /a> < /li> < li> < a href="http://www.srcmini.com/#"> HTML5< /a> < /li> < /ul> < /body> < /html>

【jQuery UI菜单】立即测试
第二种方法菜单（“操作”, 参数）方法用于对菜单元素执行操作, 例如启用/禁用菜单。该操作在第一个参数中指定为字符串（例如, “ 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://img.readke.com/220430/0050164004-0.jpg"> < /script> < script src="http://img.readke.com/220430/00501AU1-1.jpg"> < /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="http://www.srcmini.com/#"> C< /a> < /li> < li> < a href="http://www.srcmini.com/#"> C++< /a> < /li> < li> < a href="http://www.srcmini.com/#"> JSF< /a> < /li> < li> < a href="http://www.srcmini.com/#"> HTML5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Java< /a> < ul> < li> < a href="http://www.srcmini.com/#"> Core Java< /a> < /li> < li> < a href="http://www.srcmini.com/#"> J2EE< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Spring< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Hibernate< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Struts< /a> < /li> < /ul> < /li> < /ul> < /body> < /html>

立即测试