📅 最后修改于: 2020-11-27 02:01:03 🧑 作者: Mango
jQuery UI Menu小部件由带有弹出菜单的主菜单栏组成。弹出菜单中的某些项目还具有子弹出菜单。只要维护父子关系，就可以使用标记元素来创建这些菜单。
jQuery UI使用menu()方法创建菜单。
句法：
您可以两种形式使用menu()方法。
$(selector, context).menu (options) Method
$(selector, context).menu ("action", params) Method
menu(options)方法指定应将HTML元素及其内容视为菜单进行管理。这里的options参数是一个对象，用于指定所涉及菜单项的外观和行为。
句法：
$(selector, context).menu (options);
您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示：
$(selector, context).menu({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表。
| Option | Description |
|---|---|
| disabled | If you set this option to true, it disables the menu. By default its value is false. |
| icons | This option sets the icons for submenus. By default its value is { submenu: “ui-icon-carat-1-e” }. |
| menus | This option is a selector for the elements that serve as the menu container, including sub-menus. By default its value is ul. |
| position | This option sets the position of submenus in relation to the associated parent menu item. By default its value is { my: “left top”, at: “right top” }. |
| role | This option is used to customize the aria roles used for the menu and menu items. By default its value is menu. |
让我们以一个简单的示例来演示菜单小部件的功能，不将任何参数传递给menu()方法。
jQuery UI Menu functionality
使用图标和位置：
让我们以一个示例来演示jQuery UI主函数中两个选项图标和位置的用法。
jQuery UI Menu functionality
菜单(“操作”，参数)方法用于对菜单元素执行操作，例如启用/禁用菜单。该动作在第一个参数中指定为字符串(例如，“ disable”禁用菜单)。在下表中检查可以传递的操作。
句法：
$(selector, context).menu ("action", params);
以下是可与该方法一起使用的不同操作的列表。
| Action | Description |
|---|---|
| blur( [event ] ) | This action removes the focus from a menu. It triggers the menu’s blur event by resetting any active element style. Here event is of type event and represents what triggered the menu to blur. |
| collapse( [event ] ) | This action closes the current active sub-menu. Here event is of type event and represents what triggered the menu to collapse. |
| collapseall( [event ] [, all ] ) | This action closes all the open submenus. |
| destroy() | This action removes menu functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments. |
| disable() | This action disables the menu. This method does not accept any arguments. |
| enable() | This action is used to enable the menu. This method does not accept any arguments. |
| expand( [event ] ) | This action is used to open the sub-menu below the currently active item, if one exists. Here event is of type event and represents what triggered the menu to expand. |
| focus( [event ], item ) | This action activates a particular menu item, begins opening any sub-menu if present and triggers the menu’s focus event. Here event is of type event and represents what triggered the menu to gain focus and item is a jQuery object representing the menu item to focus/activate. |
| isFirstItem() | This action returns a boolean value, which states if the current active menu item is the first menu item. This method does not accept any arguments. |
| isLastItem() | This action returns a boolean value, which states if the current active menu item is the last menu item. This method does not accept any arguments. |
| Next( [event ] ) | This action delegates the active state to the next menu item. Here event is of type event and represents what triggered the focus to move. |
| Nextpage( [event ] ) | This action moves active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable. Here event is of type event and represents what triggered the focus to move. |
| option( optionName ) | This action gets the value currently associated with the specified optionName. Here optionName is of type string and represents the name of the option to get. |
| option() | This action gets an object containing key/value pairs representing the current menu options hash. |
| option( optionName, value ) | This action sets the value of the menu option associated with the specified optionName. Here optionName is of type string and represents name of option to set and value is of type object and represents value to set for the option. |
| option( options ) | This action sets one or more options for the menu. Here options is of type object and represents a map of option-value pairs to set. |
| previous( [event ] ) | This action moves active state to previous menu item. Here event is of type event and represents what triggered the focus to move. |
| previouspage( [event ] ) | This action moves active state to first menu item above the top of a scrollable menu or the first item if not scrollable. Here event is of type event and represents what triggered the focus to move. |
| refresh() | This action initializes sub-menus and menu items that have not already been initialized. This method does not accept any arguments. |
| select( [event ] ) | This action selects the currently active menu item, collapses all sub-menus and triggers the menu’s select event. Here event is of type event and represents what triggered the selection. |
| widget() | This action returns a jQuery object containing the menu. This method does not accept any arguments. |
使用focus和collapseAll方法：
让我们以一个示例来演示聚焦和折叠全部方法的使用。
jQuery UI Menu functionality