第一次写jQuery插件。自己感觉写的也不怎么样。写jQuery插件利用的就是这个东东 jQuery.fn,例如
使用jQuery.fn自定义jQuery翻页插件
复制代码 代码如下:
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("页&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);
});
});
}

下面是插件的公共函数
复制代码 代码如下:
//获取当前的页码
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作用域的理解不够透彻,此个插件采用的模式也不知道是否最适合,上述内容如有说错的,请批评指正。
标签:
jQuery.fn,翻页插件

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“使用jQuery.fn自定义jQuery翻页插件”

暂无“使用jQuery.fn自定义jQuery翻页插件”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。