開始之前先說一些基本的概念。

首先,你要先新增一個function property在 jQuery.fn的物件後面。而這個function的名稱,就是你的plugin 的名稱。

$.fn.myPlugin = function() {

  // 你的Plugin內容寫在這裡面。

};

 

但是請稍等一下,我們在JQuery中最常見的$符號呢?他一樣還是可以用,但是為了避免與其他像是JQuery的大型函式衝突,所以我們一般都會改寫程下面這樣。

(function( $ ){

        $.fn.myPlugin = function() {

             // 你的Plugin內容寫在這裡面。

        }

})(jQuery);

 

接下來就可以開始編寫plug的內容了。但是在這裡有一個比較重要的觀念要先說。

(function( $ ){

        $.fn.myPlugin = function() {
               //  there's no need to do $(this) because
               // "this" is already a jquery object
               // $(this) would be the same as $($('#element'));

              this.fadeIn('normal', function(){
                        // the this keyword is a DOM element
              })

        }

})(jQuery);

 

$('#element').myPlugin();

上面那個$.fn.myPlugin裡面的 this 就是以經是參照到他的父元件。換個方式說:函式裡的 this 關鍵字,它會指向一個 jQuery 物件;而這個 jQuery 物件則是我們要指定的,可以看後面的範例,可以了解比較多。

了解以上之後,就可以正式開始正式的第一步了。

 

Plugin 樣版

上面寫的看不懂沒關西,寫 jQuery 的 Plugin 最快的方法就是拿現成的 Plugin 來改,只是在那麼多的 Plugin 中怎麼找到好的範例呢?別擔心,這邊我提供一個最簡單的範例樣版:

(function( $ ){

    $.fn.mytoolbox = function() {
               return this.each(function() {    });
    };

})(jQuery)

首先, mytoolbox 就是我們的 plugin 名稱,利用 $.fn(JQuery.fn) 我們可以將它註冊為 jQuery 的 plugin 。然後我們把 $.fn.mytoolbox 指向一個匿名函式 (anonymous function) ,又稱為 callback ;而這個 callback 的內容很簡單,就是利用 jQuery 的 each 方法,來一一執行對應的動作。簡而言之,裡面的 this.each(function() { }); ,如果你寫過C語言,就有點像main()一樣,是所謂的主體。這個plugin被呼叫執行,就是會從這this.each開始運作。

簡易範例

mytoolbox.js

(function( $ ){

$.fn.mytoolbox = function() {
       return this.each(function() {

             alert("this.innerHTML:"+this.innerHTML);

       });
};

})(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();
            })
        </script>
    </head>
    <body>
        <div id="myDIV">Hello jQuery Plugin</div>
    </body>
</html>

這個範例就可以說明上面所說的意思。程式執行的時候,就是會先去跑 this.each 的函數。再看看裡面 alert(this.innerHTML)的this,參照到index.html,我們在第8行$('#myDIV').mytoolbox();所描述的。那個this.innerHTML的this是指向myDIV這個tag。所以在裡面this不用再加上$符號了

但是這邊很重要,請注意看一下。雖然他是指向myDIV這個tag,你要是想用this.html(),這樣直接去顯示div的內容,是沒辦法的,因為this在這比較精確的說,是一個Javascript Object,一般的javascript 並沒有.html()這個方法。所以你想在裡面使用jQuery的語法,還是得要這麼寫。

mytoolbox.js

(function( $ ){

$.fn.mytoolbox = function() {
            return this.each(function() {

                   alert("$(\"#\"+this.id).html():"+$("#"+this.id).html());
                    //或
                   alert("$(this).html():"+$(this).html());

            });
};

})(jQuery)

 

完整範例下載:http://www.megaupload.com/?d=OW810VJK

創作者介紹

四處流浪的阿基。I am Vagrant Walker

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