Question

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 1

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