Question

Ok, I have been having a VERY hard time figuring this out. I guess I’m still new when it comes to creating jQuery plugins. I am going to post the entire code in a JSFiddle but here is the jist of the problem. My plugin right now uses the $.fn.extend method to allow users to chose a selector like: $(document).BGP({/*options*/}); —this is fine except the BGP function will ONLY work with the “document” therefore I would like to remove the selector option and program this into the plugin. So that the user can call like: $.BGP({/options/});

I am lost on how to do this!!! I have tried many different things and nothing works.

(function ($) {
    $.fn.extend({
            BGP: function (options) {
                    //Set the default
                    var defaults = {
                            backgroundStretch: "",
                            backImage: "",
                            midImage: "",
                            foreImage: ""...and much more

Here is the JS fiddle—-this is a working example with the “document” selector.

Also I have some minified code at the top of the JS….you can ignore that. My code starts about halfway down.

My call for the function is at the bottom of the JS.

http://jsfiddle.net/mgunnels/3Z2sK/6/

Answer 1

To create a “static” plugin, all you need to do is assign your function directly to the jQuery object:

(function($) {
    $.BGP = function(arg1) { ... };
})(jQuery);

Usage:

$.BGP("foo");

Updated example: http://jsfiddle.net/n8ea4/

Additionally, you don’t need the .each loop at all since there can only be one document.