实用漂亮的翻页 DEDECMS实用漂亮的翻页效果修改方法

时间:2021-03-17 人气:0

想了解DEDECMS实用漂亮的翻页效果修改方法的相关内容吗，在本文为您仔细讲解实用漂亮的翻页的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：DEDECMS,翻页，下面大家一起来学习吧。

在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例).
一.内容页分页代码修改
首先介绍下基础知识,dede的内容页调用标记是:

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

生成html后形式为:

<div class="cupage"><a href='#'>上一页</a><strong>1</strong><a href='#'>2</a> <a href='#'>下一页</a></div> 

这里分析下,cupage的class控制整个分页区域的样式,"上一页"和"下一页"的样式可以通过控制A标签的样式来更改,而当前页,比如这里的"1"是用
标记包围的,当然可以通过定义标记的样式实现当前页码与其他页码的样式不同.
然后再分析下下载的翻页效果代码,我们以第一个Digg Style为例.
首先看下Digg Style的html代码:

复制代码代码如下:

<div class="digg"> 
<span class="disabled"> < </span> 
<span class="current">1</span> 
<a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#? 
page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a> 
<a href="#?page=2"> > </a> 
</div> 

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

生成后是:

复制代码代码如下:

 
<div class="pages"><div class="plist"> 
<a href='#'>首页</a> 
<strong>1</strong> 
<a href='#'>2</a> 
<a href='#'>下一页</a> 
<a href='#'>末页</a> 
</div> 
</div> 

和内容页的差不多,简单分析下.pages和plist控制整个分页区域的样式,依然是控制当前页码的样式,其他的链接用的是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.=" 上一页";

然后找到569行,改为:

复制代码代码如下:

else $PageList.= " 下一页";

保存后退出.
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

加载全部内容