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

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

阅读量：5220 次

发布时间：2019-06-14

本文共 7427 字，大约阅读时间需要 24 分钟。

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

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

同时也再次感谢园子中朋友的支持，从这篇文章起，我们就分别介绍开源Wijmo jQuery 插件集中的插件。这篇文章我们将介绍 Wijmo Menu 使用方法。

看看 Wijmo Menu 给我们提供了哪些功能？

可以创建多级的、动态效果的、滚动的菜单，同时我们可以在菜单中添加图片、复选框按钮。下面我们就来展示下我们不得不爱的 Wijmo Menu，甚至还可以创建一个弹出式 Menu。

功能预览展示：

建立你的第一个 Wijmo jQuery Menu:

HTML 标签：
          
       menuitem1        
                   
         menuitem1a
           
         menuitem2a
        
        
    
    
       menuitem2
    
       menuitem3
      
jQuery 脚本：

效果预览：

特性

垂直和水平菜单

菜单和子菜单，包括其他的布局选项，都可以水平或垂直地呈现出来。

效果截图：

滚动显示

C1Menu可以滚动显示顶层菜单，子菜单和子组。你可以将滚动模式选项设置为，按钮点击滚动、按钮悬停滚动、边缘徘徊滚动或滚动条。

效果截图：

菜单项目图标

菜单项可以有它们自己的图标。你可以从许多内置的图标中选择，也可以添加你自己的图标到菜单。

动画

菜单支持不同的展开和折叠的动画效果。例如，渐变、从顶部滚动、水平打开、反弹，等等。

主题

只需点击一下智能标签，就可以通过从六个溢价主题（北极，午夜时分，雅集，火箭，钴和英镑）中选择一个来改变菜单控件的外观。另外，还可以使用jQuery UI中的ThemeRoller来创建一个自定义的主题！

源码下载（包含以上特性）：

好了，关于 wijmo-menu 部分我们就介绍到这里，感兴趣的朋友可以下载源码动手尝试。在下一篇文章中我们将介绍 Wijmo Accordinon 的特性及使用方法。

wijmenu 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项。

示例代码:

// 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项。

示例代码:

// 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项

示例代码:

// 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 元素.

示例代码:

// 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");

转载于:https://www.cnblogs.com/C1SupportTeam/archive/2012/09/20/2690576.html

你可能感兴趣的文章

用Data Url (data:image/jpg;base64,)将小图片生成数据流形式

String,StringBuffer与StringBuilder的区别?? .

查看>>

JavaScript（三）数据类型

查看>>

移动端rem布局屏幕适配插件（放js中便可使用）

MongoDB遇到的疑似数据丢失的问题。不要用InsertMany！

查看>>

服务器被疑似挖矿程序植入107.174.47.156，发现以及解决过程（建议所有使用sonatype/nexus3镜像的用户清查一下）...

IntelliJ IDEA 12集成Tomcat 运行Web项目

查看>>

建立你的第一个 Wijmo jQuery Menu:

点击查看源码

效果预览：

点击查看效果预览

特性

垂直和水平菜单

滚动显示

菜单项目图标

动画

主题

源码下载（包含以上特性）：

wijmenu API 介绍：(点击隐藏 API)

点击查看 API

animation：

backLink：

backLinkText：

checkable

crumbDefaultText

disabled

hideAnimation

hideDelay

maxHeight

mode

orientation

position

showAnimation

showDelay

slidingAnimation

superPanelOptions

topLinkText

trigger

triggerEvent

Events

blur.wijmenu

focus

select

showing.wijmenu

Methods

activate(event, item)

deactivate()

destroy()

disable()

enable()

first()

last()

next()

nextPage()

option(optionName, [value])

option(options)

previous()

previousPage()

refresh()

select()

setItemDisabled(selector, disabled)

widget()