How to call a jquery function?

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?

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

Answer 1

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>

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

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!