我這個小jQuery插件：使用jQuery方法的回調參數

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"><!-- 
(function($){ 
    $.fn.foo = function(options){ 
     var options = $.extend({ 
      text: "Foo!", 
      }, options 
     ); 

     this.prepend(
      $("<span></span>").text(options.text) 
     ).css({color: "white", backgroundColor: "black"}); 

     return this; 
    }; 
})(jQuery); 


$(function(){ 
    $("div").foo().foo({text: "Bar!"}).css({border: "1px solid red"}); 
}); 
//--></script> 
</head> 
<body> 

<div>One</div> 
<div>Two</div> 
<div>Three</div> 

</body> 
</html>

現在我想改善它，所以你能夠控制在文本得到通過提供一個回調函數的方式插入：

$(function(){ 
    var optionsFoo = { 
     text: "Foo!", 
     insertionCallback: $.append 
    } 
    var optionsBar = { 
     text: "Bar!", 
     insertionCallback: $.prepend 
    } 
    $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"}); 
});

（請記住，這只是示例代碼。我想學的技術，而不是解決問題。）

我可以傳遞一個jQuery的方法作爲參數，並使用插件裏面我鏈中間？如果是這樣，語法是什麼？如果不是，那麼推薦的替代方案是什麼？

更新：myprogress到目前爲止

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"><!-- 
(function($){ 
    $.fn.foo = function(options){ 
     var options = $.extend({ 
      text: "Foo!", 
      insertionCallback: $.append 
      }, options 
     ); 

     options.insertionCallback.call(this, // options.insertionCallback is undefined 
      $("<span></span>").text(options.text) 
     ).css({color: "white", backgroundColor: "black"}); 

     return this; 
    }; 
})(jQuery); 


$(function(){ 
    var optionsFoo = { 
     text: "Foo!", 
     insertionCallback: $.append 
    } 
    var optionsBar = { 
     text: "Bar!", 
     insertionCallback: $.prepend 
    } 
    $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"}); 
}); 
//--></script> 
</head> 
<body> 

<div>One</div> 
<div>Two</div> 
<div>Three</div> 

</body> 
</html>

來源

2010-07-09 Álvaro González

當然可以，JavaScript是真的動態：

this.prepend(
     $("<span></span>").text(options.text) 
    ).css({color: "white", backgroundColor: "black"});

您可以與您的選項傳遞對象jQuery函數替換本地調用this.prepend()作爲參數。

由於大多數jQuery方法表現在當前的一組元素（在你的插件this對象），你需要使用apply或call，使其工作。這樣，您可以使用當前的this對象作爲上下文，調用options.insertionCallback函數。

喜歡的東西：

options.insertionCallback.call(this, // pass the current context to the jQuery function 
     $("<span></span>").text(options.text) 
    ).css({color: "white", backgroundColor: "black"});

編輯

但是你不能直接從$命名空間訪問jQuery方法，你需要構建一個jQuery對象訪問它的方法，或者乾脆用$.fn.functionName正如Nick Craver指出的那樣。

alert($.prepend); // won't alert the function 

alert($.fn.prepend); // will alert the function

來源

2010-07-09 10:13:26

能否請您詳細闡述您的例子多一點？我無法掌握確切的語法。我得到* options.insertionCallback是不確定的*不管我做什麼。 – 2010-07-09 10:40:05

@ÁlvaroG. Vicario：這是因爲$ .prepend（或$ .append）未定義。我在答案中詳細闡述了一點。 – 2010-07-09 10:43:25

您可以直接訪問這些方法，'$ .fn.prepend';） – 2010-07-09 10:44:04

像這樣進行擴展：

(function($){ 
    $.fn.foo = function(options){ 
     var options = $.extend({ 
      text: "Foo!", 
      cb: null 
      }, options 
     ); 

     if($.isFunction(options.cb)){ 
      // optimal also pass parameters for that callback 
      options.cb.apply(this, []); 
     } 

     this.prepend(
      $("<span></span>").text(options.text) 
     ).css({color: "white", backgroundColor: "black"}); 

     return this; 
    }; 
})(jQuery);

我真的不明白你的意思與

我可以傳遞一個jQuery的方法作爲參數，並使用插件裏面在一個鏈的中間？

爲什麼要通過jQuery method？它已經在那裏，所以你可以打電話給任何jQuery object。

來源

2010-07-09 10:14:40 jAndy

我的意思是能夠在插件內執行此操作：'this.insertionCallback（$（「」）.text（options.text））.css（{color：「white」，backgroundColor：「black」 }）;' – 2010-07-09 10:35:17

你也可以做基礎，以保持它的簡單，像這樣的字符串：

(function($){ 
    $.fn.foo = function(options){ 
    var options = $.extend({ 
     text: "Foo!", 
     insertionCallback: "append" 
     }, options 
    ); 
    return this[options.insertionCallback]($("<span></span>").text(options.text)) 
       .css({color: "white", backgroundColor: "black"}); 
    }; 
})(jQuery);

然後你的電話是這樣的：

$(function(){ 
    var optionsFoo = { 
    text: "Foo!", 
    insertionCallback: "append" 
    } 
    var optionsBar = { 
    text: "Bar!", 
    insertionCallback: "prepend" 
    } 
    $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"}); 
});

You can test it here，這將允許您使用append， prepend，html和text，給你幾個選項來設置的內容。在這種情況下，我們只是利用JavaScript作爲動態語言，其中this.prepend(something)等於this["prepend"](something)。

來源

2010-07-09 10:54:04

整潔！ JavaScript語法將永遠不會停止驚奇我...... – 2010-07-09 11:08:19

不回答你的問題，但推薦的風格是：

<script type="text/javascript"> 

    //this 
    jQuery(function($) { 
    //... stuff using the jQuery lib, using the $ 
    }); 

    //not this 
    $(function() { 
    //... 
    }); 

    //or this 
    (function($) { 
    //... 
    })(jQuery); 

</script>

來源

2010-07-09 10:58:38 yfeldblum

最後一個是「自定義別名在插件代碼」在http://docs.jquery.com/Plugins/Authoring#Custom_Alias描述，但我注意到別名在頁面代碼，我不知道。 – 2010-07-09 11:49:48

對，這是頁碼。插件代碼應該總是使用最後一個樣式示例而不是第一個。 – yfeldblum 2010-07-09 12:58:11

使用jQuery方法的回調參數

更新：myprogress到目前爲止

回答

相關問題