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

殳睿
2023-12-01
简单实例
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的条目被选择时触发


 类似资料: