Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best Way to Extend a jQuery Plugin

I'm a fairly new jQuery user looking to extend an existing jQuery plugin that does about 75% of what I need. I've tried to do my homework on this. I've checked out the following questions on stackoverflow:

  • Extending a jQuery Plugin
  • Extend a jQuery Plugin
  • jQuery: extend plugin question

I've read up on the extend method. However, all of thise homework has left me confused. I'm working with the fullcalendar plugin and need to modify some of the behavior as well as add new event hooks. Am I stuck with doing this in the plugin closure itself? Am I missing something obvious?

Ideally we would be able to separate our code from the plugin code to allow for a possible upgrade. Any help would be greatly appreciated, especially pointers on where I'm missing some information or opinions on whether the solutions already presented in other Stack Overflow questions make sense. To me they contradict each other and I'm still left confused.

like image 437
justkt Avatar asked Jan 12 '10 17:01

justkt


People also ask

Which will extend jQuery?

The jQuery. extend() method is used to merge contents of two or more objects together. The object is merged into the first object.

What is jQuery extension?

Re: jQuery Library File Name Extensionjs.

How does a jQuery plugin work?

A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you call jQuery() you're creating a new jQuery object, with all of jQuery's methods inherited.

Is jQuery a plugin?

A jQuery plugin is a method that we use to extend jQuery's prototype object. It is a piece of code written in a JavaScript file, which enables all jQuery objects to inherit any methods that you add.


1 Answers

I just had the same problem trying to extend jquery 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, please ask if you have any questions.

like image 182
Jared Scott Avatar answered Oct 06 '22 22:10

Jared Scott