園子中的朋友大家好。在上一篇文章中我們，給大家介紹了 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>
jQuery 腳本： <script type="text/javascript">
$(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
- Type: String
- Default: "slide"
- 示例代碼:
// 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
- header 選擇器。可以將 header/content 元素放置在 <LI> 標簽或者其他復雜的 HTML 標簽內。
- Type: String
- Default: "> li > :first-child,> :not(li):even"
- 示例代碼:
$("#element").wijaccordion({ header: "h3"});
requireOpenedPane
- 設置點擊其他 header 時，是否關閉當前打開的 pane。
- Type: Boolean
- Default: true
- 示例代碼:
$("#element").wijaccordion({ requireOpenedPane: false});
selectedIndex
- 獲取或設置當前展開的 pane 索引。
- Type: Number
- Default: 0
- 示例代碼:
$("#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 的索引。 示例代碼:
//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 的索引。
- 示例代碼:
$("#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 的索引。