06 Jquery UI Accodion 可折叠面板插件

Posted 2021-01-02 工作在浏览器上人-YangBobin

把一对标题和内容面板转换成折叠面板。

一、实例

一个简单的 jQuery UI 折叠面板（Accordion）。

代码

<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>
  

查看演示

折叠面板容器的标记需要一对标题和内容面板。

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

折叠面板支持任意标记，但是每个内容面板必须是与其相关的头部面板的下一个同级。请查看 header 选项了解如何使用自定义的标记结构。

面板可以通过设置 active 选项以编程的方式激活。

二、键盘交互

当焦点在标题（header）上时，下面的键盘命令可用：

• UP/LEFT - 移动焦点到上一个标题（header）。如果在第一个标题（header）上，则移动焦点到最后一个标题（header）上。
• DOWN/RIGHT - 移动焦点到下一个标题（header）。如果在最后一个标题（header）上，则移动焦点到第一个标题（header）上。
• HOME - 移动焦点到第一个标题（header）上。
• END - 移动焦点到最后一个标题（header）上。
• SPACE/ENTER - 激活与获得焦点的标题（header）相关的面板（panel）。

当焦点在面板（panel）中时，下面的键盘命令可用：

• CTRL+UP：移动焦点到相关的标题（header）。

三、主题化

折叠面板部件（Accordion Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式，则可以使用下面的 CSS class 名称：

• ui-accordion：折叠面板的外层容器。
• ui-accordion-header：折叠面板的标题。如果标题包含 icons，则标题会另外有个 ui-accordion-icons class。
• ui-accordion-content：折叠面板的内容面板。

四、快速导航

1、选项

• active：当前打开哪一个面板。
• animate：是否使用动画改变面板，且如何使用动画改变面板。
• collapsible：所有部分是否都可以马上关闭。允许折叠激活的部分。
• disabled：如果设置为 true，则禁用该 accordion。
• event：accordion 头部会作出反应的事件，用以激活相关的面板。可以指定多个事件，用空格间隔。
• header：标题元素的选择器，通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。
• heightStyle：控制 accordion 和每个面板的高度。可能的值：
• "auto"：所有的面板将会被设置为最高的面板的高度。
• "fill"：基于 accordion 的父元素的高度，扩展到可用的高度。
• "content"：每个面板的高度取决于它的内容。
• icons：标题要使用的图标，与 jQuery UI CSS 框架提供的图标（Icons） 匹配。设置为 false 则不显示图标。
• header （string，默认值："ui-icon-triangle-1-e"）
• activeHeader （string，默认值："ui-icon-triangle-1-s"）

2、方法

• destroy()：完全移除 accordion 功能。这会把元素返回到它的预初始化状态。
• disable()：禁用 accordion。
• enable()：启用 accordion。
• option()：获取当前与指定的 optionName 关联的值。
• refresh()：处理任何在 DOM 中直接添加或移除的标题和面板，并重新计算 accordion 的高度。结果取决于内容和 heightStyle 选项。
• widget()：返回一个包含 accordion 的 jQuery 对象。

3、事件

• activate( event, ui )：面板被激活后触发（在动画完成之后）。如果 accordion 之前是折叠的，则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠，则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。
• beforeActivate( event, ui )：面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的，则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠，则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。
• create( event, ui )：当创建 accordion 时触发。如果 accordion 是折叠的，ui.header 和 ui.panel 将是空的 jQuery 对象。

4、事件参数ui:类型：Object

• newHeader:类型：jQuery
  描述：刚被激活的标题。
• oldHeader:类型：jQuery
  描述：刚被取消激活的标题。
• newPanel:类型：jQuery
  描述：刚被激活的面板。
• oldPanel:类型：jQuery
  描述：刚被取消激活的面板。