views:

509

answers:

2

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:

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.

+1  A: 
$.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 custom plugin

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

/// above written type of utils usually work of dom elements /////////////// custom utils

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

// access above util as

$.Afunction();

// this type of utils usually extend javascript

Praveen Prasad
Thats not what hes asking - hes asking how best to extend an already existing plugin in a way that allows for updating the underlying plugin hes using as the base while adding the functionality he wants on top of it.
prodigitalson
The OP is not a he, I'm a she :).Seems like it might be possible to modify the plugin (the code is, after all, open source) to return pieces of itself and then we can hopefully contain our changes such that we only need to modify what's returned by the plugin. Is that what this answer was getting at?
justkt
+1  A: 

Ive found that with a lot of plugins the methods are protected/private (ie in the closures scope). If yo need to modify the functionality of the methods/functions then your out of luck unless youre willing to fork it. Now if you dont need to change any of these methods/functions then you can use $.extend($.fn.pluginName, {/*your methods/properties*/};

Another thing ive ended up doing before is simply using the plugin as a property of my plugin instead of trying to extend it.

What it all really comes down to is how the plugin you want to extend is coded.

prodigitalson
In the main extension is all I want to do, but in some cases it's things like adding event handlers on DOM elements created inside of the plugin. In other cases, I need to override behavior inside of existing methods. The more I read, the less I see a clean way to do this. Any other thoughts?
justkt
Well if those mehods are ones in the pubic API (which they dont seem to be) then you could use the method i mentioned above to replace the function definition. Other than that there is no clean way. You will just have to fork it for your uses and hack away.
prodigitalson