扩展JQuery很容易，作为一个练习，编写一个简单的分页插件，代码量不大，直接看代码好了：
$.fn.mypagination = function(totalProperty,opts){
opts = $.extend({
perPage:10,
callback:function(){
}
},opts||{});
return this.each(function(){
function numPages(){
return Math.ceil(totalProperty/opts.perPage);
}
function selectPage(page){
return function(){
currPage = page;
if (page<0) currPage = 0;
if (page>=numPages()) currPage = numPages()-1;
render();
$('img.page-wait',panel).attr('src','images/wait.gif');
opts.callback(currPage+1);
$('img.page-wait',panel).attr('src','images/nowait.gif');
}
}
function render(){
var html = '<table><tbody><tr>'
+'<td><a href="#"><img></a></td>'
+'<td><a href="#"><img></a></td>'
+'<td><span>第<input type="text">页/共'+numPages()+'页</span></td>'
+'<td><a href="#"><img></a></td>'
+'<td><a href="#"><img></a></td>'
+'<td><img src="images/nowait.gif"></td>'
+'<td><span>检索到'+totalProperty+'记录</span></td>'
+'</tr></tbody></table>';
var imgFirst = 'images/page-first-disabled.gif';
var imgPrev = 'images/page-prev-disabled.gif';
var imgNext = 'images/page-next-disabled.gif';
var imgLast = 'images/page-last-disabled.gif';
if (currPage > 0){
imgFirst = 'images/page-first.gif';
imgPrev = 'images/page-prev.gif';
}
if (currPage < numPages()-1){
imgNext = 'images/page-next.gif';
imgLast = 'images/page-last.gif';
}
panel.empty();
panel.append(html);
$('img.page-first',panel)
.bind('click',selectPage(0))
.attr('src',imgFirst);
$('img.page-prev',panel)
.bind('click',selectPage(currPage-1))
.attr('src',imgPrev);
$('img.page-next',panel)
.bind('click',selectPage(currPage+1))
.attr('src',imgNext);
$('img.page-last',panel)
.bind('click',selectPage(numPages()-1))
.attr('src',imgLast);
$('input.page-num',panel)
.val(currPage+1)
.change(function(){
selectPage($(this).val()-1)();
});
}
var currPage = 0;
var panel = $(this);
render();
});
}
下面测试一下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mypagination.css"/>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.mypagination.js"></script>
<script>
$(document).ready(function(){
$('#mypage').mypagination(10112,{
callback:function(page){
alert(page);
}
});
});
</script>
</head>
<div id="mypage"></div>
运行效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助。
- 重庆市2015年全国普通高校招生录取对口高职本科缺额情况表(电子技术类)
- 重庆2015年普招录取二次志愿征集公告二
- 2015年大连科技学院在辽宁中职升本录取查询公告
- 浙江农林大学2015年江苏艺术类本科录取结束
- 重庆市2015年普招提前批本科录取信息(理工类)
- 常州市2015年(上)市区自考毕业生领取毕业证书的通知
- 2015年河北农业大学高考录取查询入口
- 2015年江苏省普通高校招生艺术类公办本科第3小批录取工作7月12日进行通知
- 2015年漳州市东山县生源地信用助学贷款办理指南
- 江苏省2015年普通高校招生体育/艺术类提前录取公办本科批次填报征求(平行)院校志愿通告
- 2015年漳州市东山县生源地信用助学贷款办理须知
- 2015年江苏省考生如何查询高招录取结果
- 辽宁师范大学是不是真的有一项政策招落榜高考考生？
- 2015年江苏省普高招生提前批次录取工作开始通知
- 西安建筑科技大学2015年在职攻读硕士报名现场确认工作的通知
- 西安建筑科技大学2015年在职人员攻读硕士专业学位招生简章及专业目录
- 山西中医学院2015年专升本学生预报到入学须知
- 西安建筑科技大学2015年招收在职人员攻读工商管理硕士(MBA)专业学位招生简章
- 西安建筑科技大学2015年招收在职人员攻读风景园林硕士专业学位招生简章
- 西安建筑科技大学2015年风景园林硕士专业学位研究生招生目录
- 西安建筑科技大学2015年招收在职人员攻读工程硕士专业学位招生简章
- 西安建筑科技大学2015年工程硕士专业学位研究生招生目录
- 西安建筑科技大学2015年工程硕士承办学院联系人及联系电话
- 大连外国语大学2015年高考已发布录取结果省份名单
- 重庆市2015年全国普通高校招生录取艺术本科(其他)缺额情况表(艺术类)
- natal family
- natch
- nation
- national
- national academy
- national acclaim
- national account
- national-account
- national administration
- national agenda
- 选兵秣马
- 选妓征歌
- 选歌试舞
- 选舞征歌
- 选色征歌
- 选贤与能
- 选贤举能
- 选贤任能
- 逍遥事外
- 逍遥法外
- 中学生秋季防火演讲稿
- 5分钟励志演讲稿父母精选汇总
- 榜样的力量演讲稿5篇
- 演讲稿一年级三好学生
- 建国70周年的主题演讲稿五分钟
- 大学生优秀中文演讲稿
- 书香伴我成长1分钟演讲稿范文
- 新生代表开学演讲稿8篇
- 初中3分钟国旗下演讲稿3分钟精选
- 勤奋学习主题学生演讲稿