mochiflappe
8/28/2015 - 7:04 AM

jQuery Pluginの雛形 Boilerplate

jQuery Pluginの雛形 Boilerplate

;(function ($, window, undefined) {
    //プラグインネームの定義
    var pluginName = 'defaultPluginName',

        //ドキュメント
        document = window.document,

        //デフォルト値
        defaults = {
            propertyName: "value"
        };
    //プラグインの初期化
    function Plugin(element, options) {

        //要素
        this.element = element;

        //オプション
        this.options = $.extend({}, defaults, options);

        //デフォルト値設定
        this._defaults = defaults;

        //プラグインネーム設定
        this._name = pluginName;

        //初期化
        this.init();
    }
    Plugin.prototype.init = function () {
        //プラグインの初期化
        console.log("プラグインの初期化を行っています", this.element, this.options);
    };
    $.fn[pluginName] = function (options) {
        return this.each(function () {

            //初期化
            if (!$.data(this, 'plugin_' + pluginName)) {
                console.log("初めてプラグインが実行されたのでプラグインの初期化を行います");
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }

            //実装
            console.log("実装部分をここに書きます", this, options);
        });
    };
}(jQuery, window));
$(document.body).defaultPluginName({
    propertyName: 'a custom value'
});
//http://jqueryboilerplate.com/
;(function($) {

    $.fn.Plugins = function(option) {

        var defaults = {
            // デフォルトオプション
        };

        var option = $.extend({}, defaults, option);

        // 処理

        return this;
    };

})(jQuery);