jqueryui时间插件_jQueryUI菜单插件教程示例

最新推荐文章于 2024-09-14 18:52:56 发布

cunchi4221

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量150

点赞数

文章标签： jquery javascript js css java ViewUI

原文链接：https://www.journaldev.com/5996/jqueryui-menu-plugin-tutorial-example

版权

jqueryui时间插件

Earlier we looked at different plugins provided by jQueryUI. In this post, we will see the jQueryUI Menu plugin in action. jQueryUI provides menu() method to create themeable menu with keyboard and mouse interaction. We can create menu from any valid markup and the most commonly used element is the unordered list. We will look at different options, methods and events associated with the jQueryUI Menu plugin in this tutorial.

之前，我们研究了jQueryUI提供的不同插件。在这篇文章中，我们将看到实际使用的jQueryUI Menu插件 。 jQueryUI提供menu()方法来创建具有键盘和鼠标交互作用的主题菜单。我们可以从任何有效的标记创建菜单，最常用的元素是无序列表 。在本教程中，我们将研究与jQueryUI Menu插件相关的不同选项，方法和事件。

jQueryUI menu plugin uses following CSS classes to style the look and feel of the menu.

jQueryUI菜单插件使用以下CSS类来设置菜单的外观。

ui-menu: This is menu’s outer container. It has additional ui-menu-icons class if it contains any icons.
ui-menu:这是菜单的外部容器。如果它包含任何图标，它还具有附加的ui-menu-icons类。
ui-menu-item: this is container for individual items in the menu.
ui-menu-item ：这是菜单中各个项目的容器。
ui-menu-icon: Used to set icons for sub menu.
ui-menu-icon ：用于设置子菜单的图标。
ui-menu-divider: This is used to divide elements between the items.
ui-menu-divider ：用于在项目之间划分元素。

内容 (Contents)

菜单插件选项 (Menu Plugin Options)

In this section, we will discuss about different options available to customize the jQueryUI Menu plugin. We have used many of these options in the Menu Plugin in Action section.

在本节中，我们将讨论可用于自定义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.

选件	句法	描述
残障人士	$（“ .selector”）。menu（{disable：true}）;	如果此选项设置为true，则菜单将被禁用。
图标	$（“ .selector”）。menu（{图标：{子菜单：“ ui-icon-circle-triangle-e”}}）;	用于子菜单的图标。
项目	$（“ .selector”）。menu（{items：“ .custom-item”}）;	用作菜单项的元素的选择器。
菜单	$（“ .selector”）。menu（{菜单：“ div”}）;	用作菜单容器的元素的选择器，包括子菜单。
位置	$（“ .selector”）.menu（{位置：{我：“左上”，在：“右5上+5”}}）;	此选项用于标识子菜单相对于关联菜单项的位置。
角色	$（“ .selector”）.menu（{角色：null}）;	此选项用于自定义用于菜单和菜单项的ARIA角色。

The above table briefly describes all the available options in the jQueryUI Menu plugin.

上表简要描述了jQueryUI Menu插件中的所有可用选项。

菜单插件方法 (Menu Plugin Methods)

In this section, we will look into the jQueryUI Menu plugin methods and its syntax. These methods are very useful when you deal with the Menu plugin.

在本节中，我们将研究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.

方法	用法	描述
模糊（[事件]）	$（“ .selector”）.menu（“ blur”）;	此方法用于触发菜单的模糊事件以从菜单移开焦点并重置活动元素样式。
崩溃（[事件]）	$（“ .selector”）。menu（“ collapse”）;	此方法用于关闭当前活动的子菜单。
破坏（）	$（“ .selector”）.menu（“ destroy”）;	此方法用于删除菜单插件功能。
disable（）	$（“ .selector”）.menu（“ disable”）;	此方法用于禁用菜单。
enable（）	$（“ .selector”）。menu（“启用”）;	用于启用菜单。
expand（[event]）	$（“ .selector”）.menu（“ expand”）;	此方法用于扩展当前活动的子菜单。
焦点（[事件]，项目）	$（“ .selector”）。menu（“ focus”，null，menu.find（“ .ui-menu-item：last”）））;	此方法触发焦点事件。
instance（）	$（“ .selector”）.menu（“ instance”）;	此方法用于获取菜单的实例对象。
isFirstItem（）	$（“ .selector”）.menu（“ isFirstItem”）;	如果当前活动的项目是菜单中的第一项，则返回true，否则返回false。
isLastItem（）	$（“ .selector”）。menu（“ isLastItem”）;	如果当前活动的项目是菜单中的最后一个项目，则返回true，否则返回false。
next（[event]）	$（“ .selector”）.menu（“ next”）;	此方法会将活动状态移至菜单中的下一项。
nextPage（[event]）	$（“ .selector”）.menu（“ nextPage”）;	此方法会将活动状态移动到可滚动菜单底部下方的第一个菜单项，如果不能滚动，则将最后一个菜单项移动到最后一个菜单项。
option（optionName）	$（“ .selector”）。menu（“ option”，“ disabled”）;	此方法用于获取与指定的optionName关联的值。
上一页（[事件]）	$（“ .selector”）.menu（“上一个”）;	此方法会将活动状态移动到菜单中的上一个项目。
previousPage（[event]）	$（“ .selector”）。menu（“ previousPage”）;	此方法会将活动状态移动到可滚动菜单顶部上方的上一个菜单项，如果不可滚动则将其移至第一项。
刷新（）	$（“ .selector”）.menu（“刷新”）;	初始化尚未初始化的子菜单和菜单项
选择（[事件]）	$（“ .selector”）.menu（“ select”）;	用于选择当前活动的菜单项。
小部件（）	$（“ .selector”）.menu（“ widget”）;	用于返回包含菜单插件的jQuery对象。

The above table briefly describes all the available methods in the jQueryUI Menu plugin.

上表简要描述了jQueryUI Menu插件中的所有可用方法。

菜单插件事件 (Menu Plugin Events)

In this section, we will discuss about different events associated with jQueryUI Menu plugin. We have used many of these events in the Menu Plugin in Action section.

在本节中，我们将讨论与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.

大事记	用法	描述
blur（event，ui）	$（“ .selector”）.menu（{，blur：function（event，ui）{}}）;	菜单不清晰时触发。
create（event，ui）	$（“ .selector”）.menu（{，create：function（event，ui）{}}）;	在创建菜单时触发。
焦点（事件，用户界面）	$（“ .selector”）.menu（{，focus：function（event，ui）{}}）;	菜单获得焦点时触发。
select（event，ui）	$（“ .selector”）。menu（{，select：function（event，ui）{}}）;	选择菜单时触发。

The above table briefly describes all the available events in the jQueryUI Menu plugin.

上表简要描述了jQueryUI Menu插件中的所有可用事件。

功能菜单插件 (Menu Plugin in Action)

In this section, we will try different examples to explore the uses of jQueryUI Menu plugin.

在本节中，我们将尝试不同的示例来探索jQueryUI Menu插件的用法。

默认功能 (Default Functionality)

The following example demonstrates the default functionality of jQueryUI Menu plugin, disabled items and nested menus with mouse and keyboard navigation support.

以下示例演示了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>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

In this example,
在此示例中， ui-state-disabled is used to disable any item in the menu. ui-state-disabled用于禁用菜单中的任何项目。

类别菜单 (Menu with Category)

The following example demonstrates the menu with different categories. We use items option to implement this functionality.

下面的示例演示具有不同类别的菜单。我们使用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>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

You can see how we used items options to create two categories in the above menu, Sports and Players.

您可以在上面的菜单中看到我们如何使用items选项创建两个类别：体育和玩家。

带有图标的菜单 (Menu with Icons)

The following example demonstrates the menu plugin with different icons used. jQuery UI provides a list of ui-icons to customize the menu plugin.

下面的示例演示了带有不同图标的菜单插件。 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"></span>Flag</li>
  <li><span class="ui-icon ui-icon-scissors"></span>Cut
    <ul>
      <li><span class="ui-icon ui-icon-image"></span>Cut</li>
      <li><span class="ui-icon ui-icon-signal-diag"></span>Star</li>
     </ul>
   </li>
  <li><span class="ui-icon ui-icon-star"></span>Star</li>
  <li class="ui-state-disabled"><span class="ui-icon ui-icon-print"></span>Print</li>
</ul>
 
 
</body>
</html>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

You can see the how we used
您可以看到我们如何使用 ui-icon CSS class to style menu’s look and feel. ui-icon CSS类来样式化菜单的外观。

That’s all for jQueryUI menu plugin and you will see more plugins in the coming posts.

jQueryUI菜单插件就这些了 ，您将在以后的文章中看到更多插件。