jqueryui时间插件_jQueryUI菜单插件教程示例
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 additionalui-menu-iconsclass 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菜单插件选项
- Menu Plugin Methods菜单插件方法
- Menu Plugin Events菜单插件事件
- Menu Plugin in Action功能菜单插件
菜单插件选项 (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
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
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
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菜单插件就这些了 ，您将在以后的文章中看到更多插件。
翻译自: https://www.journaldev.com/5996/jqueryui-menu-plugin-tutorial-example
jqueryui时间插件
jqueryui时间插件_jQueryUI菜单插件教程示例相关推荐
- jqueryui时间插件_jQueryUI AutoComplete插件
jqueryui时间插件 In this post, we will discuss about one of the useful plugins provided by jQuery to spe ...
- jqueryui时间插件_jQueryUI工具提示插件
jqueryui时间插件 In this post, we will look into the details of jQueryUI Tooltip plugin. We can attach t ...
- jqueryui时间插件_jQueryUI Progressbar插件
jqueryui时间插件 We have discussed about different jQuery UI plugins like datepicker, accordion and auto ...
- jqueryui时间插件_满足您所有日历要求的jQueryUI Datepicker插件
jqueryui时间插件 jQuery provides a variety of Calendar Plugins that would allow you to integrate calenda ...
- vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单 ...
- 我的世界服务器虚拟菜单插件,[综合|娱乐|管理][比赛]VirtualMenu——支持多种类型GUI的虚拟菜单[1.7.10~1.14]...
您尚未登录,立即登录享受更好的浏览体验! 您需要 登录 才可以下载或查看,没有帐号?注册(register) x 本帖最后由 ColorsWind 于 2020-4-4 11:27 编辑 写在前面 v ...
- html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件
这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...
- 谷歌浏览器不能上网_谷歌浏览器插件下载及安装教程！
emmm......这篇文章的内容非常小白,相信大部分人都会这个基本操作. 但是阁主相信还有些妹子操作不来,如果还没有男朋友,那不是铁定不会安装谷歌浏览器插件么? 其实"谷歌浏览器+插件&q ...
- 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
DEMO: http://sources.ikeepstudying.com/menu-mail-qq/ 一.这是什么样的一个插件 我们都知道,默认状态下,我们右键web页面,会出现一个上下文菜单,例 ...
最新文章
- 【Zookeeper】Zookeeper部署笔记
- TCP/IP协议示意图
- shiro受权时没有走对应的realm的授权解决方案
- thread安全性（写的不错）
- Python数据分析之画图力气pyecharts 制作3D图像！
- Python异常捕获及自定义异常类
- raid -- 分区-- 格式化 --挂载
- 专科python应届生工资多少-大四应届毕业生，学了两个月Python，找工作感觉好难啊？...
- 鸿蒙渊 灵兽经验,【转】[攻略]传奇世界灵兽升级经验汇总
- ORA-01113问题的简单分析
- redis缓存hset, hget, hPutAll
- 手机拍照及简单的图片压缩
- java管理系统删除报错_Java版学籍管理系统
- Linux日志切割工具logrotate原理和配置详解
- corelDraw 的CDR格式解析
- 百度图片搜索搜出大量色情图片，原因不明
- 音频交流会（个人学习向项目）
- 解决jrebe-JVMTI[FATAL] Couldnt write to C:\Users\启动报错
- C语言中的与、或、非
- 记录一次Git解决CONFLICT冲突