jQuery Widget，我如何通過作爲小部件選項的jQuery功能

我正在創建一個用於切換元素可見性的基本小部件。要初始化，功能如下：jQuery Widget，我如何通過作爲小部件選項的jQuery功能

$('button').collapsable({ 
    target:'#targetID' 
});

我希望能夠在傳遞一個jQuery的功能，如舉例來說，這樣的：

$('button').collapsable({ 
    target:$(this).next(); 
});

簡單的例子，關鍵是我想能夠根據需要傳遞更復雜的功能。我遇到的麻煩是如何在小部件中調用該函數以在其自身上調用該函數。

如（代碼不正確的遠程）

toggle:function(){ 
    // i want it to firelike [this widget instances element].next(); 
    this.call[this.options.target] 
}

但我不知道如何編寫工作。任何想法表示讚賞。在此先感謝！

來源

2012-01-13 ted.goodridge

由於@cwolves說，你需要傳遞一個函數引用。您可以實現一些邏輯來判斷你是否在尋找一個功能或選擇，並採取適當的行動：

(function($) { 
    $.fn.collapsible = function(options) { 
     var self = this; 
     var toggle = function() { 
      /* options.target is a selector: */ 
      if (typeof options.target === "string") { 
       $(options.target).toggle(); 
      } else if (typeof options.target === "function") { 
       $(options.target.call(this)).toggle(); 
      } 
     }; 

     this.click(toggle); 
    }; 
})(jQuery);

然後，你可以使用這樣的：

$("#button").collapsible({ 
    target: "#foobar" 
}); 

$("#button2").collapsible({ 
    target: function() { 
     console.dir(this); 
     return $(this).next(); 
    } 
});

例子：http://jsfiddle.net/LVsys/

來源

2012-01-13 20:48:35

有一個需要注意的地方 - 它是用在一個小部件工廠小部件中的，並且在jQuery論壇上的一個響應有一個小部件內部的稍微改變的代碼： toggle: function(){ var target; if ($.isFunction(this.options.target)) { target = this.options.target.call(this.element.get()); } else { target = $(this.options.target); } ... } – 2012-01-17 15:06:36

通過實際的功能，而不是所謂的功能（即刪除()）：

fn : $.fn.next 

, toggle : function(){ 
    this.options.fn.apply(this.options.target, arguments); 
}        ^
            | 
    domNode ----------------------+

來源

2012-01-13 20:29:18

jQuery Widget，我如何通過作爲小部件選項的jQuery功能

回答

相關問題