使用jQuery.fn自定义jQuery翻页插件

第一次写jQuery插件。自己感觉写的也不怎么样。写jQuery插件利用的就是这个东东 jQuery.fn，例如



代码如下:

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

这个是我写的分页插件的样子
插件通过一个外放的函数来进行翻页操作，无论是点击前进、后退、还是改变页面大小，都会调用该函数。
先看看插件的代码结构


代码如下:

(function ($) {
//存放插件所需的属性字段
var PagerFields = {
};
//插件的私有函数
function setImageButtonSate() {
}
//插件的公共函数
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插件开发》文中的模式(这篇文章个人感觉不错的，一开始学习写插件的朋友建议先看看这篇文章)。整个插件的定义、以及它的私有变量函数都被包在$(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
}

这个是构造插件的函数


代码如下:

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("页  ");
$out_div.append("共<span id='HG_pageCount'>0</span>页");
$out_div.append("  ");
$out_div.append("每页<select id='HG_pagerSize'></select>个记录");
$out_div.append("  ");
$out_div.append("共有 <span id='HG_recordCount'>0</span> 个记录");
$out_div.append("  ");
$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);
});
});
}

下面是插件的公共函数


代码如下:

//获取当前的页码
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作用域的理解不够透彻，此个插件采用的模式也不知道是否最适合，上述内容如有说错的，请批评指正。