Foundation-JavaScriptユーティリティ

Foundationには、一般的な機能を追加するために使用されるJavaScriptユーティリティが含まれています。それは非常に便利で使いやすいです。このJavaScriptユーティリティライブラリは、Your_folder_name / node_modules / Foundation-sites / jsフォルダーにあります。

ボックス

Foundation.Boxライブラリは、いくつかのメソッドで構成されています。
ザ・ js/foundation.util.box.js はスクリプトファイル名であり、コードの記述中に含めることができます。
jQueryオブジェクトまたはプレーンJavaScript要素のいずれかを両方のメソッドに渡すことができます。

var dims = Foundation.Box.GetDimensions(element);

返されるオブジェクトは、要素の次元を-として指定します

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },
   
   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },
   
   windowDims: {
      height: ...
   }
}

関数ImNotTouchingYouが含まれています。
渡された要素に基づいて、ブール値が返されます。これは、ウィンドウの端との競合、オプション、または親要素のいずれかです。
以下の行で指定されている2つのオプション、つまりleftAndRightOnly、topAndBottomOnlyは、1つの軸のみでの衝突を識別するために使用されます。

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

キーボード

Foundation.Keyboardには多くのメソッドがあり、キーボードイベントの操作を簡単にするのに役立ちます。
ザ・ js/foundation.util.keyboard.js はスクリプトファイル名であり、コードの記述中に含めることができます。
オブジェクトFoundation.Keyboard.keysは、キーと値のペアで構成されます。これらのキーは、フレームワークでより頻繁に使用されます。
キーが押されるたびに、Foundation.Keyboard.parseKeyが呼び出されて文字列が取得されます。これは、独自のキーボード入力を管理するのに役立ちます。

次のコードは、指定された$ element内のすべてのフォーカス可能な要素を検索するために使用されます。したがって、関数やセレクターを自分で作成する必要はありません。

var focusable = Foundation.Keyboard.findFocusable($('#content'));

handleKeyの機能は、このライブラリの主な機能です。
このメソッドは、キーボードイベントを処理するために使用されます。プラグインがユーティリティに登録されているときはいつでも呼び出すことができます。

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Foundation.Keyboard.registerの独自のキーバインディングを使用したいときに関数を呼び出すことができます。

MediaQuery

MediaQueryライブラリは、すべてのレスポンシブCSSテクニックのバックボーンです。
ザ・ js/foundation.util.mediaQuery.js はスクリプトファイル名であり、コードの記述中に含めることができます。
Foundation.MediaQuery.atLeast（「大」）はスクリーンが少なくともブレークポイントとして広いようであるかどうかをチェックするために使用されます。
Foundation.MediaQuery.get（「メディア」）は、ブレークポイントのメディアクエリを取得します。
Foundation.MediaQuery.queriesは、メディアクエリの配列は、財団は、ブレークポイントのために使用されています。
Foundation.MediaQuery.currentは、現在のブレークポイントの大きさの文字列です。

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

次のコードは、ウィンドウでメディアクエリの変更をブロードキャストします。

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

モーション＆ムーブ

Foundation.Motion javascriptは、Foundation6に含まれているMotionUIライブラリに似ています。これは、カスタムCSSトランジションとアニメーションを作成するために使用されます。
ザ・ js/foundation.util.motion.js はスクリプトファイル名であり、コードの記述中に含めることができます。
Foundation.Moveは、CSS3で裏付けられたアニメーションをシンプルかつエレガントにするために使用されます。
requestAnimationFrame();メソッドはブラウザにアニメーションを実行するように指示します。ブラウザが次の再描画を実行する前に、アニメーション関数を呼び出すように要求します。

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

アニメーションが完了すると、finished.zf.animateが起動されます。

ロードされたタイマーと画像

Orbitは、関数タイマーとロードされた画像の両方を使用します。ザ・js/foundation.util.timerAndImageLoader.js はスクリプトファイル名であり、コードの記述中に含めることができます。

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

image-loadedメソッドは、画像が完全に読み込まれると、jQueryコレクションでコールバック関数を実行します。

Foundation.onImagesLoaded($images, callback);

接する

これらのメソッドは、疑似ドラッグイベントを追加して要素にスワイプするために使用されます。
ザ・ js/foundation.util.touch.js はスクリプトファイル名であり、コードの記述中に含めることができます。
addTouchの方法は、モバイルデバイス用のスライダープラグインのイベントをタッチする結合要素に使用されます。
spotSwipeの方法は、モバイルデバイス用の軌道プラグインでスワイプイベントに要素をバインドします。

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

トリガー

選択した要素に対して指定されたイベントをトリガーします。
ザ・ js/foundation.util.triggers.js はスクリプトファイル名であり、コードの記述中に含めることができます。
トリガーは多くのFoundationプラグインで利用されています。

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

このライブラリでは、サイズ変更とスクロールの2つの方法が使用されます。

リサイズ（）サイズ変更イベントが発生したときの方法は、サイズ変更イベントをトリガします。
スクロール（）スクロールイベントが発生する方法は、スクロールイベントをトリガします。

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

その他

Foundationには、多くの場所で使用されているコアライブラリの機能がほとんど含まれていません。
ザ・ js/foundation.core.js はスクリプトファイル名であり、コードの記述中に含めることができます。
Foundation.GetYoDigits（[number、namespace]）は、名前空間を持つランダムなベース36uidを返します。デフォルトでは、6文字の文字列長を返します。
Foundation.getFnName（fn）は、JavaScript関数名を返します。
Foundation.transitionendは、CSSの移行が完了すると発生します。