Foundation-drpdwn-javascript-reference

ドロップダウンペインJavaScriptリファレンス

Foundationは、以下にリストするように、ドロップダウンペインにJavaScriptコンポーネントを提供します。

初期化中

_foundation.dropdown.js_および_foundation.core.js_プラグインを使用して、JavaScriptでペインを初期化できます。 _foundation.core.js_プラグインには、次のライブラリが必要です-

• foundation.util.keyboard.js
• foundation.util.box.js

Foundation.Dropdown

以下で定義されているように、ドロップダウンのインスタンスを指定します-

var my_element = new Foundation.Dropdown(element);

ドロップダウンには、表にリストされている次のイベントが含まれます-

Sr.No.	Name & Description	Type
1	element jQueryオブジェクトをドロップダウンに作成します。	jQuery
2	options デフォルトのプラグイン設定を上書きします。	Object

プラグインオプション

次のプラグインオプションを使用して、ドロップダウンインスタンスをカスタマイズできます。

Sr.No.	Name & Description	Example
1	hoverDelay ホバーイベントでサブメニューを開くのにかかる時間を指定します。	250
2	hover ホバーイベントのサブメニューを開きます。	false
3	hoverPane ドロップダウンペインにカーソルを合わせたときにドロップダウンを閉じません	true
4	vOffset ドロップダウンペインとトリガー要素を開いたときにピクセル数を提供します。	1
5	hOffset ドロップダウンペインとトリガー要素を開いたときにピクセル数を提供します。	1
6	positionClass クラスが調整に適用されるときに位置を調整するために使用されます。	'top'
7	trapFocus このプラグインは、キーボードコマンドでドロップダウンを開くと、フォーカスをドロップダウンペインにトラップします。	false
8	autoFocus これは、ペイン上の要素にフォーカスを設定するために使用されます。	true

イベント

ドロップダウンペインは、表にリストされているように、次のイベントを提供します-

Sr.No.	Name & Description
1	closeme.zf.dropdown 他の開いているドロップダウンを閉じるために使用されます。
2	show.zf.dropdown 表示されると、ドロップダウンペインが表示されます。

関数

ドロップダウンペインは、以下にリストされているように、次の機能を提供します-

• .getPositionClass -ドロップダウンペインの現在の位置を指定します。
• .open -ドロップダウンペインを表示し、バブリングイベントを使用して他のドロップダウンを閉じるために起動します。
• .close -開いているドロップダウンペインを閉じます。
• .toggle -ドロップダウンペインを切り替えます。
• .destroy -ドロップダウンペインを破棄します。