Jarede Jarede - 3 years ago 114
Javascript Question

jQuery expose plugin functions

One of our old developers has built a jQuery plugin like so:

jQuery.fn.limelight = function(options) {

/*Skipped code here*/

jQuery(".spotlight-btn.back a").click( function (e) {

if(lastSelectedCastIndex - 1 >= 0) {
removeFromSpotlight();
lastSelectedCastIndex--;
e.preventDefault();
$.address.value(lastSelectedCastIndex);
ca$t.scroll(jQuery.jcarousel.intval(lastSelectedCastIndex), true);
switchTo(lastSelectedCastIndex);
}
return false;
});

function switchTo(i)
{
ca$t.scroll(jQuery.jcarousel.intval(i), true);
$.address.title($("#title_text").text());
putInSpotlight();
}
};


I've not done any jQuery plugin programming, but would like to expose the
switchTo
function so it can be called anywhere. How would I be able to do this?

Answer Source

This is probably overkill for your purposes, but it doesn't seem like your developer really understood or grasped the purpose of jQuery plugins.

You want a plugin to be somewhat generic where it can accept a selector and apply events, styles, dynamic html, whatever to the item(s) found in the selector. It looks like he wrote a "plugin" for a single purpose... maybe just to maintain some sort of organization.

Most plugins follow a form similar to this:

; (function ($) {
    $.fn.limelight  = function (method) {
        var methods = {
            //Initialize the plugin
            init: function (options) {
                return this.each(function () {
                //Refactor to conform to plugin style
//                    $(this).click( function (e) {
//                        if(lastSelectedCastIndex - 1 >= 0) {
//                            removeFromSpotlight();
//                            lastSelectedCastIndex--;
//                            e.preventDefault();
//                            $.address.value(lastSelectedCastIndex);
//                            ca$t.scroll(jQuery.jcarousel.intval(lastSelectedCastIndex), true);
//                            switchTo(lastSelectedCastIndex);
//                        }
//                        return false;
//                    });
                });
            },

            switchTo: function (i) {
            //Refactor to conform to plugin style
//                ca$t.scroll(jQuery.jcarousel.intval(i), true);
//                $.address.title($("#title_text").text());
//                putInSpotlight();

            }
        };

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.limelight');
        }
    };
})(jQuery);

//Following this pattern you'd be able to call your plugin like this. 
$(".spotlight-btn.back a").limelight();
$(".spotlight-btn.back a").limelight("switchTo", 0);

Here's the official documentation on the subject: http://docs.jquery.com/Plugins/Authoring

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download