閱讀完[程式][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

arrow
arrow
    全站熱搜

    阿基 發表在 痞客邦 留言(0) 人氣()