jQuery UI庫使用記錄----menu
阿新 • • 發佈:2019-02-11
簡單例項
html檔案中的程式碼:
這裡注意新增上menu的寬度,否則它將橫向充滿整個螢幕....
js檔案中的程式碼
<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事件
- blur:當menu失去焦點時觸發
- create:當menu被建立時候觸發
- focus:當menu獲得焦點或其任何一個條目獲得焦點時觸發
- select:當一個menu的條目被選擇時觸發