邊做邊學jQuery系列13-打造自己的jQueryPlugin @ 動物園旅遊

以下轉錄自：http://msdn.microsoft.com/zh-tw/asp.net/dd722588.aspx

看過眾多好用的jQuery Plugin，應該能體會Plugin的精神--將常用邏輯封裝成一個Method，日後只需多載入一個js，就可以隨時享用。這樣的概念對資深的程式設計人員來說一點都不陌生，跟元件化、模組化的理念是一致的，而在我們開發專案的過程中，也常有將通用邏輯提取出成為共用元件、函數的情境，在jQuery 網頁設計上，我們可以透過自製Plugin完成。

【基本樣版】

要自已動手建立一個jQuery Plugin，一點都不困難。首先，我們只需新增一個js檔案，先寫好以下的樣版:

檢視原始文字複製到剪貼簿print?

(function($) {
$.fn.extend({
method1: function(options) {
//...code...
},
method2: function(options) {
//...code...
}
});
})(jQuery);

(function($) {
    $.fn.extend({
        method1: function(options) {
            //...code...    
        },
        method2: function(options) {
            //...code...
        }
     });
})(jQuery);

這個樣版本用了幾個有趣的技巧，值得好好介紹一下。首先，我們可以在最外圈看到一個(function($) { ... })(jQuery);的寫法，我叫它可拋式匿名函數(補充說明)，主要用意在於避免留下任何全域(Global)性質的函數或變數，因為我們無法掌握js如何被別人引用，會與哪些js合併使用，難保不會發生跟別的js取到同名同姓的函數或變數。因此，我們把所有的函數及變數宣告都包在一個function() { ... }中，以區域變數性質存在，就不會"撞名"的困擾發生。

但是，如果宣告成區域變數，等匿名函數結束，區域變數不就消失了? 我們如果在匿名函數中對某個元素掛了事件函數，該事件函數中又參考了這個區域變數，豈不就出包了?

答案是，不會! 神奇的Closure特性會避免這種狀況。用一個例子來說明:

檢視原始文字複製到剪貼簿print?

(function() {
var x = 1;
$("span").click(function() {
alert("In event: " + x);
});
})();
alert("Out of scope: " + typeof x);

(function() {
   var x = 1;
   $("span").click(function() {
      alert("In event: " + x);
   });
})();
alert("Out of scope: " + typeof x);

在這個有趣的例子裡，會看到Out of scope: undefined的結果，但按下span，卻會看到In event: 1。換句話說，Javascript在宣告$("span").click(function() { ... });時，一併記錄了在範圍之外的x變數，即便x是區域變數，在匿名函數結束時就該消失，但因被其中額外宣告的匿名函數引用，便被保存下來。 Closure挺奧妙的，有興趣的人可以再看看這篇補充說明。

回到正題，由於jQuery允許透過jQuery.noConflict()函數將$符號留給其他Javascript Framework使用，因此我們無法確定Plugin被呼叫時，是否$仍等同於jQuery()，一種解決方法是不要用$，一律乖乖寫jQuery；而另外一個做法，就如同上面程式示範，匿名函數宣告接入一個參數$，而在呼叫匿名函數時，順便傳入jQuery當作參數。換句話說，在此匿名函數的範圍中，$就一定等同於外部傳入的jQuery，不必再擔心是否啟用了jQuery.noConflict()。

解釋完外圈匿名函數的用意，我們來看看如何新增像addClass()、removeClass()一樣可以用在jQuery物件上的Method。我們可以直接宣告如: $.fn.myMethod = function() { alert($(this).html()); };。接著jQuery物件就多了myMethod()可用，如: $("span").myMethod(); ，這是最簡單的方法。但實務上，我們會用extend()達成同樣目標: $.fn.extend({ myMethod: function() { alert($(this).html()) } });。extend()也常用在參數處理上，稍後再詳細介紹。

【小試身手】

了解基本樣版後，讓我們來搞一個小範例，寫兩個自訂函數，一個讓元素上下跳(jump())，另一個讓元素左右搖(shake())，此處用先前介紹過的動畫技巧來達成。有個小撇步，我們要做出跳動及搖動的並不是目標元素，而是另外建出position=absolute的分身，而原有元素的visibility則設為hidden(不用display=none是因為要保留其佔用空間，不然會打亂原有配置)，待分身表演退場後再現身。分身元素的position設成 absolute，top及left則由目標元素的所在位置取得，接著就可以用animate()去調marginTop，先0.1秒向上 10px，0.1秒向下20px，再0.1秒向上10px回到原位。做完效果後，分身移除，本尊還原，一切恢復正常。程式會像以下的樣子:

【小試身手】

了解基本樣版後，讓我們來搞一個小範例，寫兩個自訂函數，一個讓元素上下跳(jump())，另一個讓元素左右搖(shake())，此處用先前介紹過的動畫技巧來達成。有個小撇步，我們要做出跳動及搖動的並不是目標元素，而是另外建出position=absolute的分身，而原有元素的visibility則設為hidden(不用display=none是因為要保留其佔用空間，不然會打亂原有配置)，待分身表演退場後再現身。分身元素的position設成absolute，top及left則由目標元素的所在位置取得，接著就可以用animate()去調marginTop，先0.1秒向上10px，0.1秒向下20px，再0.1秒向上10px回到原位。做完效果後，分身移除，本尊還原，一切恢復正常。程式會像以下的樣子:

檢視原始文字

檢視原始文字複製到剪貼簿print?

(function($) {
$.fn.extend({
jump: function() {
&nicrosoft.com/zh-tw/asp.net/dd722588.aspx#" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">複製到剪貼簿print?

(function($) {
$.fn.extend({
jump: function() {
var target = this;
//建立分身
var shadow = target.clone().appendTo("body");
var origVis = target.css("visibility");
//隱藏本尊, 但要保留其佔用空間
target.css("visibility", "hidden");
shadow //設定為絕對座標，以便任意移動
&bsp; var target = this;
//建立分身
var shadow = target.clone().appendTo("body");
var origVis = target.css("visibility");
//隱藏本尊, 但要保留其佔用空間
target.css(
position: "absolute",
top: target.offset().top,
left: target.offset().left,
margin: "0px"
}) //進行三次位移ss="string">"visibility", "hidden");
shadow //設定為絕對座標，以便任意移動
.css({
position: "absolute",
top: target.offset().top,
left: target.offset().left,
&
.animate({ marginTop: "-=10px" }, 100)
.animate({ marginTop: "+=20px" }, 100)
.animate({ marginTop: "-=10px" }, 100, function() {
//本尊重現
&nbnbsp; margin: "0px"
}) //進行三次位移
.animate({ marginTop: "-=10px" }, 100)
.animate({ marginTop: "+=20px" }, 100)
.animate({ marginTop: "-=10px" }, 100, function() {
//本尊重現
target.css("visibility", origVis);
//狡兔死走狗烹，分身移除
$(this).remove();
});
}, sp; target.css("visibility", origVis);
//狡兔死走狗烹，分身移除
$(this).remove();
});
},
shake: function() {
var target = this;
var shadow = target.clone().appendTo("body");
var origVis = target.css("visibility");
target.css("visibility", "hidden");
shadow
.css({
shake: function() {
var target = this;
var shadow = target.clone().appendTo("body");
var origVis = target.css("visibility");
target.css("visibility", "hidden");
shadow
.css({
position: "absolute",
top: target.offset().top,
left: target.offset().left,
margin: "0px"
&nb; position: "absolute",
top: target.offset().top,
left: target.offset().left,
margin: "0px"
})
.animate({ marginLeft: "-=10px" }, 100)
&nbssp; })
.animate({ marginLeft: "-=10px" }, 100)
.animate({ marginLeft: "+=20px" }, 100)
.animate({ marginLeft: "-=10px" }, 100, function() {
target.css("visibility", origVis);

"+=20px"

.animate({ marginLeft: "-=10px" }, 100, function() {
target.css("visibility", origVis);
$(this).remove();
});
}
});
})(jQuery);

(function($) {    $.fn.extend({        jump: function() {            var target = this;            //建立分身            var shadow = target.clone().appendTo("body");            var origVis = target.css("visibility");            //隱藏本尊, 但要保留其佔用空間            target.css("visibility", "hidden");            shadow //設定為絕對座標，以便任意移動                .css({                    position: "absolute",                    top: target.offset().top,                    left: target.offset().left,                    margin: "0px"                }) //進行三次位移                .animate({ marginTop: "-=10px" }, 100)                .animate({ marginTop: "+=20px" }, 100)                                    $(this).remove();  
                });          
        }  
    });  
})(jQuery);

(function($) {
    $.fn.extend({
        jump: function() {
            var target = this;
            //建立分身
            var shadow = target.clone().appendTo("body");
            var origVis = target.css("visibility");
            //隱藏本尊, 但要保留其佔用空間
            target.css("visibility", "hidden");
          .animate({ marginTop: "-=10px" }, 100, function() {                    //本尊重現                    target.css("visibility", origVis);                    //狡兔死走狗烹，分身移除                    $(this).remove();                });        },        shake: function() {            var target = this;            var shadow = target.clone().appendTo("body");            var origVis = target.css("visibility");            target.css("visibility", "hidden");            shadow                 .css({                    position: "absolute",                    top: target.offset().top,                    left: target.offset().left,                    margin: "0px"                })                .animate({ marginLeft: "-=10px" }, 100)                .animate({ marginLeft: "+=20px" }, 100)                .animate({ marginLeft: "-=10px" }, 100, function() {                    target.css("visibility", origVis);                    $(this).remove();                });                }    });})(jQuery);

前端程式我們放入兩個DIV測試效果:

檢視原始文字複製到剪貼簿print

前端程式我們放入兩個DIV測試效果:

檢視原始文字複製到剪貼簿print?

<html >
<head>
<title></title>
<script src="https://blog.xuite.net/coke750101/networkprogramming/"jquery-1.3.2.js" type="text/javascript"></script>
<script src="https://blog.xuite.net/coke750101/networkprogramming/?

<html >
<head>
<title></title>
<script src="https://blog.xuite.net/coke750101/networkprogramming/"jquery-1.3.2.js" type="text/javascript"></script>
<script src="https://blog.xuite.net/coke750101/networkprogramming/"jquery.myPlugin.1.js" type="text/javascript"></script>
<style type="text/css">
div { width: 50px; height: 50px; margin: 20px; }
</style>
</head>
<body>
<div id="square1" style="background-color: Blue;">
</div>
<div id="square2" style="background-color: Red;">
</div>
<script type="text/javascript">
$(function() {
$("#square1").jump();
$("#square2").shake();
});
</script>
</body> ss="string">"jquery.myPlugin.1.js" type="text/javascript"></script>
<style type="text/css">
div { width: 50px; height: 50px; margin: 20px; }
</style>
</head>
<body>
<div id="square1" style="background-color: Blue;">
</div>
<div id="square2" style="background-color: Red;">
</div>
<script type="text/javascri
</html>

<html ><head>    <title></title>    <script src="https://blog.xuite.net/coke750101/networkprogramming/jquery-1.3.2.js" type="text/javascript"></script>    <script src="https://blog.xuite.net/coke750101/networkprogramming/jquery.myPlugin.1.js" type="text/javascript"></script>    <style type="text/css">    div { width: 50px; height: 50px; margin: 20px; }    </style></head><body><div id="square1" style="background-color: Blue;"></div><div id="square2" style="background-color: Red;"></div><script type="text/javascript">    $(function() {        $("#square1").jump();        $("#square2").shake();    });</script></body></html>

程式是可行了，但jump()與shake()的程式碼只差在animate時移動的CSS屬性，重覆性極高，程式碼重複冗長不夠簡潔，未來若要維護修改得一次改兩個地方，故我們進行簡單的重構，提取出共用函數。

$(function() {

$("#square1").jump();

$("#square2").shake();

<html >
<head>
    <title></title>
    <script src="https://blog.xuite.net/coke750101/networkprogramming/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="https://blog.xuite.net/coke750101/networkprogramming/jquery.myPlugin.1.js" type="text/javascript"></script>
    <style type="text/css">
    div { width: 50px; height: 50px; marg>                    
檢視原始文字複製到剪貼簿print?




程式是可行了，但jump()與shake()的程式碼只差在animate時移動的CSS屬性，重覆性極高，程式碼重複冗長不夠簡
潔，未來若要維護修改得一次改兩個地方，故我們進行簡單的重構，提取出共用函數。




            
        




(function($) {  
    function moveElem(target, moveAttr) {  
        //建立分身  
        var shadow = target.clone().appendTo("body");  
        var origVis = target.css("visibility");  
        //將原元素藏起來  
        target.css("visibility", "hidden");  
 &ndn.microsoft.com/zh-tw/asp.net/dd722588.aspx#" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">檢視原始文字複製
到剪貼簿print?


(function($) {  
    function moveElem(target, moveAttr) {  
        //建立分身  
        var shadow = target.clone().appendTo("body");  
        var origVis = target.css("visibility");  
        //將原元素藏起來  
        target.css("visibility", "hidden");  
        //建立位移的animiate()參數  
        var opt1 = {}, opt2 = {};  
        opt1[moveAttr] = "-=10px"bsp;      //建立位移的animiate()參數  
        var opt1 = {}, opt2 = {};  
        opt1[moveAttr] = "-=10px";  
        opt2[moveAttr] = "+=20px";  
        shadow  //設定為絕對座標，以便任意移動  
            .css({  
                position: "absolute",  
                top: target.offset().top,  
                left: target.offset().left,  
                margin: "0px"  
            }) //進行三次位移  
            .animate(opt1, 100)  
            .animate(opt2, 100)  
            .animate(opt1, 100, function() { &;  
        opt2[moveAttr] = "+=20px";  
        shadow  //設定為絕對座標，以便任意移動  
            .css({  
                position: "absolute",  
                top: target.offset().top,  
                left: target.offset().left,  
                margin: "0px"  
            }) //進行三次位移  
            .animate(opt1, 100)  
            .animate(opt2, 100)  
            .animate(opt1, 100, function() {  
                //本尊重現  
                target.css("visibility", origVis);  nbsp;
                //本尊重現  
                target.css("visibility", origVis);  
                //分身移除  
                $(this).remove();  
            });  
    }  
  
    $.fn.extend({  
        jump: function() {  
            moveElem(this, "marginTop");  
        },  
        shake: function() {  
            moveElem(this, "marginLeft");  
        }  
    });  
})(jQuery);  
(function($) {    function moveElem(target, moveAtt;
                //分身移除  
                $(this).remove();  
            });  
    }  
  
    $.fn.extend({  
        jump: function() {  
            moveElem(this, "marginTop");  
        },  
        shake: function() {  
            moveElem(this, "marginLeft");  
        }  
    });  
})(jQuery);  

(function($) {
    function moveElem(target, moveAttr) {
        //建立分身
        var shadow = target.clone().appendTo("body");
        var origVis = target.css("visibility");
        //將原元素藏起來
        target.css("visibility", "hidden");
        //建立位移的animiate()參數
        var opt1 = {}, opt2 = {};
        opt1[moveAttr] = "-=10px";
        opt2[moveAttr] = "+=n>
【錦上添花】
基本功能有了，但目前我們的Plugin只提供了固定的移動值，如果開發者想要跳高一點或搖大力一點怎麼辦? 為了提供給Plugin使用者更大的彈性，我們決定仿效其他的專業Plugin，允許在呼叫時傳入額外參數，以控制動畫行為。
一般來說，我們會用一個匿名物件當成參數的載具，Plugin在接收後，會逐一取出物件上的各屬性取得參數值。但有個小問題，如果可以操控的參數有20個，開發者可能只想修改其中3個，其餘17個則沿用預設值，此時匿名物件上應該只要設定三個指定的屬性即可，沒必要20個都註明。這種有給值就用指定值，沒給就用預設值的設計架構，jQuery提供了一個好用的函數extend()輕鬆達成目標。
jQuery.extend()的運作結果有點抽象，故直接以實例說明。以jQuery.extend(objA, objB)為例，你可以想像成objA與objB各有一些屬性(方法也會比照處理，在此只提屬性)，extend()會將objB有而objA沒有的屬性加到objA裡，如果objB裡的某個屬性，objA裡剛好也有同名屬性，則會用objB的屬性值覆寫。objA最後就是整合結果，或者也可以由var objC = jQuery.extend(objA, objB)取得整合結果。(objA與objC內容相同)
jQuery.extend()可以支援多個物件屬性/方法的整併，並不限兩個。例如: jQuery.extend(objA, objB, objC)，objB, objC多出的屬性都會加到objA裡，如果有objA已有同名屬性，則會用objC/objB裡的屬性值覆寫之，若objB, objC都有同名屬性，則會排在後方的objC為準(後令壓前令)。

【錦上添花】

基本功能有了，但目前我們的 Plugin只提供了固定的移動值，如果開發者想要跳高一點或搖大力一點怎麼辦? 為了提供給Plugin使用者更大的彈性，我們決定仿效其他的專業Plugin，允許在呼叫時傳入額外參數，以控制動畫行為。n style="font-size: 12pt;">jQuery.extend()很常用來處理Plugin或函數的傳入參數，比如函數用到的參數有10個，但大部分情況呼叫時只需要指定其中一兩個，其餘用預設值。我們便可在函數中宣告一個預設值物件objDefault，裡面先放上10個屬性當預設值,，呼叫函數時則傳入objOption，裡面只放要特別指定的屬性值，經過var objSetting = jQuery.extend(objDefault, objOption)之後，我們得到10個"有指定用指定值，沒指定用預設值"的屬性群組供後續使用。舉個例子:

檢視原始文字複製到剪貼簿

一般來說，我們會用一個匿名物件當成參數的載具，Plugin在接收後，會逐一取出物件上的各屬性取得參數值。但有個小問題，如果可以操控的參數有20個，開發者可能只想修改其中3個，其餘17個則沿用預設值，此時匿名物件上應該只要設定三個指定的屬性即可，沒必要20個都註明。這種有給值就用指定值，沒給就用預設值的設計架構，jQuery提供了一個好用的函數extend()輕鬆達成目標。

jQuery.extend()的運作結果有點抽象，故直接以實例說明。以jQuery.extend(objA, objB)為例，你可以想像成objA與objB各有一些屬性(方法也會比照處理，在此只提屬性)，extend()會將objB有而objA沒有的屬性加到objA裡，如果objB裡的某個屬性，objA裡剛好也有同名屬性，則會用objB的屬性值覆寫。objA最後就是整合結果，或者也可以由var objC = jQuery.extend(objA, objB)取得整合結果。(objA與objC內容相同)

jQuery.extend() 可以支援多個物件屬性/方法的整併，並不限兩個。例如: jQuery.extend(objA, objB, objC)，objB, objC多出的屬性都會加到objA裡，如果有objA已有同名屬性，則會用objC/objB裡的屬性值覆寫之，若objB, objC都有同名屬性，則會排在後方的objC為準(後令壓前令)。

jQuery.extend()很常用來處理Plugin或函數的傳入參數，比如函數用到的參數有10個，但大部分情況呼叫時只需要指定其中一兩個，其餘用預設值。我們便可在函數中宣告一個預設值物件objDefault，裡面先放上10個屬性當預設值,，呼叫函數時則傳入objOption，裡面只放要特別指定的屬性值，經過var objSetting = j/msdn.microsoft.com/zh-tw/asp.net/dd722588.aspx#" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print?

function addDiv(options) {
var defaults = {
border: "solid 1px black",
backgroundColor: "#cccccc",
width: "200px", height: "50px",
&Query.extend(objDefault, objOption)之後，我們得到10個"有指定用指定值，沒指定用預設值"的屬性群組供後續使用。舉個例子:
檢視原始文字複製到剪貼簿print?
1. function addDiv(options) {
2. var defaults = {
3. border: "solid 1px black",
4. backgroundColor: "#cccccc",
5. width: "200px", height: "50px",
6. margin: "10px"
7. };
8. &nbsnbsp; margin: "10px"
9. };
10. var settings = $.extend(defaults, options);
11. $("<div></div>").css(settings).appendTo("body");
12. }
13. addDiv({ width: "400px" });
14. addDiv({ backgroundColor: "orange", height: "100px" });
```
function addDiv(options) {    var defaults = {         border: "solid 1px black",        backgroundColor: "#cccccc",        width: "200px"p;  var settings = $.extend(defaults, options);  
```
$("<div></div>").css(settings).appendTo("body");
}
addDiv({ width: "400px" });
addDiv({ backgroundColor: "orange", height: "100px" });

function addDiv(options) {
    var defaults = { 
        border: "solid 1px black",
        backgroundColor: "#cccccc",
        width: "200px", height: "50px",
    margin: "10px"
    };
    var settings = $.extend(defaults, options);
    $("<div></div>").css(, height: "50px",    margin: "10px"    };    var settings = $.extend(defaults, options);    $("<div></div>").css(settings).appendTo("body");}addDiv({ width: "400px" });addDiv({ backgroundColor: "orange", height: "100px" });

了解jQuery.extend()後，我們為jump()及shake()多增加一個參數，可以控制移動的距離以及動畫時間長度，另外再支援一個callback函數，在動作完成後進行呼叫。於是，程式可以改寫如下:

檢視原始文字複製到剪貼簿print?

(function($) {
function moveElem(target, moveAttr, options) {
//處理參數
var settings = { duration: 100, movement: 10, oncomplete: null };

檢視原始文字複製到剪貼簿print?

(function($) {
function moveElem(target, moveAttr, options) {
//處理參數
var settings = { duration: 100, movement: 10, oncomplete: null };
$.exli>
$.extend(settings, options);
//建立分身
var shadow = target.clone().appendTo("body");
var origVis = target.css("visibility");
//將原元素藏起來
target.css("visibility", "hidden");
//建立位移的animiate()參數
var opt1 = {}, opt2 = {};
opt1[moveAttr] = "-=" + settings.movement + "px";
opt2[moveAttr] = "+=" + (settings.movement * 2) + "px";
shadow //設定為絕對座標，以便任意移動
.css({
position: "absoluttend(settings, options);
//建立分身
var shadow = target.clone().appendTo("body");
var origVis = target.css("visibility");
//將原元素藏起來
target.css("visibility", "hidden");
//建立位移的animiate()參數
var opt1 = {}, opt2 = {};
opt1[moveAttr] = "-=" + settings.movement + "px";
opt2[moveAttr] = "+=" + (settings.movement * 2) + "px";
shadow //設定為絕對座標，以便任意移動
.css({
position: "absolute",
&ne",
top: target.offset().top,
left: target.offset().left,
margin: "0px"
}) //進行三次位移
.animate(opt1, settings.duration)
.animate(opt2, settings.duration)
.absp; top: target.offset().top,
left: target.offset().left,
margin: "0px"
}) //進行三次位移
.animate(opt1, settings.duration)
.animate(opt2, settings.duration)
.animate(opt1, settings.duratinimate(opt1, settings.duration, function() {
//本尊重現
target.css("visibility", origVis);
//分身移除
$(this).remove();
//如有callback，呼叫之
on, function() {
//本尊重現
target.css("visibility", origVis);
//分身移除
$(this).remove();
//如有callback，呼叫之
& if ($.isFunction(settings.oncomplete))
settings.oncomplete();
});
}
$.fn.extend({
jump: function(options) {
moveElem($(this), "marginTop", options);
},
shake: function(options) {
moveElem($(this), "marginLeft", options);
}
});
})(jQuery);

(function($) {    function moveElem(target, moveAttr, options) {        //處理參數        var settings = { duration: 100, movement: 10, oncomplete: null };        $.extend(settings, options);        //建立分身        var shadow = target.clone().appendTo("body");        var origVis = target.css("visibility");        //將原元素藏起來        target.css("visibility", "hidden");        /nbsp;     if ($.isFunction(settings.oncomplete))  
                    settings.oncomplete();  
            });  
    }  
  
    $.fn.extend({  
        jump: function(options) {  
            moveElem($(this), "marginTop", options);  
        },  
 /建立位移的animiate()參數        var opt1 = {}, opt2 = {};        opt1[moveAttr] = "-=" + settings.movement + "px";        opt2[moveAttr] = "+=" + (settings.movement * 2) + "px";        shadow  //設定為絕對座標，以便任意移動            .css({                position: "absolute",                top: target.offset().top,                left: target.offset().left,                margin: "0px"            }) //進行三次位移            .animate(opt1, settings.duration)            .animate(opt2, settings.duration)            .animate(opt1, settings.duration, function() {                //本尊重現                target.css("visibility", origVis);                //分身移除                $(this).remove();                //如有callback，呼叫之                if ($.isFunction(settings.oncomplete))                    settings.oncomplete();            });    }    $.fn.extend({        jump: function(options) {            moveElem($(this), "marginTop", options);        },        shake: function(options) {            moveElem($(this), "margin       shake: function(options) {  
            moveElem($(this), "marginLeft", options);  
        }  
    });  
})(jQuery);

(function($) {
    function moveElem(target, moveAttr, options) {
        //處理參數
        var settings = { duration: 100, movement: 10, oncomplete: null };
        $.extend(settings, options);
        //建立分身
        var shadow = target.clone().appendTo("body");
        var origVis = target.css("visibility");
        //將原元素藏起來
        target.css("visibility", "hidden");
        //建立位移的animiate()參數
        var opt1 = {}, opt2 = {};
        opt1[moveAttr] = "-=" + settings.movement + "px";
        opt2[moveAttr] = "+=" + (settings.movement * 2) + "px";
        shadow  //設定為絕對座標，以便任意移動
            .css({
                position: "absolute",
                top: target.offset().top,
                left: target.offset().left,
                margin: "0px"
            }) //進行三次位移
            .animate(opt1, settings.duration)
            .animate(opt2, settings.duration)
            .animate(opt1, settings.duration, function() {
                //本尊重現
                target.css("visibility", origVis);
                //分身移除
                $(this).remove();
                //如有callback，呼叫之
                if ($.isFunction(settings.oncomplete))
                    settings.oncomplete();
            });
    }

    $.fn.extend({
        jump: function(options) {
            moveElem($(this), "marginTop", optionsLeft", options);        }    });})(jQuery);

試試$("#square1").jump({ movement: 30, duration: 500, oncomplete: function() { alert("DONE!"); } });，可驗證移動距離變大，速度變慢，結束時也多彈出DONE字樣。

【代代相傳】

到此，我們的Plugin已算功能完整，但有一個小缺憾。jQuery大部分的函數都可以串接，但目前的寫法在呼叫jump()/shake()後，後面若再串上一般的jQuery Method，則會發生該Method找不到的狀況。原因是我們的函數在執行完成後，並未將原本的jQuery物件一五一十地傳承下去。做法很簡單，將原本的邏輯包在return this.each(function() { ... })中即可:

檢視原始文字複製到剪貼簿print?

$.fn.extend({
jump: function(options) {
return this.each(function() {

試試$("#square1").jump({ movement: 30, duration: 500, oncomplete: function() { alert("DONE!"); } });，可驗證移動距離變大，速度變慢，結束時也多彈出DONE字樣。

【代代相傳】

檢視原始文字複製到剪貼簿print?

$.fn.extend({
jump: function(options) {
&nbli> moveElem($(this), "marginTop", options);
});
},
shake: function(options) {
return this.each(function() {
moveElem($(this), "marginLeft", options);
});
}
});

$.fn.extend({        jump: function(options) {            return this.each(function() {                moveElem($(this), "marginTop", options);            });        },        shake: function(options) {            return this.each(function() {                moveElem($(this), "marginLeft", options);            });        }    });

唯一要留意的地方是，在this.each(function() { ... });中，this指向的會是jQuery元素陣列中的個別元素，故要包成$(this)才能轉化為jQuery物件。我們寫一行: $("#square2").click(function() { $(this).jump().after("<span>SPAN</span>"); }); 就可以在點選時，除了跳動外，還在方塊後方新增<SPAN>元素。return this.each(function() {

moveElem($(this), "marginTop", options);

});

shake: function(options) {

return this.each(function() {

【範例檔案下載】

jQueryDemo13.zip

p; moveElem($(this), "marginLeft", options);

});

}

});

$.fn.extend({
        jump: function(options) {
            return this.each(function() {
                moveElem($(this), "marginTop", options);
            });
        },
        shake: function(options) {
            return this.each(function() {
                moveElem($(this), "marginLeft", options);
            });
        }
    });

【範例檔案下載】