Foundation - 滑塊 JavaScript 參考

描述

Foundation 提供用於滑塊的 JavaScript 元件。

除了 foundation.core.js 外掛之外，您還需要在 JavaScript 中包含 foundation.slider.js 才能使用此外掛。此外掛需要以下列出的實用程式庫。

它用於建立下拉選單的新例項。

var elem = new Foundation.Slider(element);

下表列出了 Foundation.slider 使用的引數。

序號	名稱和描述	型別
1	element jQuery 物件用於轉換為手風琴選單。	jQuery
2	options 覆蓋外掛的預設設定。	物件

序號

名稱和描述

型別

element

jQuery 物件用於轉換為手風琴選單。

jQuery

options

覆蓋外掛的預設設定。

物件

要自定義滑塊例項，可以使用外掛選項。這些選項可以設定為傳遞給外掛建構函式的物件、單個數據屬性或一個組合的 data-options 屬性。下表顯示瞭如何初始化 JavaScript 外掛。

序號	名稱和描述	示例
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.htm

列印頁面