?2. [代码][JavaScript]代码
/*!
* jQuery initPage
* Author:zdyue
*/
$.extend({
//obj:分页对象; currentNum:当前页； totalNum:总页数； callBackEvent：回调函数
initPage : function(options){
if(!options.obj){ return false; };
var obj = $(options.obj);
var currentNum = options.currentNum || 1;
var totalNum = options.totalNum || 5;
var callBackEvent = options.callBackEvent || function(){};
var strpage = "";
function ele(num, cls){
var str = "";
if(cls){
str = "<a href=‘#"+num+"‘ class=‘"+cls+"‘>"+num+"</a>";
}else{
str = "<a href=‘#"+num+"‘>"+num+"</a>";
}
return str;
}
//Current page is greater than 1 shows previous page
if (currentNum > 0) {
strpage = "<a href=‘#1‘>首页</a>";
obj.append(strpage);
}
if (currentNum > 1) {
strpage = "<a href=‘#"+ ( currentNum - 1 ) +"‘><<</a>";
obj.append(strpage);
}
if(totalNum <= 5){
for(var i=1; i<=totalNum; i++){
if(currentNum == i){
strpage = ele(i, "now");
}else{
strpage = ele(i);
}
obj.append(strpage);
}
}else{
for(var i=1; i<=5; i++){
if(currentNum == 1 || currentNum == 2){
if(currentNum == i){
strpage = ele(i, "now");
}else{
strpage = ele(i);
}
}else if( (totalNum - currentNum) == 0 || (totalNum - currentNum) == 1 ){
if( (totalNum - currentNum) == 0 && i == 5){
strpage = ele( (totalNum - 5 + i), "now");
}else if( (totalNum - currentNum) == 1 && i == 4){
strpage = ele( (totalNum - 5 + i), "now");
}else{
strpage = ele( totalNum - 5 + i );
}
}else{
if(i == 3){
strpage = ele(currentNum-3+i, "now");
}else{
strpage = ele(currentNum-3+i);
}
}
obj.append(strpage);
}
}
if ((totalNum - currentNum) >= 2) {
strpage = "<a href=‘#‘>...</a>";
obj.append(strpage);
}http://www.bizhizu.cn/linglei/?
if ((totalNum - currentNum) >= 1) {
strpage = "<a href=‘#"+ ( currentNum + 1 ) +"‘>>></a>";
obj.append(strpage);
另类图片 strpage = "<a href=‘#" + (totalNum) + "‘>末页</a>";
obj.append(strpage);
}
callBackEvent(currentNum, totalNum);
obj.find("a").click(function(){
var currentNum = parseInt($(this).attr("href").substring(1));
obj.html("");
$.initPage({
obj : "#page",
currentNum : currentNum,
totalNum : totalNum,
callBackEvent :callBackEvent
});
return false;
});
}
})
3. [代码]调用
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>分页</title>
<style>
html,body{ margin:0 auto; text-align:center; }
.main{ font:12px/24px "Microsoft YaHei"; height:1000px; }
#page{ margin:100px auto; width:960px; text-align:center; }
#page a{ text-decoration:none; display:inline-block; height:24px; padding:0 8px; border-radius:3px; background-color:#DEF39E; color:#8CAC2C; text-align:center; margin:0 2px; }
#page a:hover,#page .now{ background-color:#8CAC2C; color:#fff; transition:all .5s ease 0s; }
</style>
</head>
<body>
<div id="main">
<div id="page">
</div>
<div> <a class="back">1-20 </a></div>
</div>
</body>
</html>
<script>
$(function () {
$.initPage({
obj: "#page",
currentNum: 1,
totalNum: 20,
callBackEvent: function (now, all) {
$(".back").html(now + "-" + all);
}
});
});
</script>
