jQuery插件pagination.js源码解读
pagination的github地址:https://github.com/gbirke/jquery_pagination
公司用的是1.2的版本,所以我就读1.2的了。
jQuery.fn.pagination = function(maxentries, opts){
opts = $.extend({
isCurrentInfo: false,//是否显示当前页信息: 当前第1页,共10页
currentCls: '.current-info',//当前页class
items_per_page:10,//每页最多有几项
num_display_entries:10,//中间的页数 如 1 2 ... 5 6 7 8 9 ... 12 13 中间页数是5
current_page:0,//当前页
num_edge_entries:1,//两端页数 如 1 2...5 6 7 8 9...12 13两端页数是2
link_to:"javascript:;",//href
prev_text:"上一页",
next_text:"下一页",
ellipse_text:"...",//省略的页数的文本
prev_show_always:true,//总是显示上一页
next_show_always:true,//总是显示下一页
callback:function(){return false;}//回调
},opts||{});
return this.each(function() {
//code
});
};
我们需要给pagination方法传递2个参数,
maxentries:总共有多少项,必填
opts,各种配置项,都为选填。
function numPages(){}计算总页数
function getInterval(){} 获取中间页数这里的开始页和结束页,作为数组返回[5,10]
function pageSelected(page_id, evt){} 分页的链接处理函数
function drawLinks() {}绘制链接
关键就是drawLinks:
function drawLinks() {
panel.empty();//每一次绘制都是全部重绘
var interval = getInterval();//获取开始和结束页
var np = numPages();//获取总页数
//pageSelected获取到当前页,然后重绘了链接
var getClickHandler = function(page_id) {
return function(evt){ return pageSelected(page_id,evt); }
}
// 添加一个单连接
var appendItem = function(page_id, appendopts){
page_id = page_id<0?0:(page_id<np?page_id:np-1);
appendopts = $.extend({text:page_id+1, classes:""}, appendopts||{});
if(page_id == current_page){//如果是当前页,生成span
var lnk = $("<span class='current'>"+(appendopts.text)+"</span>");
}
else{//否则生成超链接
var lnk = $("<a>"+(appendopts.text)+"</a>")
.bind("click", getClickHandler(page_id))//点击超链接时回调
.attr('href', opts.link_to.replace(/__id__/,page_id));
}
if(appendopts.classes){lnk.addClass(appendopts.classes);}//添加class
panel.append(lnk);//将连接append到panel
}
// 绘制上一页
if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
}
// 绘制起始点 1 2 ...
if (interval[0] > 0 && opts.num_edge_entries > 0)
{
var end = Math.min(opts.num_edge_entries, interval[0]);
for(var i=0; i<end; i++) {
appendItem(i);
}
if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
{
$("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
}
}
// 绘制中间部分的连接 5 6 7 8 9
for(var i=interval[0]; i<interval[1]; i++) {
appendItem(i);
}
// 绘制结束点 ...12 13
if (interval[1] < np && opts.num_edge_entries > 0)
{
if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
{
$("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
}
var begin = Math.max(np-opts.num_edge_entries, interval[1]);
for(var i=begin; i<np; i++) {
appendItem(i);
} }
// 绘制下一页
if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
appendItem(current_page+1,{text:opts.next_text, classes:"next"});
}
// 绘制当前第几页,共几页
if(opts.isCurrentInfo){
var sInfo = '当前第 ' + (current_page + 1) + ' 页,共 ' + np + ' 页';
$(opts.currentCls).html(sInfo);
} }
jQuery插件pagination.js源码解读的更多相关文章
- 第二十五课:jQuery.event.trigger的源码解读
本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...
- js便签笔记(10) - 分享:json2.js源码解读笔记
1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...
- js便签笔记(10) - 分享:json.js源码解读笔记
1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...
- fastclick.js源码解读分析
阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生 ...
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
- prototype.js 源码解读(02)
如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype ...
- prototype.js 源码解读(01)
prototype.js是一个设计的非常优雅且很有实用价值的js基础类库,其源码非常值得研究.研究它的源码不仅能提升个人水平,而且对你打下坚实的js基础也很有帮助.因本人技术水平有限,该解读仅供参考. ...
- require.js 源码解读——配置默认上下文
首先,我们先来简单说一下,require.js的原理: 1.载入模块 2.通过模块名解析出模块信息,以及计算出URL 3.通过创建SCRIPT的形式把模块加载到页面中. 4.判断被加载的脚本,如 ...
- json2.js源码解读记录
相关内容:json详细用法.js语法.unicode.正则 json特点--最简单.最小巧的经典js库. json作者:道克拉斯.克劳福德(Douglas Crockford)--js大牛 出 ...
随机推荐
- FFMPEG more samples than frame size (avcodec_encode_audio2) 的解决方案
在实际的项目中,从音频设备采集到的音频的类型和编码器类型(aac ,amr)通常是不一致的. 那么我们首先需要做重采样的过程.利用swr_convert 重新采样. 这时候我们可能会遇到另外一个问题. ...
- Swing项目编译成exe,并且打包成安装文件(二)
前面我们讲到了将Swing项目编译成双击可执行的文件exe,这篇我就教大家怎么把exe打包成需要在电脑安装的那种,首先需要一个工具,Inno Setup 编译器, 下载地址,我这个是汉化版的,双击打开 ...
- 不能访问tomcat中的项目
tomcat在eclipse里面能正常启动,而在浏览器中访问http://localhost:8080/不能访问,且报404错误.同时其他项目页面也不能访问. 关闭eclipse里面的tomcat,在 ...
- mysql分区表之四:分区表性能
一, 分区概念 分区允许根据指定的规则,跨文件系统分配单个表的多个部分.表的不同部分在不同的位置被存储为单独的表.MySQL从5.1.3开始支持Partition. 分区和手动分表对比 手 ...
- hibernate学习四 hibernate关联关系映射
在Hibernate中对象之间的关联关系表现为数据库中表于表之间的关系(表之间通过外键关联). 1 单向的一对一 主键关联 外键关联 2 单向的一对多 3 单向的多对一 4 单向的多对多 5 双向的 ...
- bzoj4004
线性基 构成线性基的个数是定的,所以我们对价值进行贪心就行了,根据拟阵那套理论,我们排个序,然后能塞进去就塞,这样就求出最小值了. 思维江化,只要是多维向量都能用线性基搞. #include<b ...
- HashMap为什么比数组查询快
通常数组不直接保存值,而是通过保存值的list.然后对list中的“值”使用equals方法比较,这部分查询速度自然慢.但是如果有好的散列函数,数组的每个位置就只有较少的“值”.因此,不是查询所有的l ...
- Coloring Brackets
题意: 给一匹配的括号序列,要求每对括号恰有一个被染成蓝或红色,要求相邻的括号不同色,求方案数. 解法: 类比树的hash将括号序列转化为一棵树,树上子节点之间不得出现冲突, 子节点和父节点不得出现冲 ...
- CF-831B
B. Keyboard Layouts time limit per test 1 second memory limit per test 256 megabytes input standard ...
- struts2 中的 addActionError 、addFieldError、addActionMessage的方法
addActionError .addFieldError.addActionMessage都是ActionSupport的方法 一.addActionError("错误内容"): ...