Foundation-slider-javascript-reference

提供:Dev Guides
移動先:案内検索

Foundation-Slider JavaScriptリファレンス

説明

Foundationは、スライダー用のJavaScriptコンポーネントを提供します。

初期化中

_foundation.core.js_プラグインと共に、このプラグインを使用するには、_foundation.slider.js_をJavaScriptに含める必要があります。 このプラグインには、次のリストされたユーティリティライブラリが必要です。

  • 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. Name & Description Type
1

element

jQueryオブジェクトは、アコーディオンメニューを作成するために使用されます。

jQuery
2

options

プラグインのデフォルト設定をオーバーライドします。

Object

プラグインオプション

スライダーインスタンスをカスタマイズするには、プラグインオプションを使用できます。 これらのオプションは、プラグインのコンストラクターに渡されるオブジェクト、個々のデータ属性、または1つの結合された_data-options_属性として設定できます。 次の表は、JavaScriptプラグインを初期化する方法を示しています。

Sr.No. Name & Description Example
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

イベントリスナーが適用されないようにし、スライダーを無効にします。 'disabledClass’でJSによってクロスチェックされました。

false
11

doubleSided

2つのハンドルを使用でき、JSによってクロスチェックされます。

false
12

decimal

プラグインが浮動小数点精度のために必要な小数点以下の桁数を表します。

2
13

moveTime

ユーザーがバーをクリックしたときに、スライダーハンドルの動きをアニメーション化するときです。 Sass設定で移行時間を更新する場合は、手動で設定する必要があります。

200
14

disabledClass

スライダーを無効にするために使用

'disabled'

イベント

これらのイベントは、Sliderプラグインが接続されている任意の要素からトリガーされます。 _moved.zf.slider_は、ハンドルの移動が完了するとトリガーされます。

関数

_.destroy_は、スライダープラグインを破棄するために使用されます。