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

各位园子中的朋友大家好。在上一篇文章中我们，给大家介绍了 Wijmo Menu 的特性及使用方法。感谢园子中朋友的支持，这给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Accordion 的特性及使用方法。

Accordion 即为 jQuery 中的手风琴效果。首先让我们看看 Wijmo Accordion 给我们带来了哪些惊喜？

它可以提供多个窗格的内容，并且可以用ComponentOne为ASP.NET Wijmo出品的Accordion?控件在同一时间显示他们。C1Accordion控件支持数据绑定，具备四个扩展方向，含有超过三十个可能的动画，并且具备完全自定义的标题和内容区域的能力。



建立你的第一个 Wijmo jQuery Menu:

1. HTML 标签：
   
2. 
   
3. <div id="accordion">
   
4. 
   
5. <h3>header</h3>
   
6. 
   
7. <div>content</div>
   
8. 
   
9. <h3>header</h3>
   
10. 
    
11. <div>content</div>
    
12. 
    
13. <h3>header</h3>
    
14. 
    
15. <div>content</div>
    
16. 
    
17. </div>
    
18. 
    
19.    jQuery 脚本：
    
20. <script type="text/javascript">
    
21. 
    
22. $(document).ready(function () {
    
23. 
    
24. $("#accordion").wijaccordion();
    
25. 
    
26. });
    
27. 
    
28. </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:

1. 
   
2. jQuery.wijmo.wijaccordion.animations.custom1 = function (options) {
   
3. 
   
4. this.slide(options, {
   
5. 
   
6. easing: options.down ? "easeOutBounce" : "swing",
   
7. 
   
8. duration: options.down ? 1000 : 200
   
9. 
   
10. });
    
11. 
    
12. }
    
13. 
    
14. $("#accordion").wijaccordion({
    
15. 
    
16. expandDirection: "right",
    
17. 
    
18. animated: "custom1"
    
19. 
    
20. });

复制代码

包括如下动画效果：

down：

disabled：

设置目标节点的效果失效。

Type: Boolean

Default: false

Code Example:

1. $(".selector").wijaccordion({ disabled: true });

复制代码

duration：

设置动画效果持续时间（单位 milliseconds）。默认情况下，动画效果持续时间有 animation 项决定。

Type: Number

Default: null

Code Example:

1. $("#accordion").wijaccordion({
   
2. 
   
3.      duration: 1000
   
4. 
   
5. });

复制代码

event

设置触发事件
Type: String
Default: "click"
Code Example:

1. $("#accordion").wijaccordion({
   
2. 
   
3. event: "mouseover"
   
4. 
   
5. });

复制代码

expandDirection

设置伸展方向，可用值有： top, right, bottom, and left.
Type: String
Default: "bottom"
Code Example:

1. $("#element").wijaccordion({ expandDirection: "right"});

复制代码

header

header 选择器。可以将 header/content 元素放置在 <LI> 标签或者其他复杂的 HTML 标签内。
Type: String
Default: "> li > ：first-child,> :not(li):even"
Code Example:

1. $("#element").wijaccordion({ header: "h3"});

复制代码

requireOpenedPane

设置点击其他 header 时，是否关闭当前打开的 pane。
Type: Boolean
Default: true
Code Example:

1. $("#element").wijaccordion({ requireOpenedPane: false});

复制代码

selectedIndex

获取或设置当前展开的 pane 索引。
Type: Number
Default: 0
Code Example:

1. $("#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:

1. //Supply a callback function to handle the beforeSelectedIndexChanged event as an option.
   
2. 
   
3. $("#accordion").wijaccordion({
   
4. 
   
5. beforeSelectedIndexChanged: function (e, args) {
   
6. 
   
7. alert(args.prevIndex + "->" + args.newIndex);   
   
8. 
   
9. ...
   
10. 
    
11. }});
    
12. 
    
13. //Bind to the event by type: wijaccordionbeforeselectedindexchanged.
    
14. 
    
15. $( "#accordion" ).bind( "wijaccordionbeforeselectedindexchanged", function(e, args) {
    
16. 
    
17. alert(args.prevIndex + "->" + args.newIndex);
    
18. 
    
19. ...
    
20. 
    
21. });

复制代码

selectedIndexChanged

selectedIndexChanged(e, args)
在活跃 pane 更改后触发。
Type: Function
Event type: wijaccordionselectedindexchanged
Parameters:
e: jQuery.Event 对象。
args.newIndex: 活跃 pane 的索引。
args.prevIndex: 被关闭 pane 的索引。
Code Example:

1. $("#accordion").wijaccordion({
   
2. 
   
3. selectedIndexChanged: function (e, args) {
   
4. 
   
5. alert(args.prevIndex + "->" + args.newIndex);
   
6. 
   
7. ...
   
8. 
   
9. }});
   
10. 
    
11. 
    
12. 
    
13. //Bind to the event by type: wijaccordionselectedindexchanged.
    
14. 
    
15. $( "#accordion" ).bind( "wijaccordionselectedindexchanged", function(e, args) {
    
16. 
    
17. alert(args.prevIndex + "->" + args.newIndex);
    
18. 
    
19. ...
    
20. 
    
21. });

复制代码

Methods

Activate(index)

设置活跃 pane。
Parameters:
index: 活跃 pane 的索引。

示例下载：