在 Foundation 中以编程方式设置数据插件选项答案

【问题标题】：Set data-plugin-options programmatically in Foundation在 Foundation 中以编程方式设置数据插件选项
【发布时间】：2017-09-28 03:47:59
【问题描述】：

我已阅读此docs，并找到了在元素本身上使用内联的插件选项。但是当我使用相同的插件选项创建多个元素时，它看起来很干代码。

例如，我创建了一个具有相同插件选项的下拉元素

<div class="dropdown-pane pop-menu" data-position="top" data-alignment="right" data-close-on-click="true" id="product-id1" data-dropdown></div>
<div class="dropdown-pane pop-menu" data-position="top" data-alignment="right" data-close-on-click="true" id="product-id2" data-dropdown></div>

如何在 Javascript 上设置数据插件选项？也许是这样的

Foundation.dropdown({
  position : 'top',
  alignment : 'right'
})

【问题讨论】：

标签： javascript jquery html zurb-foundation

【解决方案1】：

来自基金会文档：Configuring Plugins

使用 JavaScript 设置选项涉及将对象传递到构造函数

在你的情况下，它会像：

var options = {position: 'top', alignment: 'right', closeOnClick: true};
var dropdown = new Foundation.Dropdown($('#product-id1, #product-id2'), options);

【讨论】：