jQueryUI菜单插件教程示例
时间：2020-02-23 14:46:17 来源:igfitidea点击:
之前，我们研究了jQueryUI提供的不同插件。
在这篇文章中，我们将看到实际使用的jQueryUI Menu插件。
jQueryUI提供menu()方法来创建具有键盘和鼠标交互作用的主题菜单。
我们可以从任何有效的标记中创建菜单，最常用的元素是无序列表。
在本教程中，我们将研究与jQueryUI Menu插件相关的不同选项，方法和事件。
jQueryUI菜单插件使用以下CSS类来设置菜单的外观。
ui-menu：这是菜单的外部容器。
如果它包含任何图标，它还具有附加的" ui-menu-icons"类。ui-menu-item：这是菜单中单个项目的容器。
ui-menu-icon：用于设置子菜单的图标。
ui-menu-divider：用于在项目之间划分元素。
菜单插件选项
在本节中，我们将讨论可用于自定义jQueryUI Menu插件的不同选项。
我们在"操作中的菜单插件"部分中使用了许多这些选项。
| Options | Syntax | Description |
|---|---|---|
| disabled | $( ".selector"; ).menu({ disabled: true }); | Menu will be disabled, if this option is set to true. |
| icons | $( ".selector"; ).menu({ icons: { submenu: "ui-icon-circle-triangle-e"; } }); | Icons used for the sub menus. |
| items | $( ".selector"; ).menu({ items: ".custom-item"; }); | Selector for the elements that serve as the menu items. |
| menus | $( ".selector"; ).menu({ menus: "div"; }); | Selector for the elements that serve as the menu container, including sub-menus. |
| position | $( ".selector"; ).menu({ position: { my: "left top";, at: "right-5 top+5"; } }); | This option is used to Identify the position of sub menus in relation to the associated menu item. |
| role | $( ".selector"; ).menu({ role: null }); | This option is used to customize the ARIA roles used for the menu and menu items. |
上表简要描述了jQueryUI Menu插件中的所有可用选项。
菜单插件方法
在本节中，我们将研究jQueryUI Menu插件方法及其语法。
当您处理Menu插件时，这些方法非常有用。
| Methods | Usage | Description |
|---|---|---|
| blur([event ] ) | $( ".selector"; ).menu( "blur"; ); | This method is used to triggers the menu's blur event to remove focus from a menu and resets active element styles. |
| collapse( [event ] ) | $( ".selector"; ).menu( "collapse"; ); | This method is used to close the currently active sub menu. |
| destroy() | $( ".selector"; ).menu( "destroy"; ); | This method is used to remove the menu plugin functionality. |
| disable() | $( ".selector"; ).menu( "disable"; ); | This method is used to disable the menu. |
| enable() | $( ".selector"; ).menu( "enable"; ); | Used to enable menu. |
| expand( [event ] ) | $( ".selector"; ).menu( "expand"; ); | This method is used to expand the currently active sub menu. |
| focus( [event ], item ) | $( ".selector"; ).menu( "focus";, null, menu.find( ".ui-menu-item:last"; ) ); | This method triggers the focus event . |
| instance() | $( ".selector"; ).menu( "instance"; ); | This method is used to get the menu's instance object. |
| isFirstItem() | $( ".selector"; ).menu( "isFirstItem"; ); | Returns true if the currently active item is the first item in the menu otherwise false. |
| isLastItem() | $( ".selector"; ).menu( "isLastItem"; ); | Returns true if the currently active item is the last item in the menu otherwise false. |
| next([event ] ) | $( ".selector"; ).menu( "next"; ); | This method will move the active state to the next item in the menu. |
| nextPage( [event ] ) | $( ".selector"; ).menu( "nextPage"; ); | This method will move the active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable. |
| option( optionName ) | $( ".selector"; ).menu( "option";, "disabled"; ); | This method is used to get the value associated with the specified optionName. |
| previous( [event ] ) | $( ".selector"; ).menu( "previous"; ); | This method will move the active state to the previous item in the menu. |
| previousPage([event ] ) | $( ".selector"; ).menu( "previousPage"; ); | This method will move the active state to previous menu item above the top of a scrollable menu or the first item if not scrollable. |
| refresh() | $( ".selector"; ).menu( "refresh"; ); | Initializes sub-menus and menu items that have not already been initialized |
| select( [event ] ) | $( ".selector"; ).menu( "select"; ); | Used to select the currently active menu item. |
| widget() | $( ".selector"; ).menu( "widget"; ); | Used to return jQuery object containing the menu plugin. |
上表简要描述了jQueryUI Menu插件中的所有可用方法。
菜单插件事件
在本节中，我们将讨论与jQueryUI Menu插件相关的不同事件。
我们在"操作菜单插件"部分中使用了许多此类事件。
| Events | Usage | Description |
|---|---|---|
| blur( event, ui ) | $( ".selector"; ).menu({,blur: function( event, ui ) {}}); | Fired when the menu is out of focus. |
| create( event, ui ) | $( ".selector"; ).menu({,create: function( event, ui ) {}}); | Fired when the menu is created. |
| focus( event, ui ) | $( ".selector"; ).menu({,focus: function( event, ui ) {}}); | Fired when the menu gets focus. |
| select( event, ui ) | $( ".selector"; ).menu({,select: function( event, ui ) {}}); | Fired when the menu is selected. |
上表简要描述了jQueryUI Menu插件中的所有可用事件。
功能菜单插件
在本节中，我们将尝试不同的示例来探索jQueryUI Menu插件的用法。
默认功能
以下示例演示了jQueryUI Menu插件，禁用的项目以及具有鼠标和键盘导航支持的嵌套菜单的默认功能。
menu-default.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Menu - Default Functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li>Hockey</li>
<li>Football
<ul>
<li>Iain Hume</li>
<li>Del Piero</li>
<li>David James</li>
</ul>
</li>
<li>Cricket
<ul>
<li>Sachin</li>
<li>Ganguly</li>
<li>Dravid</li>
</ul>
</li>
<li class='ui-state-disabled'>KickBoxing</li>
<li>Tennis
<ul>
<li>Patrick Rafter</li>
</ul>
</li>
</ul>
</body>
</html>
您将在浏览器中看到以下输出。
在此示例中，" ui-state-disabled"用于禁用菜单中的任何项目。
类别菜单
以下示例演示了具有不同类别的菜单。
我们使用items选项来实现此功能。
menu-category.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Menu - Category</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#menu" ).menu({
items: "> :not(.ui-widget-header)"
});
});
</script>
<style>
.ui-menu { width: 150px; }
.ui-widget-header { padding: 0.3em; }
</style>
</head>
<body>
<ul id="menu">
<li class="ui-widget-header">Sports</li>
<li>Football</li>
<li>Cricket</li>
<li class="ui-widget-header">Players<li>
<li>Iain Hume</li>
<li>David James</li>
<li>Sachin</li>
<li>Ganguly</li>
</ul>
</body>
</html>
您将在浏览器中看到以下输出。
您可以在上面的菜单中看到我们如何使用"项目"选项创建两个类别，即"体育"和"球员"。
带有图标的菜单
以下示例演示了使用带有不同图标的菜单插件。
jQuery UI提供了一系列用于自定义菜单插件的ui图标。
menu-icons.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Menu - Icons</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li><span class="ui-icon ui-icon-flag">Flag</li>
<li><span class="ui-icon ui-icon-scissors">Cut
<ul>
<li><span class="ui-icon ui-icon-image">Cut</li>
<li><span class="ui-icon ui-icon-signal-diag">Star</li>
</ul>
</li>
<li><span class="ui-icon ui-icon-star">Star</li>
<li class="ui-state-disabled"><span class="ui-icon ui-icon-print">Print</li>
</ul>
</body>
</html>
