jQuery UI库使用记录----menu

简单实例

html文件中的代码：

<style>
    .ui-menu { width: 180px; }
</style>

         这里注意添加上menu的宽度，否则它将横向充满整个屏幕....

 

<ul id="menu">
 		<li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>selection 1</a></li>    
 		<li><a href="#">selection 2</a></li>
 		<li>
 			<a href="#">selection 3</a>
 			<ul>
 				<li><a href="#">sub selection 1</a></li>
 				<li><a href="#">sub seleciton 2</a></li>
 				<li>
 					<a href="#">sub selection 3</a>
 					<ul>
 						<li><a href="#">third selection 1</a></li>
 						<li><a href="#">third selection 2</a></li>
 					</ul>
 				</li>
 			</ul>
 		</li>
 	</ul>

js文件中的代码

        

       

$("#menu").menu();

• 可以使用<span class="ui-icon ui-icon-zoomin"></span>添加jQuery ui的icon

• 设置元素如：<li class="ui-state-disabled"><a href="#">selection 2</a></li> 即在元素上添加ui-state-disabled类可以使元素无效

• 当焦点在menu上时，可以使用键盘操作：
  • 回车/空格：触发菜单的action，也可能是打开一个子目录
  • 上键：移动焦点到menu的上一个条目
  • 下键：移动焦点到menu的下一个条目
  • 右键：如果可以的话打开一个子目录
  • 左键：关闭当前子目录，并移动焦点到母目录的条目上，如果不是在子目录中则无效
  • esc：和左键相同
  • 敲打一个字母时将会将焦点移动到以那个字母开头的条目上
  • 焦点可以移动到无效的条目上，但不会有其他的效果

一些配置选项：

• disabled：初始化menu但使之无效，默认为false
• icons：在存在子目录时在母目录的条目上自动添加的图标，默认为一个向右的小箭头 ，值为 { submenu: "ui-icon-carat-1-e" }
• menus：一个选择作为menu的容器的选择器，默认为“ul”
• position：指定子目录相对于其母目录条目的位置，默认为{ my: "left top", at: "right top" }，具体参见jQuery UI Position
• role：确定menu及其条目的ARIA roles,默认为“menu”，会对所有条目设定“menuitem”角色，如果设置成“listbox”，则会将它们设定为“option”角色，如果值为null，则不会被设定角色。如果menu被初始化，则role设定将无法改变

一些方法：

• blur( [event ] )：从menu上移除焦点，并重设所有条目的样式和并触发menu的blur事件
• collapse( [event ] )：给那笔当前所在的子目录
• collapseAll( [event ] [, all ] )：关闭所有子目录
• destroy()：移除整个menu
• disable()：使得整个menu无效
• enable()：重新使得menu有效
• expand([event])：如果当前条目存在子目录，则打开当前条目的子目录
• focus([event],item)：聚焦在menu的一个条目上，若其有子目录，打开子目录，并触发整个menu的focus事件
• isFirstItem()：如果是当前目录的第一个条目则返回true，否则返回false
• isLastItem()：如果是当前目录的最后一个条目则返回true，否则返回false
• next([event])：移动焦点到当前 条目 的下一条条目
• nextPage( [event ] )：移动焦点到可以滚动的menu条目下一页的第一个条目，如果不可以滚动，则移动到最后一个条目
• option：不解释
• previous([event])：移动焦点到前一个条目
• previousPage([event])：可滚动的menu中移动焦点到上一页的最后一个条目，如果不可滚动则移动到第一个条目
• refresh：重庆新加载menu的条目
• select(event)：获得当前焦点的条目，关闭所有子目录并触发menu的select事件

一些事件：

绑定事件实例：

            $( ".selector" ).on( "menucreate", function( event, ui ) {} );

• blur：当menu失去焦点时触发
• create：当menu被创建时候触发
• focus：当menu获得焦点或其任何一个条目获得焦点时触发
• select：当一个menu的条目被选择时触发