Foundation - Slider JavaScript 参考
描述
Foundation 为滑块提供 JavaScript 组件。
初始化
除了 foundation.core.js 插件外，您还需要在 JavaScript 中包含 foundation.slider.js 才能使用此插件。此插件需要以下列出的实用程序库。
foundation.util.motion.js
foundation.util.triggers.js
foundation.util.keyboard.js
foundation.util.touch.js
Foundation.Slider
用于创建下拉菜单的新实例。
var elem = new Foundation.Slider(element);
下表列出了 Foundation.slider 使用的参数。
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 |
Element jQuery 对象用于制作手风琴菜单。 |
jQuery |
| 2 |
Options 覆盖插件的默认设置。 |
对象 |
插件选项
要自定义滑块实例，可以使用插件选项。这些选项可以设置为传递给插件构造函数的对象、单个数据属性或一个组合的 data-options 属性。下表显示了如何初始化 JavaScript 插件。
| Sr.No. | 名称和描述 | 示例 |
|---|---|---|
| 1 |
start 滑块刻度最小值。 |
0 |
| 2 |
end 滑块刻度最大值。 |
100 |
| 3 |
step 表示每次更改事件的最小值更改。目前尚未实现。 |
|
| 4 |
initialStart 初始化时必须将左句柄/第一个输入设置为的值。 |
0 |
| 5 |
initialEnd 初始化时必须将右句柄/第二个输入设置为的值。 |
100 |
| 6 |
binding 它允许将输入放置在容器外部并可见。 |
false |
| 7 |
clickSelect 它允许您单击或点击滑块来选择一个值。 |
true |
| 8 |
vertical 当设置为 true 并使用 vertical 类时，您可以将对齐方式更改为垂直。 |
false |
| 9 |
draggable 允许您拖动滑块手柄来选择一个值。 |
true |
| 10 |
disabled 阻止应用事件侦听器并禁用滑块。通过 JS 与 'disabledClass' 进行交叉检查。 |
false |
| 11 |
doubleSided 允许使用两个句柄并通过 JS 进行交叉检查。 |
false |
| 12 |
decimal 表示插件必须保留多少位小数才能达到浮点精度。 |
2 |
| 13 |
moveTime 当用户点击栏时，这是滑块手柄移动的动画时间。如果在 Sass 设置中更新过渡时间，则需要手动设置。 |
200 |
| 14 |
disabledClass 用于禁用滑块 |
'disabled' |
事件
这些事件从任何附加了滑块插件的元素触发。 moved.zf.slider 在手柄移动完成时触发。
函数
.destroy 用于销毁滑块插件。
foundation_basic_controls.html
