如何调用jquery函数？

Question

I have the following jQuery plugin:

(function ($) {
    function _canvasScrollbar(c, s) {
        ...
    }

    _canvasScrollbar.prototype.myFunction = function(){
        console.log("Yey!");
    };

    $.fn.canvasScrollbar = function (s) {
        var a = {
            handleColor: "#ccc",
            scroll: 'horizontal',
            sliderColor: "#eee"
        };
        $.extend(a, s);
        return this.each(function () {
            new _canvasScrollbar(this, a)
        })
    }
})(jQuery);

I initialize it like so:

var sc = $(".myDiv").canvasScrollbar();

But, how do I call the function myFunction once the plugin has been initialized?

ps I have tried $(".myDiv").canvasScrollbar("myFunction") and sc.myFunction() , but neither work.

Answer 1

You need to store the new _canvasScrollbar instance somewhere. The easiest way to do it with jQuery is using the data method.

return this.each(function () {
    $(this).data('scrollbar', new _canvasScrollbar(this, a));
})

Now you can access your instance using data method. And then call the function.

sc.data('scrollbar').myFunction();
// Yey!

Answer 2

You have two type of jQuery 'plugins': plugins , which are usually stateless, and widgets . You seem to be wanting a widget , but you're creating it as a plugin . See:

While most existing jQuery plugins are stateless – that is, we call them on an element and that is the extent of our interaction with the plugin – there's a large set of functionality that doesn't fit into the basic plugin pattern.

In order to fill this gap, jQuery UI has implemented a more advanced plugin system. The new system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points. This system is called the Widget Factory and is exposed as jQuery.widget as part of jQuery UI 1.8; however, it can be used independently of jQuery UI.

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

To create a widget, you can do it like this:

 $.widget('customWidget.canvasScrollbar', { options: { handleColor: "#ccc", scroll: 'horizontal', sliderColor: "#eee" }, _create: function() { }, myFunction: function() { console.log("Yey!"); } }); var sc = $("div").canvasScrollbar(); sc.canvasScrollbar('myFunction') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div></div> 

This way you have access to other features, such as sc.canvasScrollbar('instance') , option setting, etc.

See: https://jqueryui.com/widget/

Answer 3

Try defining pluginName variable : "canvasScrollbar" ; setiing _canvasScrollbar.prototype.myFunction , this at a ; defining settings object as result of $.extend() ; setting c .data(pluginName) with s object within _canvasScrollbar ; returning this.element from myFunction for chaining jQuery methods to ; call _canvasScrollbar.prototype.myFunction using .data(pluginName) with dot notation $("div").canvasScrollbar().data("canvasScrollbar").myFunction()

 (function ($) { var pluginName = "canvasScrollbar"; function _canvasScrollbar(c, s) { $(c).data(pluginName, s) return c } _canvasScrollbar.prototype.myFunction = function(){ console.log("Yey!"); // return `this.element` : `this` for chaining jQuery // methods to `$(element).data("options").myFunction()` return this.element }; $.fn[pluginName] = function (s) { var a = { handleColor: "#ccc", scroll: "horizontal", sliderColor: "#eee", // set `myFunction` as property of `a`:`settings` myFunction: _canvasScrollbar.prototype.myFunction, // set `element` as `this` element: this }; var settings = $.extend(a, s); return this.each(function () { new _canvasScrollbar(this, settings) }) } })(jQuery); $("div").canvasScrollbar().data("canvasScrollbar").myFunction().css("color", "blue") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div>abc</div>