响应式折叠式选项卡

JavaScript

在 6.3.0 版本中添加，使用折叠面板或选项卡组件的标记创建响应式折叠式选项卡。

基础知识

可以使用折叠面板标记或选项卡标记在不同的断点处响应式地在两个组件之间切换。

折叠面板应该指定一个 ID，但如果省略 ID，插件将自动生成一个 ID。

折叠面板内容也应该有一个 ID，或者应该指定 href 的 #，否则将生成一个随机 ID

折叠面板/选项卡的值可以按任意顺序排列。

折叠面板 HTML 标记

在视频中观看此部分

<ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      I would start in the open state, due to using the `is-active` state class.
    </div>
  </li>
  <!-- ... -->
</ul>

将所有内容放在一起后，您将获得以下内容！
缩小浏览器窗口大小即可看到切换效果。
我在“小尺寸和大尺寸下是折叠面板”，但在“中等尺寸下是选项卡”

折叠面板 1

面板 1。Lorem ipsum dolor
无处可去
折叠面板 2
折叠面板 3
选择日期！

选项卡 HTML 标记

在视频中观看此部分

<ul class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs" id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
  <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
  <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>one</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>two</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
  </div>
  <div class="tabs-panel" id="panel3">
    <p>three</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel4">
    <p>four</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
  </div>
  <div class="tabs-panel" id="panel5">
    <p>five</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel6">
    <p>six</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
  </div>
</div>

将所有内容放在一起后，您将获得以下内容！
缩小浏览器窗口大小即可看到切换效果。
我在“小尺寸和大尺寸下是选项卡”，在“中等尺寸下是折叠面板”

选项卡 1
选项卡 2
选项卡 3
选项卡 4
选项卡 5
选项卡 6

一

看看我！我是一个带有文本内容的超酷选项卡面板！

二

三

看看我！我是一个带有文本内容的超酷选项卡面板！

四

五

看看我！我是一个带有文本内容的超酷选项卡面板！

六

可以通过“data-responsive-accordion-tabs”选项设置响应式行为。
`tabs|accordion`、`medium-tabs|accordion`、`large-tabs|accordion` 设置行为

插件选项

插件选项可以设置为单独的 data 属性、一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。了解有关如何初始化 JavaScript 插件的更多信息。

可以传递折叠面板或选项卡中的所有“data-options”。

Sass 参考

变量

可以使用项目设置文件中的这些 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$accordion-background`	颜色	`$white`	折叠面板组的默认背景颜色。
`$accordion-plusminus`	布尔值	`true`	如果为 `true`，则在每个折叠面板标题的侧面添加加号和减号图标。
`$accordion-plus-content`	字符串	`'\002B'`	当 `$accordion-plusminus` 为 `true` 时加号图标的内容
`$accordion-minus-content`	字符串	`'\2013'`	当 `$accordion-plusminus` 为 `true` 时减号图标的内容
`$accordion-title-font-size`	数字	`rem-calc(12)`	折叠面板标题的字体大小。
`$accordion-item-color`	颜色	`$primary-color`	菜单中项目的默认文本颜色。
`$accordion-item-background-hover`	颜色	`$light-gray`	菜单中项目悬停时的默认背景颜色。
`$accordion-item-padding`	数字或列表	`1.25rem 1rem`	折叠面板项目的默认填充。
`$accordion-content-background`	颜色	`$white`	选项卡内容的默认背景颜色。
`$accordion-content-border`	颜色	`1px solid $light-gray`	选项卡内容的默认边框颜色。
`$accordion-content-color`	颜色	`$body-font-color`	选项卡内容的默认文本颜色。
`$accordion-content-padding`	数字或列表	`1rem`	选项卡内容的默认填充。
`$tab-margin`	数字	`0`	选项卡栏的默认边距。
`$tab-background`	颜色	`$white`	选项卡栏的默认背景颜色。
`$tab-color`	颜色	`$primary-color`	选项卡项目的字体颜色。
`$tab-background-active`	颜色	`$light-gray`	选项卡栏的活动背景颜色。
`$tab-active-color`	颜色	`$primary-color`	选项卡项目的活动字体颜色。
`$tab-item-font-size`	数字	`rem-calc(12)`	选项卡项目的字体大小。
`$tab-item-background-hover`		`$white`	菜单中项目悬停时的默认背景颜色。
`$tab-item-padding`	数字	`1.25rem 1.5rem`	选项卡项目的默认填充。
`$tab-content-background`	颜色	`$white`	选项卡内容的默认背景颜色。
`$tab-content-border`	颜色	`$light-gray`	选项卡内容的默认边框颜色。
`$tab-content-color`	颜色	`$body-font-color`	选项卡内容的默认文本颜色。
`$tab-content-padding`	数字或列表	`1rem`	选项卡内容的默认填充。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合从我们的组件中构建自己的类结构。

accordion-container

@include accordion-container;

添加折叠面板容器的样式。将其应用于获取 `data-accordion` 的同一个元素。

accordion-item

@include accordion-item;

添加折叠面板项目的样式。将其应用于折叠面板 ul 中的列表项。

accordion-title

@include accordion-title;

添加折叠面板项目标题的样式。将其应用于折叠面板项目中的链接。

accordion-content

@include accordion-content;

添加折叠面板内容的样式。将其应用于折叠面板项目标题下方的内容窗格。

tabs-container

@include tabs-container;

添加选项卡容器的样式。将其应用于 `<ul>`。

tabs-container-vertical

@include tabs-container-vertical;

增强选项卡容器以使其具有垂直选项卡。将其与 `tabs-container()` 结合使用。

tabs-title

@include tabs-title;

添加选项卡容器中链接的样式。将其应用于选项卡容器内的 `<li>` 元素。

tabs-content

@include tabs-content;

添加围绕选项卡组内容窗格的包装器的样式。

tabs-content-vertical

@include tabs-content-vertical;

通过移动边框来增强选项卡内容容器以使其具有垂直样式。将其与 `tabs-content()` 结合使用。

tabs-panel

@include tabs-panel;

添加选项卡内容容器中单个选项卡内容面板的样式。

JavaScript 参考

初始化

要使用此插件，必须在 JavaScript 中包含以下文件

foundation.core.js
foundation.responsiveAccordionTabs.js
- 使用实用程序库 `foundation.util.motion.js`
- 使用实用程序库 `foundation.accordion.js`
- 使用实用程序库 `foundation.tabs.js`

Foundation.ResponsiveAccordionTabs

创建响应式折叠式选项卡的新实例。

var elem = new Foundation.ResponsiveAccordionTabs(element, options);

触发以下事件： ResponsiveAccordionTabs#event:init

名称	类型	描述
`元素`	jQuery	要转换为响应式折叠式选项卡的 jQuery 对象。
`选项`	对象	对默认插件设置的覆盖。

方法

打开

$('#element').foundation('open', target);

打开由“target”定义的插件窗格。

名称	类型	描述
`目标`	jQuery	要打开的窗格的 jQuery 对象或 id 字符串。

关闭

$('#element').foundation('close', target);

关闭由“target”定义的插件窗格。选项卡不可用。

名称	类型	描述
`目标`	jQuery	要关闭的窗格的 jQuery 对象或 id 字符串。

切换

$('#element').foundation('toggle', target);

切换由“target”定义的插件窗格。选项卡不可用。

名称	类型	描述
`目标`	jQuery	要切换的窗格的 jQuery 对象或 id 字符串。

_destroy

$('#element').foundation('_destroy');

销毁此元素上当前插件的实例，以及切换插件的窗口大小调整处理程序。