有时候呢,制作模板或者仿制模板的时候,由于为了美观会对不同的列表使用不同的分页导航样式!
或许有的朋友说,直接使用帝国默认的分页导航,从新定义样式,这个方法对于改动不大的人来说或许确实是不二选择!
但如果改动过大,或者想每个栏目的分页导航都不一样那该怎么办呢?帝国的分页导航标签模板只能定义一个,不可以定义多个!
下面是我自己的解决方法,是使用JS进行处理!
先来看分页导航函数:
参数解释:
Tota 表示总分页数
fnum 表示一次最多显示多少个分页连 比如 |< 1 2 3 4 5 >|
Pagenb 表示当前分页号
thtml 表示模板
Symbol 表示附件符号 比如帝国的分页是以下划线加分页号 如:index_2.html,index_3.html 其中的“_”就是附件符合
oneAdd 表示是不是显示第一个分页下标 1 帝国的分页1 是index.html 如果这个参数是false 则是第一个分页显示index.html这样,如果是true 则显示类似这样 index_1.html
---------------
function PageList(Tota,fnum,Pagenb,thtml,Symbol,oneAdd){
var Tota=parseInt(Tota),fnum=parseInt(fnum),Pagenb=parseInt(Pagenb);
if(fnum>0){
var startpage;//取得本组的开始页
var endpage;//取得本组的最后页
var str_nextunit="";// >>|
var str_preunit="";// |<<
var str_xia="";// >
var str_shang=""; // <
var str_num="";
var I;
fnum=fnum%2==0?(fnum=fnum 1):fnum;
var thisunit=Math.ceil(Tota/fnum);//多少组
var fn=parseInt(fnum/2);
if(Pagenb<fnum){
startpage=1;
endpage=fnum;
endpage=(endpage>Tota)?Tota:endpage;
if(Pagenb-fn>0){
startpage=Pagenb-fn;
endpage=Pagenb fn;
endpage=(endpage>Tota)?Tota:endpage;
if(Tota<fnum){
startpage=(endpage<=Tota)?1:startpage;
}
}
}else{
if(Pagenb-fn>0){
startpage=Pagenb-fn;
endpage=Pagenb fn;
}
if(endpage>Tota){
var c=endpage-Tota;
startpage=startpage-c;
endpage=Tota;
}
}
if(thisunit>1){
var nextunit=endpage 1;
if(nextunit>Tota){
nextunit="";
}
var preunit=startpage-1;
if(preunit<=0){
preunit="";
}
if(nextunit!=""){
nextunit="_" nextunit;
str_nextunit=thtml['str_nextunit'].replace(/{url}/g,nextunit);
}
if(preunit!=""){
preunit=(preunit==1)?"":"_" preunit;
str_preunit=thtml['str_preunit'].replace(/{url}/g,preunit);
}
}
if(Pagenb!=0 && (Pagenb-1)>0){
if(oneAdd){
I=Symbol (Pagenb-1);
}else{
I=((Pagenb-1)==1)?"":Symbol (Pagenb-1);
}
str_shang=thtml['str_shang'].replace(/{url}/g,I);
}
if(Pagenb!=Tota && (Pagenb 1)<=Tota){
str_xia=thtml['str_xia'].replace(/{url}/g,Symbol (Pagenb 1));
}
for(var i=startpage;i<=endpage;i ){
if(oneAdd){
I=Symbol i;
}else{
I=(i==1)?"":Symbol i;
}
if(i==Pagenb){
str_num =thtml['str_num_a'].replace(/{url}/g,I).replace(/{i}/g,i);
}else{
str_num =thtml['str_num_b'].replace(/{url}/g,I).replace(/{i}/g,i);
}
}
return str_preunit str_shang str_num str_xia str_nextunit;
}
}上面就是了,没多复杂,也就那样!!!
调用方法,我们以帝国的栏目分页标签:[*--show.page--](注意:把*替换成!,防止被解析!)
首先第一步,在列表模板中引入JQ库:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
然后在模板中的</herd>标签前增加如下代码:
<scrupt>
$(document).ready(function(){
PageListcan();
});
function PageListcan(){
var a=$("#pe100_page_内容信息列表_wh日志列表").html();
a=a.replace(/页次:/g,"").replace(/每页/g,"").replace(/总数/g,"").split(" ");
a=a[0].split(" ");
var Pagenb=parseInt(a[0].split("/")[0]);//当前页码
var Tota=parseInt(a[0].split("/")[1]);//总页数
var mei=parseInt(a[1]);//每页显示
var num=parseInt(a[2]);//信息总数
var fnum=10;//导航显示分页链接数,最好是奇数
var thtml=[];//模板
thtml['str_nextunit']="<a href='index{url}.html' title='下一组'><em>>>|</em></a>";//下一组
thtml['str_preunit']="<a href='index{url}.html' title='下一组'><em>|<<</em></a>";//上一组
thtml['str_xia']="<a href='index{url}.html' title='下一页'><em>>|</em></a>";//下一页
thtml['str_shang']="<a href='index{url}.html' title='上一页'><em>|<</em></a>";
thtml['str_num_a']="<span class='on'><em>{i}</em></span>";//当前页面分页
thtml['str_num_b']="<a href='index{url}.html' title='第{i}页'><em>{i}</em></a>";//其他页面分页循环
var Page=PageList(Tota,fnum,Pagenb,thtml,"_",false);
if(num>mei){
$("#pe100_page_内容信息列表_wh日志列表").html('<a class="first" href="index.html" title="首页"><em>首页</em></a>' Page '<a href="Index_' Tota '.html" title="末页"><em>末页</em></a>');
}else{
$("#pe100_page_内容信息列表_wh日志列表").html("");
}
}
</script>
到这里基本完成了,CSS样式什么和分页导航模板也可以在上面修改和定义,后面都有注释!
值得说明的是:上面红色的部分只的是你[*--show.page--](注意:把*替换成!,防止被解析!)这个标签所在的DIV!比如我Body中这样写的:
<html>
....
<body>
<div id="pe100_page_内容信息列表_wh日志列表">[*--show.page--](注意:把*替换成!,防止被解析!)</div>
</body>
</html>
比如模板是这样的,生成后类似这样,以我的博客列表为例:
<html>
....
<body>
<div id="pe100_page_内容信息列表_wh日志列表">[*--show.page--](注意:把*替换成!,防止被解析!)</div>
</body>
</html>
上面的代码如果不执行前面写到的JS函数,效果是这样:
TAGS : 帝国ecms