Question

我有以下jQuery插件：

(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);

我像这样初始化它：

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

但是，一旦插件初始化，我该如何调用函数myFunction？

P.S。我尝试了$(".myDiv").canvasScrollbar("myFunction")和sc.myFunction()，但都没有工作。

Answer 1

您需要在某处存储新的_canvasScrollbar实例。使用jQuery进行此操作的最简单方法是使用data方法。

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

现在，您可以使用data方法访问您的实例。然后调用该函数。

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

Answer 2

你有两种类型的jQuery'插件'：plugins，通常是无状态的，widgets。您似乎想要widget，但您要将其创建为plugin。参见：

虽然大多数现有的jQuery插件都是无状态的 - 也就是说，我们称之为   他们在一个元素上，这是我们与...的互动程度   插件 - 有一大堆功能不适合   基本的插件模式。

为了填补这个空白，jQuery UI实现了更高级的功能   插件系统。新系统管理状态，允许多种功能   通过单个插件公开，并提供各种扩展   点。这个系统被称为Widget Factory，并被公开为   jQuery.widget作为jQuery UI 1.8的一部分;但是，它可以使用   独立于jQuery UI。

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

要创建窗口小部件，您可以这样做：

$.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>

通过这种方式，您可以访问其他功能，例如sc.canvasScrollbar('instance')，选项设置等。

请参阅：https://jqueryui.com/widget/

Answer 3

尝试定义pluginName变量："canvasScrollbar";在_canvasScrollbar.prototype.myFunction处选择this，a;将settings对象定义为$.extend()的结果;在c内设置.data(pluginName) s _canvasScrollbar个对象;从this.element返回myFunction以将jQuery方法链接到;使用带有点符号_canvasScrollbar.prototype.myFunction

的.data(pluginName)来呼叫$("div").canvasScrollbar().data("canvasScrollbar").myFunction()

＆＃13;

(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")

＆＃13;

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

＆＃13;

如何调用jquery函数？

3 个答案: