笔记:JQuery实现客户端静态分页

最近发现置顶文章越来越多,占了首页很大一片位置,又不想限制置顶文章的输出数量,所以考虑用万能的jquery写了一个分页效果的代码!效果见本站首页的置顶文章处,实现方法如下:

在页面加载的任意一个js文件中添加如下的js功能函数:

JavaScript代码

var pageSize = 6;  //每页显示的记录数   
function displayPage(page){      
$("#pageLabel a").removeClass("intro");  //移除所有分页链接的intro样式    
$("#pageLabel a#p"+page).addClass("intro");   //给当前页面的分页链接增加intro样式   
var begin=(page-1)*pageSize;//起始记录号      
var end=page*pageSize;//终止记录号      
$("ul#TOP_ART li").hide();      
$("ul#TOP_ART li").each(function(i){      
if(i>=begin && i<end)//显示第page页的记录      
$(this).show();      
});      
return false;      
}      
        
function pageLabel(){      
var page=($("ul#TOP_ART li").length-1)/pageSize+1;//根据记录条数,计算页数      
var pageLabel=''  
for(i=1;i<=page;i++)      
pageLabel+="<a href='javascript:void("+i+")' id='p"+i+"' onclick='displayPage("+i+");'>"+i+"</a>";      
$("#pageLabel").html(pageLabel);//显示分页控制列表      
}

这里阿诺是增加到了themes/Sean_Cms/Script/common.js文件中了,使用Sean_Cms模版的用户都可以加到这个js中,其他站点可在任意一个页面加载的js文件中增加,又或者直接在页面上增加:

JavaScript代码

<script type="text/javascript">   
var pageSize = 6;  //每页显示的记录数   
function displayPage(page){      
$("#pageLabel a").removeClass("intro");      
$("#pageLabel a#p"+page).addClass("intro");      
var begin=(page-1)*pageSize;//起始记录号      
var end=page*pageSize;//终止记录号      
$("ul#TOP_ART li").hide();      
$("ul#TOP_ART li").each(function(i){      
if(i>=begin && i<end)//显示第page页的记录      
$(this).show();      
});      
return false;      
}      
       
function pageLabel(){      
var page=($("ul#TOP_ART li").length-1)/pageSize+1;//根据记录条数,计算页数      
var pageLabel=''   
for(i=1;i<=page;i++)      
pageLabel+="<a href='javascript:void("+i+")' id='p"+i+"' onclick='displayPage("+i+");'>"+i+"</a>";      
$("#pageLabel").html(pageLabel);//显示分页控制列表      
}      
</script>

这里要注意了直接在页面上增加的js代码一定要在首位添加<script type="text/javascript">....</script>,在js文件中就不用了,这里的代码仅适用于Sean_Cms模版的用户,其他应用位置仅修改一下对应的id号即可,最后在文章底部增加:

$(document).ready(function(){      
pageLabel();displayPage(1);      
});

最后要在模版中添加<DIV id="pageLabel"></DIV>这段代码来作为显示分页按钮的容器,注意ID如果要改成别的话,js中对应的id也要改,本站这段代码是添加在了./themes/Sean_Cms/template/default.html文件中的下面位置(之前忘记写这段,现在补上):

<DIV CLASS="NEW_INFO LEFT">  
<H2><FONT color="#990000">置顶</FONT>推荐</H2>  
<UL id="TOP_ART" CLASS="TOP_ARTICLES">  
<#CACHE_INCLUDE_SEAN_TOP_ARTICLES#>  
</UL>  
<DIV id="pageLabel"></DIV>  //分页按钮容器,之前忘记写这段,现在补上
</DIV>

到这一步功能已经实现了,Sean_Cms模版的用户可直接在/themes/Sean_Cms/script/Sean_script.js文件的底部增加pageLabel();displayPage(1);   就可以了:

$(document).ready(function(){      
var autoscrolling = true;      
$('.infiniteCarousel').infiniteCarousel().mouseover(function(){autoscrolling=false;}).mouseout(function(){autoscrolling=true;});      
setInterval(function(){if (autoscrolling){$('.infiniteCarousel').trigger('next');}},5000);      
tab("#TRI","LI","#PICBOX","UL","mouseover");      
tab("#TRI_SIDEBAR","LI","#PICBOX_SIDEBAR","UL","mouseover");      
showMood();var id1=0;id1=window.setInterval("showMood()",60000);      
});

改成:

$(document).ready(function(){      
pageLabel();displayPage(1);      //增加的代码   
var autoscrolling = true;      
$('.infiniteCarousel').infiniteCarousel().mouseover(function(){autoscrolling=false;}).mouseout(function(){autoscrolling=true;});      
setInterval(function(){if (autoscrolling){$('.infiniteCarousel').trigger('next');}},5000);      
tab("#TRI","LI","#PICBOX","UL","mouseover");      
tab("#TRI_SIDEBAR","LI","#PICBOX_SIDEBAR","UL","mouseover");      
showMood();var id1=0;id1=window.setInterval("showMood()",60000);      
});

接下来就是分页的css样式了,这里提供本站的样式进行参考,大家可根据各自喜好进行修改:

#pageLabel a {      
font-family:Tahoma, Geneva, sans-serif;      
border:1px solid #ccc;      
background:#fff;      
font-size:10px;      
margin:2px;      
padding:2px 5px;      
color:#ccc    
}      
#pageLabel a:visited {      
border:solid 1px #ccc;      
}      
#pageLabel a:hover {      
border:solid 1px #ccc    
;background:#ccc;      
color:#fff;      
text-decoration:none;      
}      
#pageLabel a.intro {      
border:solid 1px #ccc;      
color:#fff;      
background-color:#ccc;      
margin:2px;      
padding:2px 5px;      
}      
#pageLabel {      
width:645px;      
overflow:hidden;      
whitewhite-space:nowrap;      
padding:0 5px;      
text-align:right    
}

评论列表

seanloo

#1
seanloo 博主(2011-04-28 10:23:02)

一班置顶文章还限制数量的话那还不如不要置顶了,所以才有了这个分页的效果的
seanloo

#2
seanloo 博主(2011-04-09 23:45:01)

呵呵,没注意,已经改过来了
seanloo

#3
seanloo 博主(2011-04-06 09:18:14)

只能说jquery太强大了,呵呵
seanloo

#4
seanloo 博主(2011-04-06 09:17:51)

嗯,这样就可以节省好多空间了
去皱眼霜

#5
去皱眼霜(2011-12-22 23:12:58)

编程 很费功夫的!
艾芯

#6
艾芯(2011-12-06 22:13:01)

我觉得分页有点耽误浏览
静脉曲张袜

#7
静脉曲张袜(2011-10-12 20:28:13)

JQuery貌似很难
数学伊甸园

#8
数学伊甸园(2011-06-12 20:06:01)

太感谢了我的问题解决了
zblog主题模板

#9
zblog主题模板(2011-05-31 08:32:58)

学习了,顶起!
温州SEO

#10
温州SEO(2011-04-16 14:10:34)

你好,我想问下首页置顶的文章数量怎么控制,我只想上他显示8篇文章 ,怎么做到,谢谢!
seanloo

#1
seanloo 博主(2011-04-28 10:23:02)

一班置顶文章还限制数量的话那还不如不要置顶了,所以才有了这个分页的效果的
kaka

#11
kaka(2011-04-09 21:01:59)

CSS最后多了个right~~分页条1 2 跑左边去了~~
seanloo

#2
seanloo 博主(2011-04-09 23:45:01)

呵呵,没注意,已经改过来了
谭汉勇

#12
谭汉勇(2011-04-05 23:25:29)

太完美了,收下
比尔

#13
比尔(2011-04-05 14:45:51)

确实挺强大的,学好JQuery看来功不可没!
seanloo

#3
seanloo 博主(2011-04-06 09:18:14)

只能说jquery太强大了,呵呵
小嘉

#14
小嘉(2011-04-04 22:55:44)

这个好,要记录下...
挂据

#15
挂据(2011-04-04 10:46:05)

又学习了一种静态处理
kaka

#16
kaka(2011-04-04 08:17:04)

这个好哇~~我也觉得置顶太多了~
seanloo

#4
seanloo 博主(2011-04-06 09:17:51)

嗯,这样就可以节省好多空间了

发表评论

(必填)

(必填)

(选填)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐文章