不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
園子中的朋友大家好。在上一篇文章中我們，給大家介紹了 Wijmo Menu 的特性及使用方法。感謝園子中朋友的支持，朋友們的支持給我們寫這一系列文章提供了很大的動力。在這篇文章中我們將介紹 Accordion 的特性及使用方法。?Accordion 即為 jQuery 中的手風琴效果。
有些朋友第一次看到本系列文章，所以給出本系列文章的鏈接：
- 不得不愛開源 Wijmo jQuery 插件集（1）-【開篇】(附演示和源碼)
- 不得不愛開源 Wijmo jQuery 插件集（2）-【準備工作】(附30種Theme演示和源碼)
- 不得不愛開源 Wijmo jQuery 插件集（3）-【Menu】(附頁面展示和源碼)
首先讓我們看看 Wijmo Accordion 給我們帶來了哪些驚喜？
它可以提供多個窗格的內容，并且可以用ComponentOne為ASP.NET Wijmo出品的Accordion?控件在同一時間顯示他們。C1Accordion控件支持數據綁定，具備四個擴展方向，含有超過三十個可能的動畫，并且具備完全自定義的標題和內容區域的能力。
?
建立你的第一個 Wijmo jQuery Accordion:
點擊查看源碼
HTML 標簽：<div id="accordion">
<h3>手風琴樣式</h3>
<div>內容</div>
<h3>手風琴樣式</h3>
<div>內容</div>
<h3>手風琴樣式</h3>
<div>內容</div>
</div>
$(document).ready(function () { $("#accordion").wijaccordion(); });
</script>
效果預覽
點擊查看效果預覽
?
特性
多個窗格
為了在一個窗格中一次顯示你的全部信息，可以添加多個窗格和風琴褶。
?
外部內容
你可以在風琴褶窗格或可視區域顯示外部的內容，包括你的項目中另一個網頁的內容，或者甚至是你的項目之外的網站的內容。
?
四個擴展方向
風琴褶控件能夠在幾個不同的方向上擴展：上方，右側，底部，左側。
?
動畫
風琴褶含有內置的動畫選項。它可以自定義如何將動畫效果轉換為風琴褶。
?
鍵盤支持
通過添加鍵盤的輔助功能支持，用指定的組合鍵來給C1Accordion控件一個重點。這使最終用戶可以使用鍵盤上的箭頭鍵來瀏覽C1AccordionPanes。
主題
只需點擊一下智能標簽SmartTag，就可以通過從六個溢價主題（北極，午夜時分，雅集，火箭，鈷和英鎊）中選擇一個來改變風琴褶控件的外觀。另外，還可以使用jQuery UI中的ThemeRoller來創建一個自定義的主題！
?
CSS支持
你可以使用這一種級聯樣式表（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
?
wimaccordion API 介紹：(點擊隱藏 API)
點擊查看 API
animated
設置伸展的動畫效果。設置為 false 時關閉動畫效果。
可設置的選項有:
- down
- horizontal
- rightToLeft
- toShow
- toHide
// 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"
});
?
disabled：
設置目標節點的效果失效。
Type: Boolean
Default: false
示例代碼:
$(".selector").wijaccordion({ disabled: true });
?
duration：
設置動畫效果持續時間（單位 milliseconds）。默認情況下，動畫效果持續時間有 animation 項決定。
Type: Number
Default: null
示例代碼:
$("#accordion").wijaccordion({
???? duration: 1000
});
event
設置觸發事件
Type: String
Default: "click"
示例代碼:
$("#accordion").wijaccordion({
event: "mouseover"
});
expandDirection
設置伸展方向，可用值有： top, right, bottom, and left.
Type: String
Default: "bottom"
示例代碼:
$("#element").wijaccordion({ expandDirection: "right"});
header
$("#element").wijaccordion({ header: "h3"});
requireOpenedPane
$("#element").wijaccordion({ requireOpenedPane: false});
selectedIndex
$("#element").wijaccordion({ selectedIndex: 5 });
Events
beforeSelectedIndexChanged
//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
$("#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)
轉載于:https://www.cnblogs.com/C1SupportTeam/archive/2012/09/24/2699864.html
總結
以上是生活随笔為你收集整理的不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分享一些国外推广的站点
- 下一篇： 根据上排给出十个数，在其下排填出对应的十