使用jQuery.fn自定義jQuery翻頁插件

更新時間：2013年01月20日 10:03:52 作者：

第一次寫jQuery插件;自己感覺寫的也不怎么樣。寫jQuery插件利用的就是這個東東jQuery.fn,寫的過程很詳細，感興趣的朋友可以了解下，希望本文對你使用自定義插件有幫助

第一次寫jQuery插件。自己感覺寫的也不怎么樣。寫jQuery插件利用的就是這個東東 jQuery.fn，例如

復制代碼代碼如下:

jQuery.fn.pluginName=function(){};

這個是我寫的分頁插件的樣子
插件通過一個外放的函數(shù)來進行翻頁操作，無論是點擊前進、后退、還是改變頁面大小，都會調用該函數(shù)。
先看看插件的代碼結構

復制代碼代碼如下:

 
(function ($) { 
//存放插件所需的屬性字段 
var PagerFields = { 
}; 
//插件的私有函數(shù) 
function setImageButtonSate() { 
} 
//插件的公共函數(shù) 
var methods = { 
_pagerFields: null, 
ini: function (options) { 
}, 
destory: function (options) { 
return $(this).each(function () { 
var $this = $(this); $this.removeData('HGPager2'); 
}); 
} 
}; 
//定義插件 
$.fn.HGPager2 = function () { 
var method = arguments[0]; 
if (methods[method]) { 
method = methods[method]; 
arguments = Array.prototype.slice.call(arguments, 1); 
} 
else if (typeof (method) == 'object' || !method) { 
method = methods.ini; 
} 
else { 
$.error('Method ' + method + ' does not exist on jQuery.pluginName'); 
return this; 
} 
return method.apply(this, arguments); 
}; 
})(jQuery); 

這個結構是按照《深入理解jQuery插件開發(fā)》文中的模式(這篇文章個人感覺不錯的，一開始學習寫插件的朋友建議先看看這篇文章)。整個插件的定義、以及它的私有變量函數(shù)都被包在$(function(){});里面了。用這種方式即可以保護插件私有變量的安全性，從另一個角度看也可以避免了變量名重復而導致的麻煩。如果把私有變量放在$.fn.HGPager2 = function () {}這個函數(shù)里面的話，會有弊端，要是插件外放了一些函數(shù)來獲取插件的一些參數(shù)信息（如當前的頁碼，當前頁大小諸如此類）就不能獲取到確切的參數(shù)信息。因為根據js的作用域理論之前構造插件時的參數(shù)信息與后來調用函數(shù)進入的作用域是不一樣的。上面的這種模式，就確保了構造插件與調用插件函數(shù)時進入的作用域是一樣的。
下面再列舉插件的各個部分
這是插件的私有變量，用一個PagerFields類來存放。

復制代碼代碼如下:

 
var PagerFields = { 
pageSize: 10, //頁面大小 
pageCount: 0,//頁面數(shù)量 
recordCount: 0,//記錄總數(shù) 
currentPage: 0,//當前頁碼 
pagerFunction: null //翻頁時觸發(fā)的調用的函數(shù)，用于讀取數(shù)據。 
}; 

這個是插件的私有函數(shù)，用于設置翻頁按鈕的狀態(tài)（按鈕的圖片沒有上傳，若是把代碼直接復制粘貼運行的話沒有圖片的）

復制代碼代碼如下:

 
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 
} 

這個是構造插件的函數(shù)

復制代碼代碼如下:

 
ini: function (options) { 
_pagerFields = PagerFields; 
return this.each(function () { 
var $this = $(this); 
$this.text(""); 
$out_div = $("<div id='hg_pager_outter_div' style='margin-bottom:-10px'></div>"); 
$this.append($out_div); 
$out_div.append("<div><span id='HG_pagerPre' style='background-position:-3px -19px'></span></div>"); 
$out_div.append("<div style='float:left;'><input id='HG_pageNum' type='text' value='0' readonly='readonly'/></div>"); 
$out_div.append("<div><span id='HG_pagerNext' style='background-position:-20px -19px' ></span></div>"); 
$out_div.append("頁&nbsp;&nbsp;"); 
$out_div.append("共<span id='HG_pageCount'>0</span>頁"); 
$out_div.append("&nbsp;&nbsp;"); 
$out_div.append("每頁<select id='HG_pagerSize'></select>個記錄"); 
$out_div.append("&nbsp;&nbsp;"); 
$out_div.append("共有 <span id='HG_recordCount'>0</span> 個記錄"); 
$out_div.append("&nbsp;&nbsp;"); 
$this.append("<br/>"); 
$this.find("#HG_pagerPre").css("backgroundPosition", "-3px -3px"); 
$this.find("#HG_pagerNext").css("backgroundPosition", "-20px -3px"); 
if (options.pageSizes) { 
for (var i = 0; i < options.pageSizes.length; i++) { 
$("#HG_pagerSize").append("<option>" + options.pageSizes[i] + "</option>"); 
} 
_pagerFields.pageSize = options.pageSizes[0]; 
} 
else { 
var default_page_size = [10, 30, 50]; 
for (var i = 0; i < default_page_size.length; i++) { 
$("#HG_pagerSize").append("<option>" + default_page_size[i] + "</option>"); 
} 
_pagerFields.pageSize = default_page_size[0]; 
} 
if (options.selRecord != undefined && !options.selRecord) { 
$("#selRecord_div").css("display", 'none'); 
} 
if (options.pagerFuncton) { 
_pagerFields.pagerFunction = options.pagerFuncton; 
} 
if (options.recordCount) { 
_pagerFields.recordCount = options.recordCount; 
$("#HG_recordCount").text(_pagerFields.recordCount); 
_pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize); 
$("#HG_pageCount").text(_pagerFields.pageCount); 
_pagerFields.currentPage = 1; 
$("#HG_pageNum").val(_pagerFields.currentPage); 
setImageButtonSate(); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
} 
// setting element 
// bingding event 
$("#HG_pagerPre").click(function () { 
if (_pagerFields.currentPage <= 1) return; 
else _pagerFields.currentPage--; 
setImageButtonSate(); 
$("#HG_pageNum").val(_pagerFields.currentPage); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
}); 
$("#HG_pagerNext").click(function () { 
if (_pagerFields.currentPage == _pagerFields.pageCount) return; 
else _pagerFields.currentPage++; 
setImageButtonSate(); 
$("#HG_pageNum").val(_pagerFields.currentPage); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
}); 
$("#HG_pagerSize").change(function () { 
_pagerFields.pageSize = $this.find("option:selected").text() * 1; 
_pagerFields.pageCount = _pagerFields.recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize); 
$("#HG_pageCount").text(_pagerFields.pageCount); 
_pagerFields.currentPage = 1; 
$("#HG_pageNum").val(1); 
setImageButtonSate(); 
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage); 
}); 
}); 
} 

下面是插件的公共函數(shù)

復制代碼代碼如下:

 
//獲取當前的頁碼 
getCurrentPageIndex: function (options) { 
return _pagerFields.currentPage; 
}, 
//獲取記錄的總數(shù) 
getRecordCount: function (options) { 
return _pagerFields.recordCount; 
}, 
//獲取當前頁面數(shù)量 
getCurrentPageCount: function (options) { 
return _pagerFields.pageCount; 
}, 
//獲取頁面的大小 
getCurrentPageSize: function (options) { 
return _pagerFields.pageSize; 
} 

使用示例：

復制代碼代碼如下:

 
$(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") 
); 
} 