[程式][JQuery] 自己的第一個JQuery Plugin! Hello World。(Part_04)。如何在plugin中加入事件！ @ 四處流浪的阿基。I am Vagrant Walker

前面除了第三章，我覺得交代的比較鳥，我只能說我能力不足，只能把它當作公式記下來。這裡還是先說一聲抱歉。

接下來就是要在裡面加上Event。像是click(滑鼠點一下)mouseover(滑鼠移過)之類的事件。

這次我拿Part_02的範例來說明。

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)

上面是mytoolbox.js的範例。

要使用Event，就要透過JQuery的 .bind()，詳細可以參考http://api.jquery.com/bind/。

這個方法要傳入兩個參數他的公式為：

.bind( eventType [, eventData] , handler(eventObject) )

eventType:可以填入的值有很多 blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。主要是用來說明你是要綁定什麼樣的事件。詳細可以點進去看。

eventData:是選填的，不一定要有。這些資料是要傳入handler(

handler:就是妳要他做的事情。

所以bind就是把你所選的Object綁住eventType的事件，當你運作eventType的事件像是click或是其他的動作，那他會去執行hander，至於eventData，如果你有要傳入值，才需要設定，沒有的話就不用了。

mytoolbox2.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() {
              $(this).bind('click',function(){ alert(_settings.var_0)})
         });
   };

})(jQuery)

index2.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="mytoolbox2.js"></script>
<script>
             $(document).ready( function() {
                      $('#myDIV').mytoolbox();

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

像這樣子，如果你要事件是要做很多事情的話，那你的眼睛就會看到花掉，所以我再把mytoolbox2.js她稍微改一下。這樣也比較好維護。

;(function( $ ){

$.fn.mytoolbox = function(option) {

          var _defaultSettings = {
                 'var_0'    :   '0',
                 'var_1'    :   '1',
                 'var_2'    :   '2',
                 '_bind'    :   'click',
                 '_bind_fun' :   function(){
                      alert(_settings.var_0);
                 }

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

          return this.each(function() {

              $(this).bind(_settings._bind, _settings._bind_fun);
         });
   };

})(jQuery)

把他提到上面去，但是放到預設傳入值，感覺上又不是很好，也容易產生誤解。所以我可以直接整個把他提出來。

這樣的方式以後要維護也比較容易。

範例程式下載：http://www.megaupload.com/?d=HOX28LCF