[程式][JQuery] 自己的第一個JQuery Plugin! Hello World。(Part_02)

閱讀完[程式][JQuery] 自己的第一個JQuery Plugin! Hello World。(Part_01) 基本上的概念應該有比較清楚了。

接下來我希望能讓使用的人可以自己設定一些參數，因此我需要一個讓使用者能設定的選項。就像其他的 Plugin 一樣，我們讓我們的 mytoolbox 可以接受一個 option物件：

mytoolbox.js

;(function( $ ){

$.fn.mytoolbox = function(option) {

          var _defaultSettings = {
                    'var_0'                    : '0',
                    'var_1'                    : '1',
                    'var_2'                    : '2'

                };
           var _settings = $.extend(_defaultSettings, option);

return this.each(function() {

alert(_settings.var_0);

});
};

})(jQuery)

index.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mytoolbox.js"></script>
<script>
$(document).ready( function() {
$('#myDIV').mytoolbox({

'var_1' : "Hello",
'var_2' : "Titan"

});
})
</script>
</head>
<body>
<div id="myDIV">Hello jQuery Plugin</div>
</body>
</html>

透過上面程式碼的表達，在.js的檔案當中我新增了 var _defaultSettings 來做為初始值的設定，在index.html當中，我把參數丟進去 'var_1' : "Hello",'var_2' : "Titan"，在來最重要的一段var _settings = $.extend(_defaultSettings, option);，其實他是指用傳入的option來複寫_defaultSettings，然後把結果傳給_settings物件。這樣就可以達到傳入數值提供承是使用。

注意，他這個初始化的物件_defaultSettings，名稱並沒有強制規定，所以你會看到很多不同的名稱，傳入的option也是一樣。

在上面這個範例裡面，他會顯示 0 因為我並沒有傳入相關的變數去修改他，所以他會維持初始的狀況。你可以試著修改alert(var_0);，把他改為alert(var_1);，看看會有什麼結果。

範例檔案下載：http://www.megaupload.com/?d=FV4NE55L