DEDECMS实用漂亮的翻页效果修改方法第1/3页

 更新时间:2008年10月15日 22:25:11   作者:  
有时候大家感觉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"是用
<strong></strong>标记包围的,当然可以通过定义<strong>标记的样式实现当前页码与其他页码的样式不同.
然后再分析下下载的翻页效果代码,我们以第一个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的<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
}

相关文章

  • dedecms v5 跳转网址 直接链接而非跳转的实现方法修正版

    dedecms v5 跳转网址 直接链接而非跳转的实现方法修正版

    最近在使用dedecms建站的时候发现这个问题,如果调转网址是直接的连接地址,效果就更好了,网上的版本有点来,我也是参考他们的整理出来的
    2008-07-07
  • DEDE添加迅雷专用链接(半迅雷化)

    DEDE添加迅雷专用链接(半迅雷化)

    半迅雷化专用链接,原来的地址仍然会显示,不利于隐藏真实下载地址,真实下载地址可直接通过源文件看到
    2008-11-11
  • dedecms采集过滤常用代码集合

    dedecms采集过滤常用代码集合

    dede采集过程中最麻烦的莫过于采集的正则过滤函数的编写。说实在的,dede在这点上和很多ASP CMS系统比如说动易等,采集的时候直接选择几个选项就可以了,简单的完成想过滤的东西。不过他们只局限于对文章内容的过滤不是很好。而DEDE却能对所有采集的字段进行过滤,功能上弥补了易用性的缺陷,期待柏拉图在后续版本中加上选择性过滤功能。
    2008-03-03
  • dedecms中如何在栏目列表和文章页面中获得当前栏目标题

    dedecms中如何在栏目列表和文章页面中获得当前栏目标题

    我们在使用dedecms中会发现,当我们打开栏目的列表页和文章页的时候,无论我们使用什么标签,都无法获得当前栏目的标题信息。究其原因是因为这两个页面所读取的信息主要来源于dedecms的dede_archives表及其附加表,仅通过传递栏目的id编号来区别不同栏目,因此我们通过类似{dede:field name=’typename’/}这样的方法是无法直接获得栏目名称的。但是我们依然可以通过程序的改造,利用栏目的唯一id编号,获得栏目名称。以下是实现方法:
    2008-03-03
  • DEDECMS后台数据备份还原的应用

    DEDECMS后台数据备份还原的应用

    前台与测试过程--之备份与还原
    2009-02-02
  • 实现dedecms图集单击图片翻页的功能

    实现dedecms图集单击图片翻页的功能

    题记:在很多相册的网站中,都有这样的功能:当图片分多页显示的情况下,点击图片会自动翻页到下一张图片,接下来我们在dedecms4中实现这个功能。以下是实现方法:
    2008-03-03
  • dedecms下仿chinaz二级下拉动态读取代码

    dedecms下仿chinaz二级下拉动态读取代码

    最近用dedecms模仿chinaz的模板,发现每次都用静态以后的文件特麻烦,没想到网上已经有高手给解决了,大家看代码
    2008-05-05
  • DEDE最简方式教你缩短软件列表的方法

    DEDE最简方式教你缩短软件列表的方法

    相信不少朋友用DEDE在做下载站吧,DEDE确实是广大站长 朋友的建站利器啊,偶也在用。可用着发现当中后台添加软件 时,软件的列表过长,导致页面打开比较慢,而且软件也不容易 找,好了,废话不多说,自己看吧。
    2008-03-03
  • DEDE 24小时内发布的信息日期为红色

    DEDE 24小时内发布的信息日期为红色

    主要是学习他的思路,以后我们就能很方便的增加功能了
    2008-08-08
  • 为dedecms增加栏目文章统计功能代码

    为dedecms增加栏目文章统计功能代码

    有些网友希望为dedecms增加栏目文章统计的功能,这个功能并不复杂,但是dedecms本身并没有此功能,以下是实现的方法:
    2008-03-03

最新评论