使用jQuery.fn自訂jQuery翻頁外掛_jquery

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

複製程式碼

複製程式碼

程式碼如下:

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

這個是我寫的分頁插件的樣子
通過一個插件外放的函數來進行翻頁操作，無論是點選前進、後退、或改變頁面大小，都會呼叫該函數。

先看看外掛程式的程式碼結構

複製程式碼

程式碼如下:



程式碼>
(function ($) {
//存放插件所需的屬性欄位
var PagerFields = {
};
//插件的私有函數
function setImageButtonSate() {
}
//插件的公用函數
var methods = {
_pagerFields: null,
ini: function (options) {
},
destory: function (destory: function (destory: function (destory: function (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 (這篇文章個人感覺不錯的，一開始學習寫插件的朋友建議先看看這篇文章)。整個插件的定義、以及它的私有變數函數都被包在$(function(){});裡面了。用這種方式即可以保護外掛私有變數的安全性，從另一個角度看也可以避免了變數名稱重複而導致的麻煩。如果把私有變數放在$.fn.HGPager2 = function () {}這個函數裡面的話，會有弊端，要是插件外放了一些函數來獲取插件的一些參數資訊（如當前的頁碼，當前頁大小諸如此類）就不能取得到確切的參數資訊。因為根據js的作用域理論之前建構插件時的參數資訊與後來呼叫函數進入的作用域是不一樣的。上面的這種模式，就確保了建構插件與呼叫插件函數時進入的作用域是一樣的。 下面再列舉插件的各個部分 這是插件的私有變量，用一個PagerFields類別來存放。

複製程式碼


程式碼如下:


var PagerFields = {
pageCount: 0,//頁面數量
recordCount: 0,//記錄總數
currentPage: 0,//目前頁碼

pagerFunction: null //翻頁時觸發的呼叫的函數，用於讀取資料。 }; 這個是插件的私有函數，用來設定翻頁按鈕的狀態（按鈕的圖片沒有上傳，若是把程式碼直接複製貼上執行的話沒有圖片的）

複製程式碼


程式碼如下:


function setImageButtonSate() {

function setImageButtonSate() {
(Pvvonaa>Prent = 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", "-20pxx - 3px"); //grey next
else

$("#HG_pagerNext").css("backgroundPosition", "-20px -19px"); // black next } 這個是建構插件的函數

複製程式碼 程式碼如下:

ini: 函數（選項）{
_pagerFields = PagerFields;
return this.each(function () {
var $this = $(this);
$this.text("");
$out_div = $("

");
$this.append($out_div);
$out_div.append("

");
$out_div.append("

");
$out_div.append("

");
$out_div.append("頁  ");
$out_div.append("共0頁");
$out_div.append("  ");每頁個記錄");
$out_div.append(" ");
$out_div.append("共有0個記錄");
$out_div.append("  ");
$this.append ("
");
$this.find("#HG_pagerPre").css("backgroundPosition", "-3px -3px");
$this.find("#HG_pagerNext") .css("backgroundPosition", "-20px -3px");
if (options.pageSizes) {
for (var i = 0; i $("#HG_pagerSize").append("; " options.pageSizes[i] "");
}
_pagerFields.pageSize = options.pageSizes[0];
}
else {
var default_page_size = [10, 30, 50];
for (var i = 0; i $("#HG_pagerSize").append("" default_page_size[i] "" )；
}
_pagerFields.pageSize = default_page_size[0];
}
if (options.selRecord != undefined && !options.selRecord) {
$ "顯示", '無');
}
if (options.pagerFuncton) {
_pagerFields.pagerFunction = options.pagerFuncton
}
if (options.recordCount) {
if _pagerFields.recordCount = options.recordCount;
$("#HG_recordCount").text(_pagerFields.recordCount);
_pagerFields.pageCount = _pagerFiel==ds.recordCount % _pageracds.page (_pagerFields.recordCount / _pagerFields.pageSize);
$("#HG_pageCount").text(_pagerFields.pageCount);
_pagerFields.currentPage = 1;
$🎜>_pagerFields.currentPage = 1;
$("#a_page(Num). _pagerFields.currentPage);
setImageButtonSate();
_pagerFields.pagerFunction(_pagerFields.pageSize, _pagerFields.currentPage);
}
} $("#HG_pagerPre").click(function () {
if (_pagerFields.currentPage 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 ; >$("#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 = _ielpager .recordCount % _pagerFields.pageSize == 0 ? _pagerFields.recordCount / _pagerFields.pageSize : Math.ceil(_pagerFields.recordCount / _pagerFields.pageSize);
iel(".HG_pageCount. _pagerFields.currentPage = 1;
$("#HG_pageNum").val(1);
setImageButtonSate();
_pagerFields.pageSize, _pagerFields.currentPage); });
});
}



下面是插件的公共函數

複製代碼

程式碼如下： //取得目前的頁碼getCurrentPageIndex: function (options) { return _pagerFields.currentPage; },

//取得總記錄

getRecordCount: function (options) {
return _pagerFields.recordCount;
},
//取得目前頁數
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")
);
}

); } 由於自己對js作用域的理解不夠透徹，此插件採用的模式也不知道是否最適合，上述內容如有說錯的，請批評指正。