各位园子中的朋友大家好。在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法。感谢园子中朋友的支持,这给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Accordion 的特性及使用方法。
Accordion 即为 jQuery 中的手风琴效果。首先让我们看看 Wijmo Accordion 给我们带来了哪些惊喜?
它可以提供多个窗格的内容,并且可以用ComponentOne为ASP.NET Wijmo出品的Accordion™控件在同一时间显示他们。C1Accordion控件支持数据绑定,具备四个扩展方向,含有超过三十个可能的动画,并且具备完全自定义的标题和内容区域的能力。
建立你的第一个 Wijmo jQuery Menu:
HTML 标签: <div id="accordion"> <h3>header</h3> <div>content</div> <h3>header</h3> <div>content</div> <h3>header</h3> <div>content</div> </div> jQuery 脚本: <script type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion(); }); </script> 复制代码
支持
通过添加键盘的辅助功能支持,用指定的组合键来给C1Accordion控件一个重点。这使最终用户可以使用键盘上的箭头键来浏览C1AccordionPanes。
主题
只需点击一下智能标签SmartTag,就可以通过从六个溢价主题(北极,午夜时分,雅集,火箭,钴和英镑)中选择一个来改变风琴褶控件的外观。另外,还可以使用jQuery UI中的ThemeRoller来创建一个自定义的主题!
CSS支持
你可以使用这一种级联样式表(CSS)的样式来定义自定义皮肤。有了CSS支持,你可以使风琴褶与你的组织标准相匹配。
wimaccordion API 介绍:(点击隐藏 API)
animated
设置伸展的动画效果。设置为 false 时关闭动画效果。
可设置的选项有:
down
horizontal
rightToLeft
toShow
toHide
Type: String
Default: "slide"
Code Example:
jQuery.wijmo.wijaccordion.animations.custom1 = function (options) { this.slide(options, { easing: options.down ? "easeOutBounce" : "swing", duration: options.down ? 1000 : 200 }); } $("#accordion").wijaccordion({ expandDirection: "right", animated: "custom1" }); 复制代码
包括如下动画效果:
down:
disabled:
设置目标节点的效果失效。
Type: Boolean
Default: false
Code Example:
$(".selector").wijaccordion({ disabled: true }); 复制代码
duration:
设置动画效果持续时间(单位 milliseconds)。默认情况下,动画效果持续时间有 animation 项决定。
Type: Number
Default: null
Code Example:
$("#accordion").wijaccordion({ duration: 1000 }); 复制代码
event
设置触发事件
Type: String
Default: "click"
Code Example:
$("#accordion").wijaccordion({ event: "mouseover" }); 复制代码
expandDirection
设置伸展方向,可用值有: top, right, bottom, and left.
Type: String
Default: "bottom"
Code Example:
$("#element").wijaccordion({ expandDirection: "right"}); 复制代码
复杂的 HTML 标签内。
Type: String
Default: "> li > :first-child,> :not(li):even"
Code Example:
$("#element").wijaccordion({ header: "h3"}); 复制代码
requireOpenedPane
设置点击其他 header 时,是否关闭当前打开的 pane。
Type: Boolean
Default: true
Code Example:
$("#element").wijaccordion({ requireOpenedPane: false}); 复制代码
selectedIndex
获取或设置当前展开的 pane 索引。
Type: Number
Default: 0
Code Example:
$("#element").wijaccordion({ selectedIndex: 5 }); 复制代码
Events
beforeSelectedIndexChanged
beforeSelectedIndexChanged(e, args)
在活跃 pane 变化前触发。返回 false 或调用 event.preventDefault() 来阻止活跃 pane 变化。
Type: Function
Event type: wijaccordionbeforeselectedindexchanged
Parameters:
e: jQuery.Event 对象。
args.newIndex: 即将被设置为活跃 pane 的索引。
args.prevIndex: 即将被关闭 pane 的索引。
Code Example:
//Supply a callback function to handle the beforeSelectedIndexChanged event as an option. $("#accordion").wijaccordion({ beforeSelectedIndexChanged: function (e, args) { alert(args.prevIndex + "->" + args.newIndex); ... }}); //Bind to the event by type: wijaccordionbeforeselectedindexchanged. $( "#accordion" ).bind( "wijaccordionbeforeselectedindexchanged", function(e, args) { alert(args.prevIndex + "->" + args.newIndex); ... }); 复制代码
selectedIndexChanged
selectedIndexChanged(e, args)
在活跃 pane 更改后触发。
Type: Function
Event type: wijaccordionselectedindexchanged
Parameters:
e: jQuery.Event 对象。
args.newIndex: 活跃 pane 的索引。
args.prevIndex: 被关闭 pane 的索引。
Code Example:
$("#accordion").wijaccordion({ selectedIndexChanged: function (e, args) { alert(args.prevIndex + "->" + args.newIndex); ... }}); //Bind to the event by type: wijaccordionselectedindexchanged. $( "#accordion" ).bind( "wijaccordionselectedindexchanged", function(e, args) { alert(args.prevIndex + "->" + args.newIndex); ... }); 复制代码
Methods
Activate(index)
设置活跃 pane。
Parameters:
index: 活跃 pane 的索引。
示例下载: