栏目导航

热点推荐

阅览排行

当前位置：主页>程序集锦>DEDE>资讯:DEDECMS打造实用漂亮的翻页效果!

DEDECMS打造实用漂亮的翻页效果!

www.jz123.cn 2008-08-24 来源: 中国建站编辑整理我要投递新闻

为了庆祝今天ID解封,特发一篇小教程,针对新手的,讲错的地方欢迎指正,下面开始教程.

首先看下这个网页:http://www.mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/,

在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例).

一.内容页分页代码修改

首先介绍下基础知识,dede的内容页调用标记是:

<div class="cupage">{dede:pagebreak/}</div>

生成html后形式为:

这里分析下,cupage的class控制整个分页区域的样式,"上一页"和"下一页"的样式可以通过控制A标签的样式来更改,而当前页,比如这里的"1"是用
<strong></strong>标记包围的,当然可以通过定义<strong>标记的样式实现当前页码与其他页码的样式不同.

然后再分析下下载的翻页效果代码,我们以第一个Digg Style为例.
首先看下Digg Style的html代码:

名为digg的class跟cupage作用一样,控制整个分页区域的样式,它这里的上一页和下一页用<和>代替了,而且设置了不同的样式,因为如果在第一页的话,上一页
这个链接是不可用的,所以区别了下一页的样式,但是dede在这里有个bug,从生成的html的代码也可以看出,当页码在第一页的时候,那个上一页依然是可点的,这个后面会给出解决方法.名为current的class控制的是当前页码的样式,这个和dede的<strong>标签的样式是一样的作用,像2.3...这样的页码样式和dede的一样,都用的是A标签,把这里的A标签的css搬到dede里就行了.

好了,分析到这就可以对照着Digg Style的css重写dede的分页css了,
Digg Style的css:

DIV.digg {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
    BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN:

2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099

1px solid
}
DIV.digg A:active {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099

1px solid
}
DIV.digg SPAN.current {
    BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-

BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR:

#000099
}
DIV.digg SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;

BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

首先来写cupage的css代码:

.cupage {
    width:638px;
    text-align:center;
    line-height:31px;
    overflow:hidden;/*上面保留官方默认的一些css代码下一行把Digg Style的DIV.digg的代码复制过来这里我做了些精简效果一样只是写法不同*/
    padding:3px;
    margin:3px;
  }

然后来当前页码的css:

.cupage strong {
        /*从DIV.digg SPAN.current复制过来即可我这里同样做了精简*/
        border: #000099 1px solid;
        padding:2px 5px;
        margin:2px;
        color:#fff;
        background-color:#000099;
        font-weight:bold;
        font-size:14px;/*此句定义字体大小保留自官方的strong样式*/
  }  ：

下面来编写A标签的样式,它控制的是非当前页码和上一页.下一页的样式:

.cupage a {
        line-height:31px;
        font-size:14px;/*以上保留自官方css 下面的直接拷贝DIV.digg A中的样式*/
        border: #aaaadd 1px solid;
        padding:2px 5px;
        margin: 2px;
        color: #000099;
        text-decoration: none;
   }
  .cupage a:hover {
        /*鼠标悬停的状态照搬DIV.digg A:active*/
        border: #000099 1px solid;
        color: #000;
   }
  .cupage a:active {
        /*照搬DIV.digg A:active*/
        border: #000099 1px solid;
        color: #000;
   }

这样css就写完了,打开article.css,删掉253-256行,加入上面的css代码即可.其他的翻页样式都大同小异,参照上面的讲解慢慢改吧.

二.列表页分页代码修改

会改了内容页,列表页就很容易了,都差不多,这里同样以Digg Style为例.
首先来看看列表页的分页代码:

<div class="pages"><div class="plist">{dede:pagelist listsize='4' listitem='index pre pageno next end '/}</div></div>

生成后是:

和内容页的差不多,简单分析下.pages和plist控制整个分页区域的样式,依然是<strong></strong>控制当前页码的样式,其他的链接用的是A标签,这里的分页没
有内容页的bug,就是页码在第一页的时候,上一页的链接会不显示,真搞不懂,列表页都正常,内容页却有bug,服了...

下面来写css样式:

.pages .plist{
    float:left;
    line-height:17px;
    padding:3px;
    margin:3px;
}
.pages strong {
        display:block;
        float:left;
        border: #000099 1px solid;
        padding:2px 5px;
        margin:2px;
        color:#fff;
        background-color:#000099;
        font-weight:bold;
}
.plist a {
        display:block;
        height:17px;
        float:left;
        color:#000;
        border: #aaaadd 1px solid;
        padding:2px 5px;
        margin: 2px;
        color: #000099;
        text-decoration: none;
}
.plist a:hover{
        border: #000099 1px solid;
        color: #000;
}
.plist a:active {
        border: #000099 1px solid;
        color: #000;
}

用上面的代码替换dede.css中230-298行分页样式就行了,注意只替换上面代码重新定义的样式,其他的默认分页样式(如input buttom)不要动.

三修正内容页bug.

其实早些时候我看mb5u的站已经修正了这个问题,他的内容页分页实现了页码在第一页的时候,上一页的链接为不可点的形式,而且我看它的分页css代码和上面
讲到的24个翻页代码css代码命名方式一样,可见,mb5u也是抄袭的,而且没有把这个问题的解决方法共享,首先鄙视下身为版主的他?∩?（???）?∩?

下面由于涉及到修改dede的php文件,请首先做好备份,这里也不在进行详细解释(实际上我也不懂php,也就没法解释...),直接给操作方法.

1. 打开include目录下的inc_archives_view.php文件,找到552行,改为:

if($nowPage==1) $PageList.="<span class='disabled'> 上一页</span>";

然后找到569行,改为:

else $PageList.= "<span class='disabled'> 下一页</span>";

保存后退出.

2. 在内容页的css加入下面的代码:

.cupage .disabled {
        /*照搬DIV.digg SPAN.disabled即可*/
        border: #eee 1px solid;
        padding: 2px 5px;
        margin: 2px;
        color: #ddd;
}

3. 重新生成html即可.


TIPS:到这里bug就修正了,但是有个小问题这里提一下,就是24个翻页样式中上一页和下一页用了<PRE和NEXT>代替了,mb5u也是没有用上一页和下一页,也用的是英文,具体原因为什么呢?这里不做解释,有兴趣的朋友试试就知道了,下面提示替换方法(懒的一步一步写了给出全部代码):
直接把inc_archives_view.php的546-571改为:

function GetPagebreak($totalPage,$nowPage,$aid)
    {
        if($totalPage==1){ return ""; }
        $PageList = '';   // "共".$totalPage."页: ";
        $nPage = $nowPage-1;
        $lPage = $nowPage+1;
        if($nowPage==1) $PageList.="<span class='disabled'> < PRE</span>";
        else{
          if($nPage==1) $PageList.="<a href='".$this->NameFirst.".".$this->ShortName."'>< PRE</a> ";
          else $PageList.="<a href='".$this->NameFirst."_".$nPage.".".$this->ShortName."'>< PRE</a> ";
        }
        for($i=1;$i<=$totalPage;$i++)
        {
            if($i==1){
              if($nowPage!=1) $PageList.="<a href='".$this->NameFirst.".".$this->ShortName."'>1</a> ";
              else $PageList.="<strong>1</strong>";
            }else{
              $n = $i;
              if($nowPage!=$i) $PageList.="<a href='".$this->NameFirst."_".$i.".".$this->ShortName."'>".$n."</a> ";
              else $PageList.="<strong>$n</strong>";
            }
        }
        if($lPage <= $totalPage) $PageList.="<a href='".$this->NameFirst."_".$lPage.".".$this->ShortName."'>NEXT></a> ";
        else $PageList.= "<span class='disabled'> NEXT></span>";
        return $PageList;
    }

现在看看最终的效果吧

到这里教程就写玩了,累死我了,希望大家可以喜欢,以后我还会写一些有关模板方面的教程,太高深的俺也搞不来....附件提供下载的有:24款翻页代码,修改好

bug的inc_archives_view.php文件php文件覆盖时一定要备份原文件,另外此法只针对生成静态页面的站点有效,使用动态页面的参照上面步骤自己研究下就会改

下载：css翻页代码.rar

inc_archives_view.rar

顶一下

上一篇：dedecms完美调用dz(discuz)论坛贴子解决方法下一篇：DEDECMS:TAG作为文章发布后关键字meta keywords的修改办法

栏目导航

热点推荐

阅览排行

DEDECMS打造实用漂亮的翻页效果!

相关文章列表

评论总数：1 条 [ 查看全部 ] 网友评论