目录
  • 网站素材
  • PS素材
  • 成语素材
  • 图片素材
  • 名字素材
  • 签名素材
  • 头像素材
  • 技术笔记
  • 首页 > 网站素材 / 正文

    JS形式对帝国ecms分页导航进行修改

    素材 网站素材 素材网 www.bdqn.cc
    有时候呢,制作模板或者仿制模板的时候,由于为了美观会对不同的列表使用不同的分页导航样式!
    或许有的朋友说,直接使用帝国默认的分页导航,从新定义样式,这个方法对于改动不大的人来说或许确实是不二选择!
    但如果改动过大,或者想每个栏目的分页导航都不一样那该怎么办呢?帝国的分页导航标签模板只能定义一个,不可以定义多个!
    下面是我自己的解决方法,是使用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("&nbsp;&nbsp;&nbsp;&nbsp;");
    a=a[0].split("&nbsp;");
    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

    标签列表

    我的素材网 www.bdqn.cc