經過前兩篇文章的介紹我們了解了 開源Wijmo jQuery 插件集 所包含的 插件 和 多種Theme 樣式。還為剛入門的朋友提供了 jQuery 入門的一些基礎知識。
有些朋友第一次看到本系列文章，所以給出前篇文章的鏈接：
同時也再次感謝園子中朋友的支持，從這篇文章起，我們就分別介紹 開源Wijmo jQuery 插件集 中的插件。這篇文章我們將介紹 Wijmo Menu 使用方法。
看看 Wijmo Menu 給我們提供了哪些功能？
可以創建多級的、動態效果的、滾動的菜單，同時我們可以在菜單中添加圖片、復選框按鈕。下面我們就來展示下我們不得不愛的 Wijmo Menu，甚至還可以創建一個彈出式 Menu。
功能預覽展示：
建立你的第一個 Wijmo jQuery Menu:
點擊查看源碼
HTML 標簽： <ul id="menu"> <li><a>menuitem1</a> <ul> <li><a>menuitem1a</a></li> <li><a>menuitem2a</a></li> </ul> </li> <li><a>menuitem2</a></li> <li><a>menuitem3</a></li> </ul> jQuery 腳本： <script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); }); </script>
效果預覽：
點擊查看效果預覽
特性
垂直和水平菜單
菜單和子菜單，包括其他的布局選項，都可以水平或垂直地呈現出來。
效果截圖：
滾動顯示
C1Menu可以滾動顯示頂層菜單，子菜單和子組。你可以將滾動模式選項設置為，按鈕點擊滾動、按鈕懸停滾動、邊緣徘徊滾動或滾動條。
效果截圖：
菜單項目圖標
菜單項可以有它們自己的圖標。你可以從許多內置的圖標中選擇，也可以添加你自己的圖標到菜單。
動畫
菜單支持不同的展開和折疊的動畫效果。例如，漸變、從頂部滾動、水平打開、反彈，等等。
主題
只需點擊一下智能標簽，就可以通過從六個溢價主題（北極，午夜時分，雅集，火箭，鈷和英鎊）中選擇一個來改變菜單控件的外觀。另外，還可以使用jQuery UI中的ThemeRoller來創建一個自定義的主題！
源碼下載（包含以上特性）：wijmo-menu.zip
好了，關於 wijmo-menu 部分我們就介紹到這里，感興趣的朋友可以下載源碼動手嘗試。在下一篇文章中我們將介紹 Wijmo Accordinon 的特性及使用方法。
wijmenu API 介紹：(點擊隱藏 API)
點擊查看 API
animation：
設置 showAnimation 和 hideAnimation 來控制 wijmenu的動畫效果。
備注: 符合jQuery.UI 動畫設置標准。
類型: Object
默認值: {animated: "slide", option: null, duration: 400, easing: null}
示例代碼:
| 1 |
$(".selector").wijmenu("option", "animation", {animated:"slide", option: { direction: "right" }, duration: 400, easing: null}) |
backLink：
設置是否顯示類似於 iPod menu的后台按鈕
類型: Boolean
默認值: true
示例代碼:
| 1 |
$(".selector").wijmenu("option", "backLink", false) |
backLinkText：
設置后退按鈕文本值
類型: String
默認值: "Back"
示例代碼:
| 1 |
$(".selector").wijmenu("option", "backLink", "Previous") |
checkable
設置菜單項是否為復選框
類型: Boolean
默認值: false
示例代碼:
| 1 |
$(".selector").wijmenu("option", "checkable", true) |
crumbDefaultText
設置頂部 breadcrumb 的文本值.
類型: String
默認值: "Choose an option"
示例代碼:
| 1 |
$(".selector").wijmenu("option", "crumbDefaultText", "Choose") |
disabled
設置是否 disable wijmenu 插件.
類型:Boolean
默認值: False
示例代碼:
| 1 |
$(".selector").wijmenu("option", "disabled", true) |
hideAnimation
設置是否把animation 應用到子菜單。
類型: Object
默認值: {Animated:"fade",option: null, duration: 400, easing: null}
示例代碼:
| 1 |
$(".selector").wijmenu("option", "hideAnimation", {animated:"fade", option: { direction: "right" }, duration: 400, easing: null}) |
hideDelay
設置sunmenu隱藏的延遲 milliseconds。
類型: Number
默認值: 400
示例代碼:
| 1 |
$(".selector").wijmenu("option", "hideDelay", 1000); |
maxHeight
設置iPod-style menu 的最大height。
備注:這個設置只可以應用於iPod 樣式menu。當menu高度大於最大值時，自動生成 ScrollBar
類型: Number
默認值: 200
示例代碼:
| 1 |
$(".selector").wijmenu("option", "maxHeight", 300) |
mode
設置submenu的彈出方式： popup menu 或者 iPod-style
備注: 可設置值為"flyout" 和"sliding"。
類型: String
默認值: "flyout"
示例代碼:
| 1 |
$(".selector").wijmenu("option", "mode", "sliding") |
orientation
設置主menu 方向，submenu的默認方向為vertical。
標記: "horizontal" 和 "vertical"。
類型: String
默認值: "horizontal"
示例代碼:
| 1 |
$(".selector").wijmenu("option", "orientation", "vertical") |
position
設置menu的相對於用於打開menu的button和link位置和方向。
類型: Object
默認值: {}
示例代碼:
| 1 |
$(".selector").wijmenu("option", "position", {my: "top right", at: "buttom left"}) |
showAnimation
設置彈出下拉菜單是是否顯示動畫效果。
類型: Object
默認值: {}
示例代碼:
| 1 |
$(".selector").wijmenu("option", "showAnimation", {animated:"slide", option: { direction: "right" }, duration: 400, easing: null}) |
showDelay
設置在彈出submenu之前的延遲時間。
類型: Number
默認值: 400
示例代碼:
| 1 |
$(".selector").wijmenu("option", "showDelay", 1000); |
slidingAnimation
設置sliding 模式下的submenu滑動時間。
類型: Object
默認值: {duration: 400, easing: null})
示例代碼:
| 1 |
$(".selector").wijmenu("option", "slidingAnimation", {duration: 1000,}) |
superPanelOptions
創建superpanel 設置hash 值。
類型: Object
默認值: null
示例代碼:
| 1 |
$(".selector").wijmenu("option", "superPanelOptions", {}) |
topLinkText
設置頂部鏈接的文本值。
類型: String
默認值: "All"
示例代碼:
| 1 |
$(".selector").wijmenu("option", "topLinkText", "Root") |
trigger
操作打開menu和submenu的jQuery 選擇器。
備注: 如果trigger 設置到menu,或<li> 元素,如果triggerEvent 被設置為click，那么click submenu 時，submenu即彈出。
類型: String
默認值: ""
示例代碼:
| 1 |
$(".selector").wijmenu("option", "trigger", "#selector") |
triggerEvent
設置顯示menu的事件。
備注: 可使用值為click,mouseenter, dbclick, 或rtclick.
類型: String
默認值: "click"
示例代碼:
| 1 |
$(".selector").wijmenu("option", "triggerEvent", "click") |
Events
blur.wijmenu
當menu失去焦點時觸發事件。
默認值: null
類型: Function
參數:
e: jQuery.Event object.
data: data.item 為失去focus的menu項。
示例代碼:
| 1 2 3 4 |
// Supply a function as an option. $("#selector").wijmenu({blur: function(e, data){}}); // Bind to the event by type: wijmenublur $(".selector").bind("wijmenublur", function(e, data) { } ); |
focus
當menu獲得焦點時觸發事件。
默認值: null
類型: Function
參數:
e: jQuery.Event。
data: data.item 為獲得focus的menu項。
示例代碼:
| 1 2 3 4 |
// Supply a function as an option. $("#selector").wijmenu({focus: function(e, data) {}}); // Bind to the event by type: wijmenufocus $(".selector").bind("wijmenufocus", function(e, data) { } ); |
select
當menu項被選中時觸發事件。
默認值: null
類型: Function
參數:
e: jQuery.Event
data: data.item 為失去選擇的menu項
示例代碼:
| 1 2 3 4 |
// Supply a function as an option. $("#selector").wijmenu({select, function(e, data){}}); // Bind to the event by type: wijmenuselect $(".selector").bind("wijmenuselect", function(e, data) { } ); |
showing.wijmenu
彈出submenu之前觸發事件.
默認值: null
類型: Function
參數:
e: event object 用於關聯submenu的父節點。
sublist: submenu 元素.
示例代碼:
| 1 2 3 4 |
// Supply a function as an option. $("#selector").wijmenu({showing, function(e, sublist){}}); // Bind to the event by type: wijmenushowing $(".selector").bind("wijmenushowing", function(e, sublist) { } ); |
Methods
activate(event, item)
激活新的菜單項，scrolling the new item into view, and if necessary, making it the active item, and triggering a focus event.
參數:
event: javascript event.
類型: Event
item: 激活的menu 項。
類型: jQuery object
示例代碼:
| 1 |
$(".selector").wijmenu("activate", null, $(".sub-item")); |
deactivate()
清除當前選擇項。
參數:
event: javascript event.
類型: Event
示例代碼:
| 1 |
$(".selector").wijmenu("deactivate"); |
destroy()
移除所有wijmenu 綁定的函數。返回值為wijmenu pre-init 狀態。
示例代碼:
| 1 |
$(".selector").wijmenu("destroy"); |
disable()
使wijmenu失效。
示例代碼:
| 1 |
$(".selector").wijmenu("disable"); |
enable()
使wijmenu生效。
示例代碼:
| 1 |
$(".selector").wijmenu("enable"); |
first()
判斷當前項是否為菜單第一項。
示例代碼:
| 1 |
$(".selector").wijmenu("first"); |
last()
判斷當前項是否為菜單第最后一項。
示例代碼:
| 1 |
$(".selector").wijmenu("last"); |
next()
選擇后一項作為活躍菜單項，如果當前活躍項為最后一項則跳轉到菜單第一項。
參數:
事件: javascript event..
類型: Event
示例代碼:
| 1 |
$(".selector").wijmenu("next"); |
nextPage()
此方法類似於"next" 方法,但是以頁為單位。
示例代碼:
| 1 |
$(".selector").wijmenu("nextPage"); |
option(optionName, [value])
獲取或設置wijmenu 選項。
參數:
optionName:代表設置或獲取的option 名稱。
類型: String
value:代表設置對象值.
類型: Object.
示例代碼:
| 1 2 |
$(".selector").wijmenu("option", "triggerEvent"); $(".selector").wijmenu("option", "triggerEvent", "click"); |
option(options)
一次性設置多個設置wijmenu 選項.
參數:
options:代表options 值。
類型: Object
示例代碼:
| 1 |
$(".selector").wijmenu("option", {triggerEvent: "click", trigger: "#selector"}); |
previous()
選擇前一項作為活躍菜單項，如果當前活躍項為第一項則跳轉到最后菜單項。
參數:
event: javascript event..
類型: Event
示例代碼:
| 1 |
$(".selector").wijmenu("previous"); |
previousPage()
此方法類似於"previous" 方法,但是以頁為單位。
示例代碼:
| 1 |
$(".selector").wijmenu("previousPage"); |
refresh()
渲染non-menu 項為菜單項menuitems。在添加或替換菜單項時可以調用該方法。例如，menu.append。
示例代碼:
| 1 |
$(".selector").wijmenu("refresh"); |
select()
選擇活躍項，觸發活躍項的選擇事件。這個事件被用於定制Keyboard快捷鍵。
示例代碼:
| 1 |
$(".selector").wijmenu("select"); |
setItemDisabled(selector, disabled)
使當前 menu 選擇項失效。
參數:
selector: 聲明disabled菜單項
類型: jQuery selector
disabled: 設置為true 時菜單項為disabled; 否則，菜單項生效
Type:Boolean
示例代碼:
| 1 |
$(".selector").wijmenu("setItemDisabled", $(".sub-item"), true); |
widget()
返回wijmenu 元素
示例代碼
| 1 |
$(".selector").wijmenu("widget"); |