开发者

jQuery expose plugin functions

开发者 https://www.devze.com 2023-03-14 19:17 出处:网络
One of our old developers has built a jQuery plugin like so: jQuery.fn.limelight = function(options) {

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();
    开发者_JS百科            $.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?


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


Paste the switchTo() function within your <script></script> tags to make it a generally-available function.


You can use Jquery UI Widget Factory to create stateful plugins, which allows you to expose public methods (still avoiding global window scope) to be used even after the plugin has been instantiated

https://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号