不得不爱开源 Wijmo jQuery 插件集(3)-【菜单】(附页面展示和源码)
2012-09-20 09:37
387 查看
// $(document).ready(function () {
$("#h52").bind("click", function () {
$("#content2").toggle(500);
$("#h52").toggleClass("hide show");
});
$("#h53").bind("click", function () {
$("#content3").toggle(500);
$("#h53").toggleClass("show hide");
});
$("#h54").bind("click", function () {
$("#content4").toggle(500);
$("#h54").toggleClass("show hide");
});
});
// ]]>
经过前两篇文章的介绍我们了解了 开源Wijmo jQuery 插件集 所包含的 插件 和 多种Theme 样式。还为刚入门的朋友提供了 jQuery 入门的一些基础知识。
有些朋友第一次看到本系列文章,所以给出前篇文章的链接:
《不得不爱开源 Wijmo jQuery 插件集【附演示和源码】【开篇】》
《不得不爱开源Wijmo jQuery 插件集【附30种Theme演示和源码】【准备工作】》
同时也再次感谢园子中朋友的支持,从这篇文章起,我们就分别介绍 开源Wijmo jQuery 插件集 中的插件。这篇文章我们将介绍 Wijmo Menu 使用方法。
看看 Wijmo Menu 给我们提供了哪些功能?
可以创建多级的、动态效果的、滚动的菜单,同时我们可以在菜单中添加图片、复选框按钮。下面我们就来展示下我们不得不爱的 Wijmo Menu,甚至还可以创建一个弹出式 Menu。
功能预览展示:
效果截图:
效果截图:
备注: 符合jQuery.UI 动画设置标准。
类型: Object
默认值: {animated: "slide", option: null, duration: 400, easing: null}
示例代码:
类型: Boolean
默认值: true
示例代码:
类型: String
默认值: "Back"
示例代码:
类型: Boolean
默认值: false
示例代码:
类型: String
默认值: "Choose an option"
示例代码:
类型:Boolean
默认值: False
示例代码:
类型: Object
默认值: {Animated:"fade",option: null, duration: 400, easing: null}
示例代码:
类型: Number
默认值: 400
示例代码:
备注:这个设置只可以应用于iPod 样式menu。当menu高度大于最大值时,自动生成 ScrollBar
类型: Number
默认值: 200
示例代码:
备注: 可设置值为"flyout" 和"sliding"。
类型: String
默认值: "flyout"
示例代码:
标记: "horizontal" 和 "vertical"。
类型: String
默认值: "horizontal"
示例代码:
类型: Object
默认值: {}
示例代码:
类型: Object
默认值: {}
示例代码:
类型: Number
默认值: 400
示例代码:
类型: Object
默认值: {duration: 400, easing: null})
示例代码:
类型: Object
默认值: null
示例代码:
类型: String
默认值: "All"
示例代码:
备注: 如果trigger 设置到menu,或<li> 元素,如果triggerEvent 被设置为click,那么click submenu 时,submenu即弹出。
类型: String
默认值: ""
示例代码:
备注: 可使用值为click,mouseenter, dbclick, 或rtclick.
类型: String
默认值: "click"
示例代码:
默认值: null
类型: Function
参数:
e: jQuery.Event object.
data: data.item 为失去focus的menu项。
示例代码:
默认值: null
类型: Function
参数:
e: jQuery.Event。
data: data.item 为获得focus的menu项。
示例代码:
默认值: null
类型: Function
参数:
e: jQuery.Event
data: data.item 为失去选择的menu项
示例代码:
默认值: null
类型: Function
参数:
e: event object 用于关联submenu的父节点。
sublist: submenu 元素.
示例代码:
参数:
event: javascript event.
类型: Event
item: 激活的menu 项。
类型: jQuery object
示例代码:
参数:
event: javascript event.
类型: Event
示例代码:
示例代码:
示例代码:
示例代码:
示例代码:
示例代码:
参数:
事件: javascript event..
类型: Event
示例代码:
示例代码:
参数:
optionName:代表设置或获取的option 名称。
类型: String
value:代表设置对象值.
类型: Object.
示例代码:
参数:
options:代表options 值。
类型: Object
示例代码:
参数:
event: javascript event..
类型: Event
示例代码:
示例代码:
示例代码:
示例代码:
参数:
selector: 声明disabled菜单项
类型: jQuery selector
disabled: 设置为true 时菜单项为disabled; 否则,菜单项生效
Type:Boolean
示例代码:
示例代码
$("#h52").bind("click", function () {
$("#content2").toggle(500);
$("#h52").toggleClass("hide show");
});
$("#h53").bind("click", function () {
$("#content3").toggle(500);
$("#h53").toggleClass("show hide");
});
$("#h54").bind("click", function () {
$("#content4").toggle(500);
$("#h54").toggleClass("show hide");
});
});
// ]]>
经过前两篇文章的介绍我们了解了 开源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)
点击查看 APIanimation:
设置 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"); |
相关文章推荐
- 不得不爱开源 Wijmo jQuery 插件集(10)-【Expander】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(7)-【进度条】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(12)-【List】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(7)-【进度条】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(13)-【Tooltip】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(11)-【Spilter】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(14)-【SuperPanel】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(15)-【HTML5-视频播放器】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(4)-【手风琴效果】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(6)-【Popup】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(5)-【对话框】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(9)-【日历】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(8)-【滑动条】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(2)-【准备工作】(附30种Theme演示和源码)
- 不得不爱开源 Wijmo jQuery 插件集【附演示和源码】【开篇】
- 不得不爱开源 Wijmo jQuery 插件集(1)-【开篇】(附演示和源码)
- 转载自--ComponentOne技术服务--不得不爱开源 Wijmo jQuery 插件集
- 跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])
- 跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])