切换器

JavaScript Motion UI

Toggler 可以轻松地通过点击切换 CSS 或为任何元素添加动画。

切换 CSS 类

要设置类切换，首先将属性 data-toggler 添加到元素中。 data-toggler 的值是您要切换的类（例如 .classname 和 classname）。还要为元素指定一个唯一的 ID，以便可以将其作为目标。

<ul class="menu" id="menuBar" data-toggler=".expanded">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

然后，将 data-toggle 添加到任何元素，并将目标的 ID 作为属性的值。现在，每当您单击此元素时，该类将在目标上打开和关闭。

<p><a data-toggle="menuBar">Expand!</a></p>

展开！

使用动画切换

除了切换类之外，您还可以切换可见性。切换时，元素使用 Motion UI 类进入或退出视图。

添加属性 data-animate 来代替 data-toggler。属性的值是您想要的*进入动画*，后跟*退出动画*。

在视频中观看此部分

<p><a data-toggle="panel">Toggle Panel</a></p>

<div class="callout" id="panel" data-toggler data-animate="hinge-in-from-top spin-out">
  <h4>Hello!</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>

切换面板

你好！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?

标记为可关闭

要创建一个可以关闭一次的元素，请添加属性 data-closable。然后使用 data-close 在元素内添加一个点击触发器。

在视频中观看此部分

<div class="callout" data-closable>
  <button class="close-button" data-close>&times;</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.

使用备用动画

可以使用自定义退出动画配置 data-closable。

在视频中观看此部分

<div class="callout" data-closable="slide-out-right">
  <button class="close-button" data-close>&times;</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
</div>

聚焦时切换

data-toggle 属性仅在单击时切换类/可见性。您还可以使用 data-toggle-focus 让切换在元素*获得焦点*或*失去焦点*时触发。

在视频中观看此部分

<input type="text" data-toggle-focus="form-callout" placeholder="Click in here to reveal extra content">

<div class="secondary callout is-hidden" id="form-callout" data-toggler="is-hidden">
  <p>This is only visible when the above field has focus.</p>
</div>

仅当上述字段获得焦点时，此项才可见。

多个目标

data-toggle、data-close 和 data-open 属性现在可以定位多个元素！语法很简单；只需将*空格*分隔的列表传递给 data-x 属性，如下所示

在视频中观看此部分

<button class="button" data-toggle="foo bar baz">Toggle things</button>

然后，每当单击按钮（或您选择的任何其他元素）时，ID 为 foo、bar 和 baz 的元素都将被切换。

JavaScript 参考

初始化

您的 JavaScript 中必须包含以下文件才能使用此插件

foundation.core.js
foundation.toggler.js
- 使用实用程序库 foundation.util.motion.js
- 使用实用程序库 foundation.util.triggers.js

Foundation.Toggler

创建 Toggler 的新实例。

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

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

名称	类型	描述
`element`	对象	要向其添加触发器的 jQuery 对象。
`options`	对象	覆盖默认插件设置。

插件选项

使用这些选项可以自定义 Toggler 的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-toggler`	`字符串`		要切换的元素的类。可以带或不带“.”提供。
`data-animate`	`布尔值`	`false`	告诉插件在切换元素时是否应设置动画。

事件

这些事件将从附加了 Toggler 插件的任何元素触发。

名称	描述
`on.zf.toggler`	如果目标元素在切换后具有该类，则触发。
`off.zf.toggler`	如果目标元素在切换后没有该类，则触发。

方法

toggle

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

切换目标元素上的目标类。根据结果状态是“开”还是“关”，从原始触发器触发一个事件。

触发以下事件： Toggler#event:on Toggler#event:off

_destroy

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

销毁元素上的 Toggler 实例。