第一次寫jQuery插件。自己感覺寫的也不怎么樣。寫jQuery插件利用的就是這個東東 jQuery.fn，例如
jQuery.fn.pluginName=function(){};
這個是我寫的分頁插件的樣子
插件通過一個外放的函數來進行翻頁操作，無論是點擊前進、后退、還是改變頁面大小，都會調用該函數。
先看看插件的代碼結構
1 (function ($) { 2 3 //存放插件所需的屬性字段 4 var PagerFields = { 5 }; 6 7 //插件的私有函數 8 function setImageButtonSate() { 9 10 11 } 12 13 //插件的公共函數 14 var methods = { 15 _pagerFields: null, 16 ini: function (options) { 17 18 19 }, 20 destory: function (options) { 21 return $(this).each(function () { 22 var $this = $(this); $this.removeData('HGPager2'); 23 }); 24 } 25 }; 26 27 //定義插件 28 $.fn.HGPager2 = function () { 29 var method = arguments[0]; 30 31 if (methods[method]) { 32 method = methods[method]; 33 arguments = Array.prototype.slice.call(arguments, 1); 34 } 35 else if (typeof (method) == 'object' || !method) { 36 method = methods.ini; 37 } 38 else { 39 $.error('Method ' + method + ' does not exist on jQuery.pluginName'); 40 return this; 41 } 42 43 return method.apply(this, arguments); 44 }; 45 })(jQuery);
這個結構是按照《深入理解jQuery插件開發》文中的模式(這篇文章個人感覺不錯的，一開始學習寫插件的朋友建議先看看這篇文章)。整個插件的定義、以及它的私有變量函數都被包在$(function(){});里面了。用這種方式即可以保護插件私有變量的安全性，從另一個角度看也可以避免了變量名重復而導致的麻煩。如果把私有變量放在$.fn.HGPager2 = function () {}這個函數里面的話，會有弊端，要是插件外放了一些函數來獲取插件的一些參數信息（如當前的頁碼，當前頁大小諸如此類）就不能獲取到確切的參數信息。因為根據js的作用域理論之前構造插件時的參數信息與后來調用函數進入的作用域是不一樣的。上面的這種模式，就確保了構造插件與調用插件函數時進入的作用域是一樣的。
下面再列舉插件的各個部分
這是插件的私有變量，用一個PagerFields類來存放。
var PagerFields = { pageSize: 10, //頁面大小 pageCount: 0,//頁面數量 recordCount: 0,//記錄總數 currentPage: 0,//當前頁碼 pagerFunction: null //翻頁時觸發的調用的函數，用於讀取數據。 };
這個是插件的私有函數，用於設置翻頁按鈕的狀態（按鈕的圖片沒有上傳，若是把代碼直接復制粘貼運行的話沒有圖片的）
function setImageButtonSate() { if (PagerFields.currentPage <= 1) $("#HG_pagerPre").css("backgroundPosition", "-3px -3px"); //grey pre else $("#HG_pagerPre").css("backgroundPosition", "-3px -19px"); // black pre if (PagerFields.currentPage == PagerFields.pageCount) $("#HG_pagerNext").css("backgroundPosition", "-20px -3px"); //grey next else $("#HG_pagerNext").css("backgroundPosition", "-20px -19px"); // black next }
這個是構造插件的函數
1 ini: function (options) { 2 _pagerFields = PagerFields; 3 return this.each(function () { 4 5 var $this = $(this); 6 $this.text(""); 7 $out_div = $("<div id='hg_pager_outter_div' style='margin-bottom:-10px'></div>"); 8 $this.append($out_div); 9 $out_div.append("<div><span id='HG_pagerPre' style='background-position:-3px -19px'></span></div>"); 10 $out_div.append("<div style='float:left;'><input id='HG_pageNum' type='text' value='0' readonly='readonly'/></div>"); 11 $out_div.append("<div><span id='HG_pagerNext' style='background-position:-20px -19px' ></span></div>"); 12 $out_div.append("頁 "); 13 $out_div.append("共<span id='HG_pageCount'>0</span>頁"); 14 $out_div.append(" "); 15 $out_div.append("每頁<select id='HG_pagerSize'></select>個記錄"); 16 $out_div.append(" "); 17 $out_div.append("共有 <span id='HG_recordCount'>0</span> 個記錄"); 18 $out_div.append(" "); 19 $this.append("<br/>"); 20 21 $this.find("#HG_pagerPre").css("backgroundPosition", "-3px -3px"); 22 $this.find("#HG_pagerNext").css("backgroundPosition", "-20px -3px"); 23 24 if (options.pageSizes) { 25 for (var i = 0; i < options.pageSizes.length; i++) { 26 $("#HG_pagerSize").append("<option>" + options.pageSizes[i] + "</option>"); 27 } 28 _pagerFields.pageSize = options.pageSizes[0]; 29 } 30 else { 31 var default_page_size = [10, 30, 50]; 32 for (var i = 0; i < default_page_size.length; i++) { 33 $("#HG_pagerSize").append("<option>" + default_page_size[i] + "</option>"); 34 } 35 _pagerFields.pageSize = default_page_size[0]; 36 } 37 38 if (options.selRecord != undefined && !options.selRecord) { 39 $("#selRecord_div").css("display", 'none'); 40 } 41 42 if (options.pagerFuncton) { 43 _pagerFields.pagerFunction = options.pagerFuncton; 44 } 45 46 if (options.recordCount) { 47 _pagerFields.recordCount = options.recordCount; 48 $("#HG_recordCount").text(_pagerFields.recordCount); 49 _pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize); 50 $("#HG_pageCount").text(_pagerFields.pageCount); 51 _pagerFields.currentPage = 1; 52 $("#HG_pageNum").val(_pagerFields.currentPage); 53 setImageButtonSate(); 54 _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 55 } 56 // setting element 57 58 // bingding event 59 $("#HG_pagerPre").click(function () { 60 if (_pagerFields.currentPage <= 1) return; 61 else _pagerFields.currentPage--; 62 setImageButtonSate(); 63 $("#HG_pageNum").val(_pagerFields.currentPage); 64 _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 65 }); 66 67 $("#HG_pagerNext").click(function () { 68 if (_pagerFields.currentPage == _pagerFields.pageCount) return; 69 else _pagerFields.currentPage++; 70 setImageButtonSate(); 71 $("#HG_pageNum").val(_pagerFields.currentPage); 72 _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 73 }); 74 75 $("#HG_pagerSize").change(function () { 76 _pagerFields.pageSize = $this.find("option:selected").text() * 1; 77 _pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize); 78 $("#HG_pageCount").text(_pagerFields.pageCount); 79 _pagerFields.currentPage = 1; 80 $("#HG_pageNum").val(1); 81 setImageButtonSate(); 82 _pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 83 }); 84 }); 85 86 }
下面是插件的公共函數
1 //獲取當前的頁碼 2 getCurrentPageIndex: function (options) { 3 4 5 return _pagerFields.currentPage; 6 }, 7 8 //獲取記錄的總數 9 getRecordCount: function (options) { 10 11 return _pagerFields.recordCount; 12 13 }, 14 15 //獲取當前頁面數量 16 getCurrentPageCount: function (options) { 17 18 return _pagerFields.pageCount; 19 20 }, 21 22 //獲取頁面的大小 23 getCurrentPageSize: function (options) { 24 25 return _pagerFields.pageSize; 26 27 }
使用示例：
$(function () { $("#testPager").HGPager2({ pageSizes: [10, 20, 30], recordCount: 123, pagerFuncton: function (size, index) { alert("size: " + size + " index: " + index); } }); }); function test_Click() { alert( $("#testPager").HGPager2("getCurrentPageIndex")+" "+ $("#testPager").HGPager2("getRecordCount")+" "+ $("#testPager").HGPager2("getCurrentPageCount")+" "+ $("#testPager").HGPager2("getCurrentPageSize") ); }
由於本人對js作用域的理解不夠透徹，此個插件采用的模式也不知道是否最適合，上述內容如有說錯的，請批評指正。