Plugins

機能	プラグインコード名	備考
要素の高さ揃え	heightEqualizer
タブ	tab
メニュー	menu
ナビゲーションリストの現在地をアクティブにする	currentNav
ページ内リンクをスムーズにスクロールする	smoothScroll
ソーシャルボタンのロード	socialButtons
Google Mapの表示	googleMap
スマートフォン向けナビゲーション	smartphoneNav
スタイルスイッチャー	styleSwitcher	利用は非推奨。（OS・ブラウザの機能で実現できるため。）
フォントサイズスケーラー	fontsizeScaler	利用は非推奨。（OS・ブラウザの機能で実現できるため。）
電話番号自動リンク変換	telLink
アコーディオン	accordion

A Brief Look

以下のコードでプラグインが実行されます。

<script>
ajl.enable.pluginName(".class-name", { option: optionValue });
</script>

Building for production

gulpを利用して、コアと必要なプラグインを結合・圧縮できます。--pluginsオプションには、プラグインコード名をカンマ区切りで列挙します。

$ gulp build --plugins heightEqualizer,smartphoneNav

Project Policy

• jQuery非依存で軽量なスクリプトを目指す。（過去のブラウザ対応はjQuery・jQueryプラグインに任せる。）
• 頻繁に利用するふるまいを容易に再現できるようにし、制作・検証の効率化を図る。
• WAI-ARIAを採用し、よりアクセシブルなUIを提供可能にする。

Plugin Template

プラグインの実行コードを統一するため、下記のテンプレートに沿って作成します。initメソッドは必須です。

(function (window, document, ajl) {
"use strict";

// ----------------------------------------------------------------------------
// PluginName: プラグインの要旨
// ----------------------------------------------------------------------------
ajl.PluginName = function (elem, options) {
    this.elem = elem;
    this.defaults = {
        collect: function (parent) {
            return parent.children;
        }
    };

    this.options = ajl.util.deepExtend({}, this.defaults, options);
};

ajl.PluginName.prototype = {
    _privateMethod: function () {
        // Do something
    },

    publicMethod: function () {
        // Do something
    },

    init: function () {
        // Do something
   }
};

ajl.util.createRunner("PluginName");

}(window, document, ajl));