今天完成一個分頁插件。
首先看最終效果圖：
1、創建文件夾：
2、編寫page.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分頁</title>
<link rel="stylesheet" type="text/css" href="css/page.css">
</head>
<body>
<div id="page">
<ul>
<li class="firstPage">首頁</li>
<li class="lastPage">末頁</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pageShow.js"></script>
<script type="text/javascript" src="js/page.js"></script>
</html>這裏是必須格式。
2、編寫樣式文件：
#page{width: 500px;height: 100px;margin: 50px auto;font-family: "微軟雅黑"}
#page ul{list-style: none;}
#page li{
float: left;
width:25px;
height: 25px;
text-align: center;
line-height: 25px;
cursor: pointer;
border: 1px solid #ccc;
margin: 2px;
}
#page .firstPage,#page .lastPage{width: 40px;display: none;}
#page .currentPage{
color: #fff;
background-color: #99cc33;
border: 1px solid #99cc33;
}3、編寫插件文件：
;(function($){
$.fn.pageShow = function(object){
var object = object || {},
pageCount = Math.abs(object.pageCount) || 20, //總頁數
currentPage = Math.abs(object.currentPage) || 1, //當前頁
pageNum = Math.abs(object.pageNum) || 5, //顯示頁數
appendVal;
pageNum = (pageNum%2)?pageNum:(--pageNum); //保證顯示頁數爲奇數
pageNum = (pageCount<pageNum)?pageCount:pageNum; //避免報錯
currentPage = (currentPage<=pageCount)?currentPage:1;
if (currentPage+pageNum>pageCount) {
appendVal = pageCount-pageNum+1;
}else{
appendVal = currentPage;
}
//初始化頁碼
for (var i = 0; i < pageNum; i++) {
$(this).find('li').eq(i).after("<li>"+(appendVal+i)+"</li>");
}
//設置首頁、末頁
if (pageCount>=pageNum+currentPage) {
$(this).find('.lastPage').show();
}
if (currentPage>1) {
$(this).find('.firstPage').show();
}
//設置當前頁樣式
$(this).find('li:contains('+currentPage+')').addClass('currentPage');
$(this).find('li').each(function(index){
$(this).click(function(){
var page = Number($(this).text()), //頁碼值
textVal = 0;
if (index == 0) { //當點擊首頁時
$(this).hide();
$('.lastPage').show();
currentPage = 1;
textVal = 1;
$(this).next().addClass('currentPage').siblings().removeClass('currentPage');
}else if (index == pageNum+1) { //當點擊末頁時
$(this).hide();
$('.firstPage').show();
currentPage = pageCount;
textVal = currentPage-pageNum+1;
$(this).prev().addClass('currentPage').siblings().removeClass('currentPage');
}else if (page <= ((pageNum+1)/2) || page >= pageCount-(pageNum-1)/2 ) { //當點擊前幾頁或者最後幾頁時
$(this).addClass('currentPage');
$(this).siblings().removeClass('currentPage');
}else{
$('.firstPage,.lastPage').show();
currentPage = page;
textVal = currentPage-(pageNum-1)/2;
$(this).parent().find('li').eq((pageNum-1)/2+1).addClass('currentPage').siblings().removeClass('currentPage');
}
if (textVal) { //切換頁碼值
for (var i = 0; i < pageNum; i++) {
$('#page').find('li').eq(i+1).text(textVal+i);
}
}
})
})
}
})(jQuery)4、編寫引用文件：
$(document).ready(function(){
$('#page').pageShow({
pageCount:10, //設置總頁數
pageNum:6, //設置顯示頁數（若是偶數，內部會減一轉換爲奇數）
currentPage:5 //設置當前頁
});
})至此完成一個分頁插件，歡迎指正。
完整插件下載地址：分頁插件。