以下轉錄自:http://msdn.microsoft.com/zh-tw/asp.net/dd722588.aspx
看過眾多好用的jQuery
Plugin,應該能體會Plugin的精神--將常用邏輯封裝成一個Method,日後只需多載入一個js,就可以隨時享用。這樣的概念對資深的程式設
計人員來說一點都不陌生,跟元件化、模組化的理念是一致的,而在我們開發專案的過程中,也常有將通用邏輯提取出成為共用元件、函數的情境,在jQuery
網頁設計上,我們可以透過自製Plugin完成。
【基本樣版】
要
自已動手建立一個jQuery Plugin,一點都不困難。首先,我們只需新增一個js檔案,先寫好以下的樣版:
- (function($) {
- $.fn.extend({
- method1: function(options) {
-
- },
- method2: function(options) {
-
- }
- });
- })(jQuery);
(function($) {
$.fn.extend({
method1: function(options) {
//...code...
},
method2: function(options) {
//...code...
}
});
})(jQuery);
這個樣版本用了幾個有趣的技巧,值得好好介紹一下。首先,我們可以在最外圈看到一個(function($) { ...
})(jQuery);的寫法,我叫它可拋式匿名函數(補
充說明),主要用意在於避免留下任何全域(Global)性質的函數或變數,因為我們無法掌握js如何被別人引用,會與哪些js合併使用,難保不
會發生跟別的js取到同名同姓的函數或變數。因此,我們把所有的函數及變數宣告都包在一個function() { ...
}中,以區域變數性質存在,就不會"撞名"的困擾發生。
但是,如果宣告成區域變數,等匿名函數結束,區域變數不就消失了?
我們如果在匿名函數中對某個元素掛了事件函數,該事件函數中又參考了這個區域變數,豈不就出包了?
答案是,不會!
神奇的Closure特性會避免這種狀況。用一個例子來說明:
- (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回到原位。做完效果後,分身移除,本尊還原,一切恢復正常。程式會像以下的樣子:
- (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"
- }) , "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);
p; .animate({ marginLeft: "+=20px" }, 100) - .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測試效果:
前端程式我們放入兩個DIV測試效果:
- <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();
});
</script>
</body>
</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; marg>
程式是可行了,但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");
-
- var opt1 = {}, opt2 = {};
- opt1[moveAttr] = "-=10px"bsp;
- 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個"有指定用指定值,沒指定用預設值"的屬性群組供後續使用。舉個例子:
- function addDiv(options) {
- var defaults = {
- border: "solid 1px black",
- backgroundColor: "#cccccc",
- width: "200px", height: "50px",
- &Query.extend(objDefault,
objOption)之後,我們得到10個"有指定用指定值,沒指定用預設值"的屬性群組供後續使用。舉個例子:
- function addDiv(options) {
- var defaults = {
- border: "solid 1px black",
- backgroundColor: "#cccccc",
- width: "200px", height: "50px",
- margin: "10px"
- };
- &nbsnbsp; margin: "10px"
- };
- 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"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函數,在動作完成後進行呼叫。於是,程式可以改寫如下:
- (function($) {
- function moveElem(target, moveAttr, options) {
-
- var settings = { duration: 100, movement: 10, oncomplete: null };
了解jQuery.extend()後,我們為jump()及shake()多增加一個參數,可以控制移動的距離以及動畫時間長度,
另外再支援一個callback函數,在動作完成後進行呼叫。於是,程式可以改寫如下:
- (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");
-
- 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");
-
- 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();
-
- on, function() {
-
- target.css("visibility", origVis);
-
- $(this).remove();
-
- & 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() { ... })中即可:
- $.fn.extend({
- jump: function(options) {
- return this.each(function() {
<);
},
shake: function(options) {
moveElem($(this), "marginLeft", 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() { ... })中即可:
- $.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() {
 >【範例檔案下載】
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);
});
}
});
唯一要留意的地方是,在this.each(function() { ...
});中,this指向的會是jQuery元素陣列中的個別元素,故要包成$(this)才能轉化為jQuery物件。我們寫一行:
$("#square2").click(function() {
$(this).jump().after("<span>SPAN</span>"); });
就可以在點選時,除了跳動外,還在方塊後方新增<SPAN>元素。
【範例
檔案下載】
柏拉圖的永恆 / Xuite日誌 / 回應(0) / 引用(0) / 好文轉寄
邊做邊學 jQuery 系列 ...|日誌首頁|邊做邊學 jQuery 系列 ...
上一篇邊做邊學 jQuery 系列 12- 站在巨人肩膀上-jQuery Plugin...下一篇邊做邊學 jQuery 系列 14- 呼叫總部-jQuery.ajax()...