Best way to extend jQuery plugin

Question

I am a fairly new jQuery user who wants to extend an existing jQuery plugin, which is about 75% of what I need. I tried to do my homework. I checked the following questions about stackoverflow:

• JQuery plugin extension
• Extend jQuery Plugin
• jQuery: extend connection question

I have to read by extension method. However, all this homework left me confused. I am working with the fullcalendar plugin and should change some of these actions as well as add new event hooks. Am I stuck with this in plugin closure itself? Am I missing something?

Ideally, we could separate our code from the plugin code to provide a possible update. Any help would be greatly appreciated, especially pointers to where I lack information or opinions on whether the solutions already presented in other issues make sense. They contradict each other to me, and I'm still not embarrassed.

Answer 1

I had the same problem with the jQuery extension of the UI plugins, and here is the solution I found (found it through jquery.ui.widget.js):

 (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);

hope this helps, ask if you have any questions.

Answer 2

I had the same problem and I came here, and then Jared Scott answered, inspired me.

(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

Ive discovered that with a lot of plugins, the methods are protected / private (i.e. in the closing area). If you need to change the functionality of methods / functions, then you are out of luck if you do not want to fork it. Now, if you do not need to change any of these methods / functions, you can use $.extend($.fn.pluginName, {/*your methods/properties*/};

Another thing I ended up with is simply using the plugin as a property of my plugin, rather than trying to extend it.

The thing that all this happens is how the plugin you want to expand is encoded.

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> 

// using a custom plugin

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

/// dom elements usually work on the written utils type /////////////// custom utils

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

// access from above is used as

 $.Afunction(); 

// this type of utils usually extends javascript

Answer 5

My approach to rewriting jQuery plugins was to move the methods and variables you need to access the options block and call "extend"

 // 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

An example similar to Jared Scott's answer, but making a copy of the original prototype of the object makes it possible to call the parent method:

 (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 Widget can be extended with jQuery Widget Factory.

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

Check out the jQuery documentation to find out more:
Factory API Widget
Extending a widget with a Factory widget