jQuery UI API - 折疊面板部件（Accordion Widget）

所屬類別

小部件（Widgets）

用法

描述：把一對標(biāo)題和內(nèi)容面板轉(zhuǎn)換成折疊面板。

版本新增：1.0

折疊面板容器的標(biāo)記需要一對標(biāo)題和內(nèi)容面板。

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

折疊面板支持任意標(biāo)記，但是每個(gè)內(nèi)容面板必須是與其相關(guān)的頭部面板的下一個(gè)同級(jí)。請查看 header 選項(xiàng)了解如何使用自定義的標(biāo)記結(jié)構(gòu)。

面板可以通過設(shè)置 active 選項(xiàng)以編程的方式激活。

鍵盤交互

當(dāng)焦點(diǎn)在標(biāo)題（header）上時(shí)，下面的鍵盤命令可用：

  • UP/LEFT - 移動(dòng)焦點(diǎn)到上一個(gè)標(biāo)題（header）。如果在第一個(gè)標(biāo)題（header）上，則移動(dòng)焦點(diǎn)到最后一個(gè)標(biāo)題（header）上。
  • DOWN/RIGHT - 移動(dòng)焦點(diǎn)到下一個(gè)標(biāo)題（header）。如果在最后一個(gè)標(biāo)題（header）上，則移動(dòng)焦點(diǎn)到第一個(gè)標(biāo)題（header）上。
  • HOME - 移動(dòng)焦點(diǎn)到第一個(gè)標(biāo)題（header）上。
  • END - 移動(dòng)焦點(diǎn)到最后一個(gè)標(biāo)題（header）上。
  • SPACE/ENTER - 激活與獲得焦點(diǎn)的標(biāo)題（header）相關(guān)的面板（panel）。

當(dāng)焦點(diǎn)在面板（panel）中時(shí)，下面的鍵盤命令可用：

  • CTRL+UP：移動(dòng)焦點(diǎn)到相關(guān)的標(biāo)題（header）。

主題化

折疊面板部件（Accordion Widget）使用 jQuery UI CSS 框架 來定義它的外觀和感觀的樣式。如果需要使用折疊面板指定的樣式，則可以使用下面的 CSS class 名稱：

  • ui-accordion：折疊面板的外層容器。
    • ui-accordion-header：折疊面板的標(biāo)題。如果標(biāo)題包含 icons，則標(biāo)題會(huì)另外有個(gè) ui-accordion-icons class。
    • ui-accordion-content：折疊面板的內(nèi)容面板。

依賴

附加說明

  • 該部件要求一些功能性的 CSS，否則將無法工作。如果您創(chuàng)建了一個(gè)自定義的主題，請使用小部件指定的 CSS 文件作為起點(diǎn)。

快速導(dǎo)航

選項(xiàng) 方法 事件

選項(xiàng) 類型 描述 默認(rèn)值
active Boolean 或 Integer 當(dāng)前打開哪一個(gè)面板。

支持多個(gè)類型：

  • Boolean：設(shè)置 active 為 false 將折疊所有的面板。這要求 collapsible 選項(xiàng)必須為 true。
  • Integer：激活打開的面板索引，以零為基礎(chǔ)。負(fù)值則表示從最后一個(gè)面板后退選擇面板。

代碼實(shí)例：

初始化帶有指定 active 選項(xiàng)的 accordion：

$( ".selector" ).accordion({ active: 2 });

在初始化后，獲取或設(shè)置 active 選項(xiàng)：

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );
0
animate Boolean 或 Number 或 String 或 Object 是否使用動(dòng)畫改變面板，且如何使用動(dòng)畫改變面板。

支持多個(gè)類型：

  • Boolean：false 值將禁用動(dòng)畫。
  • Number：easing 默認(rèn)的持續(xù)時(shí)間，以毫秒計(jì)。
  • String：默認(rèn)的持續(xù)時(shí)間要使用的 easing 名稱。
  • Object：easing 和 duration 屬性的動(dòng)畫設(shè)置。
    • 上面任意的選項(xiàng)都可以包含 down 屬性。
    • 當(dāng)被激活的面板有一個(gè)比當(dāng)前激活面板較低的指數(shù)時(shí)，發(fā)生 "Down" 動(dòng)畫。

代碼實(shí)例：

初始化帶有指定 animate 選項(xiàng)的 accordion：

$( ".selector" ).accordion({ animate: "bounceslide" });

在初始化后，獲取或設(shè)置 animate 選項(xiàng)：

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
{}
collapsible Boolean 所有部分是否都可以馬上關(guān)閉。允許折疊激活的部分。

代碼實(shí)例：

初始化帶有指定 collapsible 選項(xiàng)的 accordion：

$( ".selector" ).accordion({ collapsible: true });

在初始化后，獲取或設(shè)置 collapsible 選項(xiàng)：

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
false
disabled Boolean 如果設(shè)置為 true，則禁用該 accordion。

代碼實(shí)例：

初始化帶有指定 disabled 選項(xiàng)的 accordion：

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

在初始化后，獲取或設(shè)置 disabled 選項(xiàng)：

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );
false
event String accordion 頭部會(huì)作出反應(yīng)的事件，用以激活相關(guān)的面板。可以指定多個(gè)事件，用空格間隔。

代碼實(shí)例：

初始化帶有指定 event 選項(xiàng)的 accordion：

$( ".selector" ).accordion({ event: "mouseover" });

在初始化后，獲取或設(shè)置 event 選項(xiàng)：

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
"click"
header Selector 標(biāo)題元素的選擇器，通過主要 accordion 元素上的 .find() 進(jìn)行應(yīng)用。內(nèi)容面板必須是緊跟在與其相關(guān)的標(biāo)題后的同級(jí)元素。

代碼實(shí)例：

初始化帶有指定 header 選項(xiàng)的 accordion：

$( ".selector" ).accordion({ header: "h3" });

在初始化后，獲取或設(shè)置 header 選項(xiàng)：

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );
"> li > :first-child,> :not(li):even"
heightStyle String 控制 accordion 和每個(gè)面板的高度?？赡艿闹担?br />
  • "auto"：所有的面板將會(huì)被設(shè)置為最高的面板的高度。
  • "fill"：基于 accordion 的父元素的高度，擴(kuò)展到可用的高度。
  • "content"：每個(gè)面板的高度取決于它的內(nèi)容。

代碼實(shí)例：

初始化帶有指定 heightStyle 選項(xiàng)的 accordion：

$( ".selector" ).accordion({ heightStyle: "fill" });

在初始化后，獲取或設(shè)置 heightStyle 選項(xiàng)：

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );
"auto"
icons Object 標(biāo)題要使用的圖標(biāo)，與 jQuery UI CSS 框架提供的圖標(biāo)（Icons） 匹配。設(shè)置為 false 則不顯示圖標(biāo)。
  • header （string，默認(rèn)值："ui-icon-triangle-1-e"）
  • activeHeader （string，默認(rèn)值："ui-icon-triangle-1-s"）

代碼實(shí)例：

初始化帶有指定 icons 選項(xiàng)的 accordion：

$( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } });

在初始化后，獲取或設(shè)置 icons 選項(xiàng)：

// getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 accordion 功能。這會(huì)把元素返回到它的預(yù)初始化狀態(tài)。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 destroy 方法：

$( ".selector" ).accordion( "destroy" );
disable() jQuery (plugin only) 禁用 accordion。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 disable 方法：

$( ".selector" ).accordion( "disable" );
enable() jQuery (plugin only) 啟用 accordion。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 enable 方法：

$( ".selector" ).accordion( "enable" );
option( optionName ) Object 獲取當(dāng)前與指定的 optionName 關(guān)聯(lián)的值。
  • optionName
    類型：String
    描述：要獲取的選項(xiàng)的名稱。

代碼實(shí)例：

調(diào)用該方法：

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
option() PlainObject 獲取一個(gè)包含鍵/值對的對象，鍵/值對表示當(dāng)前 accordion 選項(xiàng)哈希。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用該方法：

var options = $( ".selector" ).accordion( "option" );
option( optionName, value ) jQuery (plugin only) 設(shè)置與指定的 optionName 關(guān)聯(lián)的 accordion 選項(xiàng)的值。
  • optionName
    類型：String
    描述：要設(shè)置的選項(xiàng)的名稱。
  • value
    類型：Object
    描述：要為選項(xiàng)設(shè)置的值。

代碼實(shí)例：

調(diào)用該方法：

$( ".selector" ).accordion( "option", "disabled", true );
option( options ) jQuery (plugin only) 為 accordion 設(shè)置一個(gè)或多個(gè)選項(xiàng)。
  • options
    類型：Object
    描述：要設(shè)置的 option-value 對。

代碼實(shí)例：

調(diào)用該方法：

$( ".selector" ).accordion( "option", { disabled: true } );
refresh() jQuery (plugin only) 處理任何在 DOM 中直接添加或移除的標(biāo)題和面板，并重新計(jì)算 accordion 的高度。結(jié)果取決于內(nèi)容和 heightStyle 選項(xiàng)。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 refresh 方法：

$( ".selector" ).accordion( "refresh" );
widget() jQuery 返回一個(gè)包含 accordion 的 jQuery 對象。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 widget 方法：

var widget = $( ".selector" ).accordion( "widget" );

事件 類型 描述
activate( event, ui ) accordionactivate 面板被激活后觸發(fā)（在動(dòng)畫完成之后）。如果 accordion 之前是折疊的，則 ui.oldHeader 和 ui.oldPanel 將是空的 jQuery 對象。如果 accordion 正在折疊，則 ui.newHeader 和 ui.newPanel 將是空的 jQuery 對象。

注意：由于 activate 事件只有在面板激活時(shí)才能觸發(fā)，當(dāng)創(chuàng)建 accordion 部件時(shí)，最初的面板不會(huì)觸發(fā)該事件。如果您需要一個(gè)用于部件創(chuàng)建的鉤，請使用 create 事件。

  • event
    類型：Event
  • ui
    類型：Object
    • newHeader
      類型：jQuery
      描述：剛被激活的標(biāo)題。
    • oldHeader
      類型：jQuery
      描述：剛被取消激活的標(biāo)題。
    • newPanel
      類型：jQuery
      描述：剛被激活的面板。
    • oldPanel
      類型：jQuery
      描述：剛被取消激活的面板。

代碼實(shí)例：

初始化帶有指定 activate 回調(diào)的 accordion：

$( ".selector" ).accordion({
  activate: function( event, ui ) {}
});

綁定一個(gè)事件監(jiān)聽器到 accordionactivate 事件：

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );
beforeActivate( event, ui ) accordionbeforeactivate 面板被激活前直接觸發(fā)。可以取消以防止面板被激活。如果 accordion 當(dāng)前是折疊的，則 ui.oldHeader 和 ui.oldPanel 將是空的 jQuery 對象。如果 accordion 正在折疊，則 ui.newHeader 和 ui.newPanel 將是空的 jQuery 對象。
  • event
    類型：Event
  • ui
    類型：Object
    • newHeader
      類型：jQuery
      描述：將被激活的標(biāo)題。
    • oldHeader
      類型：jQuery
      描述：將被取消激活的標(biāo)題。
    • newPanel
      類型：jQuery
      描述：將被激活的面板。
    • oldPanel
      類型：jQuery
      描述：將被取消激活的面板。

代碼實(shí)例：

初始化帶有指定 beforeActivate 回調(diào)的 accordion：

$( ".selector" ).accordion({
  beforeActivate: function( event, ui ) {}
});

綁定一個(gè)事件監(jiān)聽器到 accordionbeforeactivate 事件：

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );
create( event, ui ) accordioncreate 當(dāng)創(chuàng)建 accordion 時(shí)觸發(fā)。如果 accordion 是折疊的，ui.header 和 ui.panel 將是空的 jQuery 對象。
  • event
    類型：Event
  • ui
    類型：Object
    • header
      類型：jQuery
      描述：激活的標(biāo)題。
    • panel
      類型：jQuery
      描述：激活的面板。

代碼實(shí)例：

初始化帶有指定 create 回調(diào)的 accordion：

$( ".selector" ).accordion({
  create: function( event, ui ) {}
});

綁定一個(gè)事件監(jiān)聽器到 accordioncreate 事件：

$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );

實(shí)例

一個(gè)簡單的 jQuery UI 折疊面板（Accordion）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>折疊面板部件（Accordion Widget）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
</head>
<body>
 
<div id="accordion">
  <h3>部分 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3>部分 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>部分 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

查看演示