当前位置:主页 > JavsScript库 > 菜单 / 导航 >

手风琴组件 - Accordion.js
栏目分类:菜单 / 导航   发布日期:2021-08-28   浏览次数:

一个完全可访问且动画流畅的手风琴组件,可使用 CSS3 转换展开和折叠手风琴面板。

该插件会按照WAI-ARIA 实践自动向手风琴添加可访问性属性。

如何使用它:

1. 安装和下载。

# NPM
$ npm install vanilla-js-accordion --save

2. 将 Accordion.js 导入到文档中。

<link rel="stylesheet" href="accordion.css" />
<script src="accordion.js"></script>

3. 为您的第一个手风琴构建 HTML。

<div class="Accordion Example">
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">标题 1</div>
    <div class="panel">
      Panel 1
    </div>
  </div>
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">标题 2</div>
    <div class="panel">
      Panel 2
    </div>
  </div>
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">标题 3</div>
    <div class="panel">
      Panel 3
    </div>
  </div>
</div>

4. 使用默认选项初始化手风琴。

var accordion = new Accordion('.Example');

5. 生成的 HTML 标记应该是这样的:

<div class="Accordion Example" role="tablist" aria-multiselectable="true">
  <div class="item" data-status="expanded">
    <div class="target" role="tab" aria-expanded="true" tabindex="0" id="Accordion-1-1">标题 1</div>
    <div class="panel" role="tabpanel" aria-hidden="false" aria-labelledby="Accordion-1-1">
      Panel 1
    </div>
  </div>
  <div class="item" data-status="contracted">
    <div class="target" role="tab" aria-expanded="false" tabindex="0" id="Accordion-1-2">标题 2</div>
    <div class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="Accordion-1-2">
      Panel 2
    </div>
  </div>
  <div class="item" data-status="contracted">
    <div class="target" role="tab" aria-expanded="false" tabindex="0" id="Accordion-1-3">标题 3</div>
    <div class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="Accordion-1-3">
      Panel 3
    </div>
  </div>
</div>

6. 覆盖默认设置以自定义手风琴。

var accordion = new Accordion('.Example',{
 
    // 默认选择器
    item: '.item',
    target: '.target',
    control: '.target',
    panel: '.panel',
 
    // 允许多个面板一次打开
    allowMultiple: true,
 
    // 默认属性
    attribute: 'data-status',
 
    // 默认值 data-status 属性
    expanded: 'expanded',
    contracted: 'contracted',
 
    // CSS 前缀
    prefix: 'Accordion-',
 
    // 在此处配置 CSS 转换
    transition: 'height .3s',
 
    // 自动将焦点设置为手风琴
    // none, item, panel, target, control, first
    setFocus: 'none',
 
    // 启用 URL 哈希
    hashEnabled: true
 
});

7. API 方法。

// 切换手风琴面板
accordion.activate(index);
 
// 展开一个手风琴面板
accordion.expand(index);
 
// 折叠一个手风琴面板
accordion.contract(index);
 
// 折叠所有手风琴面板
accordion.contractAll(index);
 
// 销毁手风琴实例
accordion.destroy();


官方网站:https://github.com/TheC2Group/vanilla-js-accordion

相关热词: Accordion.js手风琴

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库