园子中的朋友大家好。在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法。感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Accordion 的特性及使用方法。 Accordion 即为 jQuery 中的手风琴效果。
有些朋友第一次看到本系列文章,所以给出本系列文章的链接:
首先让我们看看 Wijmo Accordion 给我们带来了哪些惊喜?
它可以提供多个窗格的内容,并且可以用ComponentOne为ASP.NET Wijmo出品的Accordion™控件在同一时间显示他们。C1Accordion控件支持数据绑定,具备四个扩展方向,含有超过三十个可能的动画,并且具备完全自定义的标题和内容区域的能力。
HTML 标签:
<div id="accordion">
<h3>手风琴样式</h3>
<div>内容</div>
<h3>手风琴样式</h3>
<div>内容</div>
<h3>手风琴样式</h3>
<div>内容</div>
</div>
jQuery 脚本: <script type="text/javascript">
$(document).ready(function () { $("#accordion").wijaccordion(); });
</script>
为了在一个窗格中一次显示你的全部信息,可以添加多个窗格和风琴褶。
你可以在风琴褶窗格或可视区域显示外部的内容,包括你的项目中另一个网页的内容,或者甚至是你的项目之外的网站的内容。
风琴褶控件能够在几个不同的方向上扩展:上方,右侧,底部,左侧。
风琴褶含有内置的动画选项。它可以自定义如何将动画效果转换为风琴褶。
通过添加键盘的辅助功能支持,用指定的组合键来给C1Accordion控件一个重点。这使最终用户可以使用键盘上的箭头键来浏览C1AccordionPanes。
只需点击一下智能标签SmartTag,就可以通过从六个溢价主题(北极,午夜时分,雅集,火箭,钴和英镑)中选择一个来改变风琴褶控件的外观。另外,还可以使用jQuery UI中的ThemeRoller来创建一个自定义的主题!
你可以使用这一种级联样式表(CSS)的样式来定义自定义皮肤。有了CSS支持,你可以使风琴褶与你的组织标准相匹配。
感谢大家阅读本文章,在下一篇文章中我们将介绍 Wijmo jQuery Dialog-对话框 的使用方法。
1.源码下载(包含以上特性):Wijmo-Accordion.zip
2.更多信息请参考:Wijmo 中文网站:http://www.gcpowertools.com.cn/products/c1_asp_overview.htm
3.开源Wijmo jQuery 讨论社区: http://gcdn.grapecity.com/index.aspx
设置伸展的动画效果。设置为 false 时关闭动画效果。
可设置的选项有:
// Create your own animation:
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"
});
设置目标节点的效果失效。
Type: Boolean
Default: false
示例代码:
$(
".selector"
).wijaccordion({ disabled:
true
});
设置动画效果持续时间(单位 milliseconds)。默认情况下,动画效果持续时间有 animation 项决定。
Type: Number
Default: null
示例代码:
$(
"#accordion"
).wijaccordion({
duration: 1000
});
设置触发事件
Type: String
Default: "click"
示例代码:
$(
"#accordion"
).wijaccordion({
event:
"mouseover"
});
设置伸展方向,可用值有: top, right, bottom, and left.
Type: String
Default: "bottom"
示例代码:
$(
"#element"
).wijaccordion({ expandDirection:
"right"
});
$(
"#element"
).wijaccordion({ header:
"h3"
});
$(
"#element"
).wijaccordion({ requireOpenedPane:
false
});
$(
"#element"
).wijaccordion({ selectedIndex: 5 });
//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);
...
});
$(
"#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);
...
});