ののように、jQueryプラグイン

Question

私はかなり新しいjQueryユーザーのみをさらに延長することができ、既存のjQueryプラグインは約75%でいます。また、私の宿題をします。私の質問にstackoverflow:

• 伸びるjQueryプラグイン
• このjQueryプラグイン
• jQuery:拡張プラグインの質問

私 読む の延長方法。しかし、すべてのthise宿題を持っていたのかなりの混乱をきたしている。仕事をしている fullcalendar プラグインの修正が必要なの行動の追加といった新しいイベント。Amにこだわってこのプラグインの閉鎖ょうか？私を見落とさないよう明らかな?

理想的にはこの分とに区別できる当社のコードからプラグインのコードするために可能なアップグレードを開始します。のお役に立てるようお願い申し上げますは、特にポインタがんの不一部の情報や意見るかどうかの解決策を既に示したその他のスタックオーバーフローの質問うです。っと矛盾がお互いがかなりの混乱をきたしている。

Answer 1

私はちょうど私が見つけた解決策（jquery.ui.widget.jsを通じてそれを見つけた）され、ここでのjQuery UIのプラグインを拡張しようとしている同じ問題を抱えていたし、

(function($) {
/**
 *  Namespace: the namespace the plugin is located under
 *  pluginName: the name of the plugin
 */
    var extensionMethods = {
        /*
         * retrieve the id of the element
         * this is some context within the existing plugin
         */
        showId: function(){
            return this.element[0].id;
        }
    };

    $.extend(true, $[ Namespace ][ pluginName ].prototype, extensionMethods);


})(jQuery);

これが役に立てば幸いご質問があれば、お問い合わせください。

Answer 2

私は同じ問題を持っていたし、ここに来た、その後、ジャレッド・スコットの答えは私にインスピレーションを与えています。

(function($) {

    var fullCalendarOrg = $.fn.fullCalendar;

    $.fn.fullCalendar = function(options) {
        if(typeof options === "object") {
            options = $.extend(true, options, {
                // locale
                isRTL: false,
                firstDay: 1,
                // some more options
            });
        }

        var args = Array.prototype.slice.call(arguments,0);
        return fullCalendarOrg.apply(this, args);
    }

})(jQuery);

Answer 3

アイブ氏は、プラグインの多くの方法は、（閉鎖の範囲内すなわち）/秘密保護されていることがわかりました。 youreのは喜んでそれをforkしない限り、ヨーヨーは、運のあなたのアウトをする方法/機能の機能を変更する必要がある場合。今、あなたは、あなたが$.extend($.fn.pluginName, {/*your methods/properties*/};を使用することができ、これらのメソッド/関数のいずれかを変更する必要がいけない場合

もう一つのIVEは単に私のプラグインのプロパティとしてプラグインを使用しての代わりに、それを拡張しようとしているの前にやってしまっています。

何それすべてが本当にに降りてくることは、あなたが拡張するプラグインがコード化されている方法です。

Answer 4

$.fn.APluginName=function(param1,param2)
{
  return this.each(function()
    {
      //access element like 
      // var elm=$(this);
    });
}

// sample plugin
$.fn.DoubleWidth=function()
  {
    return this.each(function()
      {
        var _doublWidth=$(this).width() * 2;
        $(this).width(_doubleWidth);
      });
  }

//

<div style="width:200px" id='div!'>some text</div>

// カスタムプラグインを使用して

$('#div1').DoubleWidth();

/// utilsのの書かれたタイプDOM要素の通常作業上記 /////////////// カスタムutilsの

(function($){
  var _someLocalVar;
  $.Afunction=function(param1,param2) {
    // do something
  }
})(jquery);

などのutil上記

//アクセス

$.Afunction();

// utilsのこのタイプは通常、JavaScriptを拡張する

Answer 5

jQueryのプラグインを書き換えるの私のアプローチは、ブロックと

「拡張」と呼ぶのオプションにアクセスする必要があるメソッドと変数を移動することでした

// in the plugin js file
$.jCal = function (target, opt) {
    opt = $.extend({
       someFunctionWeWantToExpose: function() {
           // 'this' refers to 'opt', which is where are our required members can be found
       }
    }

    // do all sorts of things here to initialize

    return opt; // the plugin initialisation returns an extended options object
}


////// elsewhere /////

var calendar = $("#cal1").jCal();
calendar.someFunctionWeWantToExpose();

Answer 6

ジャレッドScott`sの答えが、元のオブジェクトのプロトタイプのコピーを作成することに類似の例は、親メソッドを呼び出す機能を提供します：

(function($) {

    var original = $.extend(true, {}, $.cg.combogrid.prototype);

    var extension = {
        _renderHeader: function(ul, colModel) {
            original._renderHeader.apply(this, arguments);

            //do something else here...
        }
    };

    $.extend(true, $.cg.combogrid.prototype, extension);

})(jQuery);

Answer 7

jQueryのウィジェットは、jQueryのウィジェットファクトリーを使用して拡張することができます。

(function ($) {
    "use strict";

    define([
        "jquery",
        "widget"
    ], function ($, widget) {
        $.widget("custom.yourWidget", $.fn.fullCalendar, {
            yourFunction: function () {
                // your code here
            }
        });

        return $.custom.yourWidget;
    });
}(jQuery));

より多くを学ぶためにjQueryのドキュメントをチェックアウト：
ウィジェットファクトリーAPI の
ウィジェットファクトリーのでウィジェットを拡張する