快捷導(dǎo)航

使用jQuery.fn自定義jQuery翻頁(yè)插件

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

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

第一次寫(xiě)jQuery插件。自己感覺(jué)寫(xiě)的也不怎么樣。寫(xiě)jQuery插件利用的就是這個(gè)東東 jQuery.fn，例如

復(fù)制代碼代碼如下:

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

這個(gè)是我寫(xiě)的分頁(yè)插件的樣子
插件通過(guò)一個(gè)外放的函數(shù)來(lái)進(jìn)行翻頁(yè)操作，無(wú)論是點(diǎn)擊前進(jìn)、后退、還是改變頁(yè)面大小，都會(huì)調(diào)用該函數(shù)。
先看看插件的代碼結(jié)構(gòu)

復(fù)制代碼代碼如下:

 
(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); 

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

 
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 
} 

這個(gè)是構(gòu)造插件的函數(shù)

復(fù)制代碼代碼如下:

 
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("頁(yè)&nbsp;&nbsp;"); 
$out_div.append("共<span id='HG_pageCount'>0</span>頁(yè)"); 
$out_div.append("&nbsp;&nbsp;"); 
$out_div.append("每頁(yè)<select id='HG_pagerSize'></select>個(gè)記錄"); 
$out_div.append("&nbsp;&nbsp;"); 
$out_div.append("共有 <span id='HG_recordCount'>0</span> 個(gè)記錄"); 
$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ù)

復(fù)制代碼代碼如下:

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

使用示例：

復(fù)制代碼代碼如下:

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