DOM筆記（七）：開發JQuery外掛程式，domjquery
在上一篇筆記本中，講解了如何利用jQuery擴充全域函數和對象：DOM筆記（六）：怎麼進行JQuery擴充？
在這篇筆記本中，將開發一個簡單的動畫外掛程式，名稱是example-plugin，用其實現一個簡單的功能：游標移動到目標標籤，標籤移動，改變背景色；游標離開時，標籤恢複原來的樣式。
因為是jQuery對象的擴充，採用jQuery.fn.extend()進行擴充，外掛程式名是dwqs,並且使用閉包：
/**樣本外掛程式功能：*游標移動到目標標籤，標籤移動，改變背景色；游標離開時，標籤恢複原來的樣式*/(function($){ // $.fn.extend()進行對象擴充 $.fn.extend({ // 外掛程式功能實現 dwqs:function(options) { //主體 } });})(jQuery);
為外掛程式定義預設參數，並用$.extend()擴充：
// 為外掛程式參數設定預設值 var defaults = { padding:20, //移動距離 time:300, //移動時間 color:"red" //背景顏色 }; // 使用$.extend()覆蓋外掛程式中的預設值 var options = $.extend(defaults,options);
添加功能代碼
// 將this引用的DOM元素轉為JQuery對象var obj = $(this);// 滑鼠經過時添加動畫obj.mouseover(function(){ obj.animate({paddingLeft:options.padding},options.time); obj.css("backgroundColor",options.color);});// 滑鼠離開時恢複obj.mouseout(function(){ obj.animate({paddingLeft:0},options.time); obj.css("backgroundColor","");});
外掛程式的檔案名稱命名為example-plugin.js儲存，完整代碼如下：
/**樣本外掛程式功能：*游標移動到目標標籤，標籤移動，改變背景色；游標離開時，標籤恢複原來的樣式*/(function($){ // $.fn.extend()進行對象擴充 $.fn.extend({ // 外掛程式功能實現 dwqs:function(options) { // 為外掛程式參數設定預設值 var defaults = { padding:20, //移動距離 time:300, //移動時間 color:"red" //背景顏色 }; // 使用$.extend()覆蓋外掛程式中的預設值 var options = $.extend(defaults,options); return this.each(function() { // 將this引用的DOM元素轉為JQuery對象 var obj = $(this); // 滑鼠經過時添加動畫 obj.mouseover(function() { obj.animate({paddingLeft:options.padding},options.time); obj.css("backgroundColor",options.color); }); // 滑鼠離開時恢複 obj.mouseout(function() { obj.animate({paddingLeft:0},options.time); obj.css("backgroundColor",""); }); }); } //不要有;號 否則出錯 });})(jQuery);
測試外掛程式：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>外掛程式測試</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.example-plugin.js"></script></head><body> <h2>自訂JQuery外掛程式測試</h2> <div> <div style="border:1px solid red;width:200px;">JavaScript技術</div> <div style="border:1px solid red;width:200px;">DOM技術</div> <div style="border:1px solid red;width:200px;">CSS技術</div> <div style="border:1px solid red;width:200px;">JQuery技術</div> </div> <script type="text/javascript"> $(document).ready(function() { $("div>div").dwqs({padding:35,time:500,color:"#ccc"}); }); </script></body></html>
效果示範：http://jqplugin.sinaapp.com/test.html
代碼下載：http://download.csdn.net/detail/u011043843/8235387
原文首發：http://www.ido321.com/1333.htmlStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
