不得不爱开源 Wijmo jQuery 插件集（3）-【菜单】(附页面展示和源码)

 

经过前两篇文章的介绍我们了解了 开源Wijmo jQuery 插件集 所包含的 插件 和 多种Theme 样式。还为刚入门的朋友提供了 jQuery 入门的一些基础知识。

有些朋友第一次看到本系列文章，所以给出前篇文章的链接：

• 《不得不爱开源 Wijmo jQuery 插件集【附演示和源码】【开篇】》
• 《不得不爱开源Wijmo jQuery 插件集【附30种Theme演示和源码】【准备工作】》

 

同时也再次感谢园子中朋友的支持，从这篇文章起，我们就分别介绍 开源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");