jQuery?UI菜單部件Menu?Widget
帶有鼠標和鍵盤交互的用于導(dǎo)航的可主題化菜單。
實例
一個簡單的 jQuery UI 菜單(Menu)。
代碼
<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>
菜單可以用任何有效的標記創(chuàng)建,只要元素有嚴格的父/子關(guān)系且每個條目都有一個錨。最常用的元素是無序列表ul:
如果使用一個非 <ul>
/<li>
的結(jié)構(gòu),為菜單和菜單條目使用相同的元素,請使用 menus
選項來區(qū)分兩個元素,例如 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)會自動向無圖標的條目添加必要的內(nèi)邊距。
三、分隔符
分隔符元素可通過包含未鏈接的菜單條目來創(chuàng)建,菜單條目只能是空格/破折號:
<ul id="menu"> <li><a href="#">Item 1</a></li> <li>-</li> <li><a href="#">Item 2</a></li> </ul>
四、鍵盤交互
- ENTER/SPACE:調(diào)用獲得焦點的菜單項的動作,可能會打開一個子菜單。
- UP:移動教導(dǎo)到上一個菜單項。
- DOWN:移動教導(dǎo)到下一個菜單項。
- RIGHT:如果可用,則打開子菜單。
- LEFT:關(guān)閉當前子菜單,移動焦點到父菜單項。如果焦點不在子菜單上,則不進行任何操作。
- ESCAPE:關(guān)閉當前子菜單,移動焦點到父菜單項。如果焦點不在子菜單上,則不進行任何操作。
輸入一個字母,移動焦點到以該字母開頭的第一個條目。重復(fù)相同的字符會循環(huán)顯示匹配的條目。在一個時間內(nèi)輸入更多的字符則匹配所輸入的字符。
禁用項可獲得鍵盤焦點,但是不允許任何交互。
五、主題化
菜單部件(Menu Widget)使用 jQuery UI CSS 框架 來定義它的外觀和感觀的樣式。如果需要使用菜單指定的樣式,則可以使用下面的 CSS class 名稱:
ui-menu
:菜單的外層容器。如果菜單包含圖標,該元素會另外帶有一個ui-menu-icons
class。ui-menu-item
:單個菜單項的容器。ui-menu-icon
:通過icons
選項進行子菜單圖標設(shè)置。ui-menu-divider
:菜單項之間的分隔符元素。
六、快速導(dǎo)航
1、Options
- disabled:如果設(shè)置為
true
,則禁用該 menu(菜單)。 - icons:標題要使用的圖標,與 jQuery UI CSS 框架提供的圖標(Icons) 匹配。設(shè)置為 false 則不顯示圖標。
- menus:作為menu(菜單)容器的元素的選擇器, 包括子菜單。
- position:標識建議菜單的位置與相關(guān)的 input 元素有關(guān)系。
of
選項默認為 input 元素,但是您可以指定另一個定位元素。 - role:自定義用于菜單和菜單項的ARIA roles(注:關(guān)于ARIA roles)。 在默認情況下菜單項使用
"menuitem"
。 設(shè)置role
選項為了使"listbox"
使用"option"
作為菜單項。 如果設(shè)置為null
, 沒有roles將被設(shè)置,如果菜單是由被保持焦點另一個元件控制時候,非常有用。
2、Methods
- blur():從菜單中刪除焦點, 重置任何激活樣式 和 觸發(fā)菜單的
blur
事件。 - collapse():關(guān)閉當前活動的子菜單。
- collapseAll():關(guān)閉全部打開的子菜單。
- destroy():完全移除 menu 功能. 這將使元素返回到之前的初始化狀態(tài).
- disable():禁用 menu.
- enable():啟用 menu.
- expand():打開當前活動項目下的子菜單下,如果有的話。
- focus():激活一個特定的菜單項, 首先,如果打開存在的任何子菜單,并觸發(fā)菜單的
focus
事件。 - isFirstItem():返回一個布爾值,說明當前活動項目是否菜單的第一項。
- isLastItem():返回一個布爾值,說明當前活動項目是否菜單的最后一項。
- next():移動激活狀態(tài)到下一個菜單項。
- nextPage():移動激活狀態(tài)到第一個菜單項下的可滾動菜單的底部,或最后一個項目,如果不可滾動。
- option():
- previous():移動激活狀態(tài)到上一個菜單項。
- previousPage():移動激活狀態(tài)到第一個菜單項下的可滾動菜單的頂部,或第一一個項目,如果不可滾動。
- refresh():初始化還沒有被初始化的子菜單和菜單項。 新的菜單項, 包括子菜單可以被添加到菜單 或 所有的菜單的內(nèi)容可以被替換 然后使用
refresh()
方法初始化。 - select():選擇當前活動的菜單項, 折疊所有子菜單 并觸發(fā)菜單中的
select
事件。 - widget():返回一個包含 button 的
jQuery
對象。
3、Events
- blur( event, ui ):當menu失去焦點時觸發(fā)這個事件。
- create( event, ui ):當創(chuàng)建 menu 時觸發(fā)。
- focus( event, ui ):當一個菜單獲得焦點或當任意一個菜單項被激活時觸發(fā)這個事件。
- select( event, ui ):當被選中的時候觸發(fā)該事件。
到此這篇關(guān)于jQuery UI菜單部件Menu Widget的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性的相關(guān)資料,需要的朋友可以參考下2015-01-01jquery 之 $().hover(func1, funct2)使用方法
.hover(func1, func2) 的效果等效于: mouseenter(), mouseleave()2012-06-06jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
這篇文章主要介紹了jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法,實例分析了jquery實現(xiàn)圖片放大效果的方法,涉及jquery操作鼠標事件及頁面元素屬性修改的相關(guān)技巧,需要的朋友可以參考下2015-07-07jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用介紹
jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用,需要的朋友可以參考下。2011-10-10