标签:jquery ui 相同 dia osi www 获得 tor save ima
带有鼠标和键盘交互的用于导航的可主题化菜单。
菜单可以用任何有效的标记创建,只要元素有严格的父/子关系且每个条目都有一个锚。最常用的元素是无序列表(<ul>
):
<ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Item 3-1</a></li> <li><a href="#">Item 3-2</a></li> <li><a href="#">Item 3-3</a></li> <li><a href="#">Item 3-4</a></li> <li><a href="#">Item 3-5</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul>
如果使用一个非 <ul>
/<li>
的结构,为菜单和菜单条目使用相同的元素,请使用 menus
选项来区分两个元素,例如 menus: "div.menuElement"
。
可通过向元素添加 ui-state-disabled
class 来禁用任何菜单条目。
为了向菜单添加图标,请在标记中包含图标:
<ul id="menu"> <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li> </ul>
菜单(Menu)会自动向无图标的条目添加必要的内边距。
分隔符元素可通过包含未链接的菜单条目来创建,菜单条目只能是空格/破折号:
<ul id="menu"> <li><a href="#">Item 1</a></li> <li>-</li> <li><a href="#">Item 2</a></li> </ul>
输入一个字母,移动焦点到以该字母开头的第一个条目。重复相同的字符会循环显示匹配的条目。在一个时间内输入更多的字符则匹配所输入的字符。
禁用项可获得键盘焦点,但是不允许任何交互。
菜单部件(Menu Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用菜单指定的样式,则可以使用下面的 CSS class 名称:
ui-menu
:菜单的外层容器。如果菜单包含图标,该元素会另外带有一个 ui-menu-icons
class。
ui-menu-item
:单个菜单项的容器。
ui-menu-icon
:通过 icons
选项进行子菜单图标设置。ui-menu-divider
:菜单项之间的分隔符元素。一个简单的 jQuery UI 菜单(Menu)。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>菜单部件(Menu Widget)演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> .ui-menu { width: 200px; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Item 3-1</a></li> <li><a href="#">Item 3-2</a></li> <li><a href="#">Item 3-3</a></li> <li><a href="#">Item 3-4</a></li> <li><a href="#">Item 3-5</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> <script> $( "#menu" ).menu(); </script> </body> </html>
标签:jquery ui 相同 dia osi www 获得 tor save ima
原文地址:https://www.cnblogs.com/springsnow/p/12503540.html