How to add a function to jQuery?
Please see "Defining your own functions in jQuery" by Basil Goldman:
In this post, I want to present how easy define your own functions in jQuery and using them.
Modified, based on the code in the blog post linked above:
jQuery.fn.yourFunctionName = function() {
// `this` is the jQuery Object on which the yourFunctionName method is called.
// `arguments` will contain any arguments passed to the yourFunctionName method.
var firstElement = this[0];
return this; // Needed for other methods to be able to chain off of yourFunctionName.
};
Just use:
$(element).yourFunctionName();
The jquery documentation has a section on plugin authoring, where I found this example:
jQuery.fn.debug = function() {
return this.each(function(){
alert(this);
});
};
Then you'd be able to call it this way:
$("div p").debug();
jQuery has the extend
function to do that
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
you can see the documentation there
This is the pattern that I prefer to define my own plugins.
(function($) {
$.fn.extend({
myfunc: function(options) {
options = $.extend( {}, $.MyFunc.defaults, options );
this.each(function() {
new $.MyFunc(this,options);
});
return this;
}
});
// ctl is the element, options is the set of defaults + user options
$.MyFunc = function( ctl, options ) {
...your function.
};
// option defaults
$.MyFunc.defaults = {
...hash of default settings...
};
})(jQuery);
Applied as:
$('selector').myfunc( { option: value } );