Foundation-JavaScriptユーティリティ

Foundationには、共通の機能を追加するために使用されるJavaScriptユーティリティが含まれています。とても便利で使いやすいです。このJavaScriptユーティリティライブラリは、_Your_folder_name/node_modules/foundation-sites/js_フォルダーにあります。

Box

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

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

返されるオブジェクトは、_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（ 'large'）_は、画面が少なくともブレークポイントと同じ幅かどうかを確認するために使用されます。
_Foundation.MediaQuery.get（ 'medium'）_は、ブレークポイントのメディアクエリを取得します。
_Foundation.MediaQuery.queries_はメディアクエリの配列であり、Foundationはブレークポイントに使用します。
_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は、Foundation 6に含まれているMotion UIライブラリに似ています。カスタム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);

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

Foundation.onImagesLoaded($images, callback);

タッチ

メソッドは、擬似ドラッグイベントとスワイプを要素に追加するために使用されます。
js/foundation.util.touch.js はスクリプトのファイル名であり、コードの作成中に含めることができます。
_addTouch_メソッドは、モバイルデバイス用のSliderプラグインの要素をタッチイベントにバインドするために使用されます。
_spotSwipe_メソッドは、モバイルデバイス用のOrbitプラグインの要素をスワイプイベントにバインドします。

$('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つのメソッドが使用されます。サイズ変更とスクロール。

_resize（）_メソッドは、サイズ変更イベントが発生したときにサイズ変更イベントをトリガーします。
_scroll（）_メソッドは、スクロールイベントが発生したときにスクロールイベントをトリガーします。

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

その他

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

Foundation-javascript-utilities

目次