如何調用jquery函數？

我有以下的jQuery插件：如何調用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()，但都沒有工作。

來源

2015-09-06 JoeTidee

您需要在某處存儲新的_canvasScrollbar實例。使用jQuery最簡單的方法是使用data方法。

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

現在您可以使用data方法訪問您的實例。然後調用該函數。

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

來源

2015-09-06 00:36:58 Endel

有兩種類型的jQuery '插件' 的：plugins，這通常是無狀態的，和widgets。您似乎想要一個widget，但您將其創建爲plugin。請參閱：

雖然大多數現有的jQuery插件是無狀態 - 也就是我們所說的他們的元素，這是我們與插件相互作用的程度 - 有一大套的功能，不適合插入的基本插件模式。

爲了填補這個空白，jQuery UI已經實現了更先進的插件系統。新系統管理狀態，允許通過單個插件暴露多個功能，並提供各種擴展分。這個系統被稱爲Widget Factory，並作爲jQuery UI 1.8的一部分公開爲jQuery.widget作爲 ;但是，它可以獨立於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/

來源

2015-09-06 01:01:26

嘗試限定pluginName變量："canvasScrollbar"; setiing _canvasScrollbar.prototype.myFunction,this在a;定義settings對象爲$.extend()的結果;設置c.data(pluginName)與s對象在_canvasScrollbar內;返回this.element從myFunction鏈接jQuery方法;使用.data(pluginName)用點符號打電話_canvasScrollbar.prototype.myFunction$("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>

來源

2015-09-06 01:18:59 guest271314

如何調用jquery函數？

回答

相關問題