這里的例子使用 jQuery UI 1.8.6

示例效果可以看 jQuery 網站中的例子。

手風琴效果將多個內容組織到多個邏輯組中，通過選擇組的標題可以展開或者收縮組中的內容，使用效果很像 Tab，作為備選，還可以通過將鼠標放置到標題上來展開或者收縮。

使用這個組件需要引用 jQuery 腳本庫，core, widget, accordion 腳本庫。

<script src="scripts/jquery-1.6.2.js"></script>
<script src="scripts/jquery.ui.core.js"></script>
<script src="scripts/jquery.ui.widget.js"></script>
<script src="scripts/jquery.ui.accordion.js"></script>

當然，還需要使用一些樣式，這里使用默認的 jquery 樣式。

<link rel="stylesheet" href="/themes/base/jquery.ui.all.css">

默認情況下，需要使用一個容器將手風琴的內容包裝起來。每一個邏輯組使用一個 h3 元素作為標題，這個元素的后面緊跟著組的內容，內容使用 div 元素。

<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

最后，在 jQuery 的 ready 事件中初始化手風琴。

<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>

效果如下所示

在初始化的時候，還可以設置手風琴的屬性。

active, 用來指定/獲取默認激活的邏輯組，默認為 0。

可以設置為 boolean 類型，如果設置為 false, 那么，默認沒有打開邏輯組。

也可以為 number 類型，默認為 0。指定默認打開的邏輯組。

animated, 默認的動畫效果，默認為 slide。

autoHeight, 如果設置為真，那么，每個組的高度都回被設置為最高的組的高度。默認為 true. 否則，以各組實際的高度為準。

collapsible, 是否所有的邏輯組都可以收縮，默認為 false.

event, 展開/收縮使用的事件，默認為 click, 還可以使用 mouseover，當鼠標覆蓋在標題上的時候進行收縮和展開。

fillSpace, 是否填充父元素，默認為 false. 設置后將會覆蓋 autoHeight 的設置。

header, 默認的父元素為 h3, 如果不是的話，可以配置這個選擇器。

icons,標題上使用的圖標，默認為：

{ 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }

總結

以上是生活随笔為你收集整理的jQuery UI - Accordion 手风琴组件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。