基礎-JavaScript

この章では、_JavaScript_について学習します。 FoundationでJavaScriptをセットアップするのは簡単です。必要なのはjQueryだけです。

JavaScriptインストール

Foundation JavaScriptファイルを取得するには、ZIPダウンロード、パッケージマネージャー、またはCDNを使用できます。コードでは、jQueryとFoundationへのリンクを<script>タグとして提供し、閉じる<body>の前に配置し、jQueryの後にFoundationがロードされることを確認できます。詳細については、リンク：/foundation/foundation_javascript_installation [ここをクリック]をご覧ください。

ファイル構造

コマンドラインからFoundationをインストールすると、Foundationプラグインは_foundation.tabs.js 、 foundation.dropdownMenu.js 、 foundation.slider.js_などの個別のファイルとしてダウンロードされます。これらのファイルはすべて_foundation.js_に結合され、一度にすべてのプラグインを提供します。プラグインを使用する場合は、最初に_foundation.core.js_をロードする必要があります。

例えば-

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

特定のプラグインには、Foundationのインストールに付属する特定のユーティリティライブラリが必要な場合があります。特定のプラグイン要件については、次の章のリンクで詳しく調べることができます：/foundation/foundation_javascript_utilities [JavaScriptユーティリティ]。

個々のファイルをロードすると、特にモバイルユーザーにネットワークオーバーヘッドが発生します。ページの読み込みを高速化するには、http：//gruntjs.com/[grunt]またはhttp://gulpjs.com/[gulp]の使用をお勧めします。

初期化中

_foundation（）_関数は、すべてのFoundationプラグインを一度に初期化するために使用されます。

例えば-

(document).foundation();

プラグインを使用する

データ属性を使用して、プラグインはプラグインの名前と一致するため、HTML要素に接続されます。プラグインの大部分は他のプラグイン内にネストできますが、単一のHTML要素には一度に1つのプラグインしか含めることができません。たとえば、_data-tooltip_を追加すると、ツールチップリンクが作成されます。詳細については、リンク：/foundation/javascript_using_plugins [ここをクリック]をご覧ください。

プラグインの構成

プラグインは、その構成設定を使用してカスタマイズできます。たとえば、_accordion_スライドの速度を上下に設定できます。プラグインの設定は、プラグインの DEFAULTS プロパティを使用してグローバルに変更できます。詳細については、/foundation/javascript_configuring_plugins [こちらをクリック]をご覧ください。

ページの読み込み後にプラグインを追加する

新しいHTMLがDOMに追加されると、それらの要素のプラグインはデフォルトで初期化されません。 _.foundation（）_関数を呼び出して、新しいプラグインを確認できます。

例えば-

$.ajax('assets/partials/kitten-carousell', function(data) {
   $('#kitten-carousel'</span>)l(data).foundation();
});

プログラムによる使用

JavaScriptでは、プラグインはプログラムで作成でき、各プラグインはグローバルな_Foundation_オブジェクトのクラスであり、要素とオブジェクトなどの2つのパラメーターを取るコンストラクターを持ちます。

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

プラグインの大部分はパブリックAPIで提供されており、JavaScriptでプラグインを操作できます。プラグインのドキュメントを参照して、使用可能な関数を調べて、メソッドを簡単に呼び出すことができます。

例えば-

$('.tooltip').foundation('destroy');
//this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
//this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
//this will change the first Tabs on the page to whatever panel you choose.

任意のjQueryセレクターを選択できます。セレクターが複数のプラグインを保持している場合、それらはすべて同じ選択メソッドが呼び出されます。
引数は、引数をJavaScriptに渡すのと同じように渡すことができます。
underscore（）_が前に付いたメソッドは、内部APIの一部と見なされます。つまり、警告なしに壊れたり、変更されたり、消えたりすることさえあります。

イベント

特定の機能が終了するたびに、DOMはイベントをトリガーします。たとえば、タブが変更されるたびに、そのタブをリッスンし、そのタブに戻り応答を作成できます。各プラグインはイベントのリストをトリガーできます。イベントのリストは、プラグインのドキュメントに記載されます。 Foundation 6では、コールバックプラグインが削除され、イベントリスナーとして使用する必要があります。

例えば-

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation-javascript

目次

基礎-JavaScript

JavaScriptインストール

ファイル構造

初期化中

プラグインを使用する

プラグインの構成

ページの読み込み後にプラグインを追加する

プログラムによる使用

イベント