1. 程式人生 > >jQuery UI庫使用記錄----menu

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的條目被選擇時觸發