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


在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例).
一.内容页分页代码修改
首先介绍下基础知识,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
}

当前1/3页 123下一页阅读全文

(0)

相关推荐

  • phpcms模块开发之swfupload的使用介绍

    正式接触phpcms模块开发后.开发了几个功能模块.其中遇到了需要批量上传图片的问题.于是开始挖掘phpcms里面的swfupload的用法. 在phpcms里面自带的内容类型里面能够直接指定图片组.不过这样的图片组功能并不是我想用的.我需要上传一整个静态的html文件.需要 能够找到一个方法上传整个文件夹.并且能够保留原来的文件名称. 目的总结如下: 1,不改变系统的文件和目录结构. 2,实现多附件上传功能. 3,能够得到上传后的文件夹名称. 在phpcms中自带了附件上传的功能.我想去用sw

  • dedecms负载性能优化实例,三招让你的dedecms快10倍以上第1/2页

    还是因为一个表的大数据造成性能严重下降?难道我们必须通过分多个表来存储才能解决问题吗?以下我们通过一个实例来解析和优化dedecms的数据管理性能,千万别让mysql当替罪羊,罪莫大焉. 测试数据是无意中得到的企业黄页的数据,数据量将近90万,都是完全真实的数据,测试使用的程序是dedecms4.0版本,你问为什么不用dedecms5.1?那是因为我们为了优化,针对dedecms做了很多修改,如果使用dedecms5.1,我们害怕收到法院传票--,补充一句,以下的优化方法均能在dedecms5.

  • 建站常用13种PHP开源CMS比较

    1.曼波-MAMBO,一个国外的CMS系统 ,功能 很强大,支持添加很多组件,模块;拥有丰富的模板 官方:http://www.mamboserver.com 2.凌波-Limbo(Lite Mambo),顾名思义,是从Mambo演化而来.其目的是在继承Mambo一些强大的功能和特性的同时,对原Mambo系统进行简化,使之变得更加轻便小巧.同时,Limbo支持三种安装方式:TXT.Mysql.SQLite. 官方:http://www.limbo-cms.com 3.HBcms :一个以PHP官

  • 帝国cms目录结构分享

    / 系统根目录 ├d/ 附件和数据存放目录 (data) │├file/    附件存放目录 │├js/       JS调用生成目录 │└txt/        内容存文本存放目录 ├e/          系统程序目录 (empire) ├html/       自定义内容页存放预设目录 ├images/    默认模板图片目录 ├s/          专题目录 (special) ├search/    高级搜索页面目录 ├skin/       模板CSS和图片存放目录 └index.

  • DEDECMS5.3所有PHP页面和后台打开全部空白的解决办法

    1.先排除PHP环境混乱问题,检查PHP目录下的libmysql.dll和system32下的同名文件大小是否相同,如果不同把system32下的干掉,然后把PHP目录下的拷过去一个覆盖,之前要先停IIS,否则会提示你正在被占用! 2.如果问题还没解决,重新下载个单独的PHP安装包,如星外的,他们打包的最新版是5.2.11,安装前先把原来的环境删除干净!! 3.如果照上面的做了问题还没解决,说明你的网站下的程序被修改过,找个以前正常使用的备份文件恢复一下即可,比较保险的做法是先直接解压以前正常的

  • dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)

    具体的实现代码,如下:下面会给简单的说明. 复制代码 代码如下: <?php /* 1. 配置好你的数据库连接 2. 注意数据表名的前缀 默认为dede_ 3. 一定要先备份你的数据库 或备份dede_archives表 如产生损失本人概不负责 */ //数据库连接设置 $ip = "localhost"; //地址 $user = "jb51"; //用户名 $pw = "www.jb51.net"; //密码 $db = "j

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

    在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例). 一.内容页分页代码修改 首先介绍下基础知识,dede的内容页调用标记是: 复制代码 代码如下: <div class="cupage">{dede:pagebreak/}</div> 生成html后形式为: 复制代码 代码如下: <div class="cupage"><a href='#'>上一页</a><strong&

  • 使用jQueryMobile实现滑动翻页效果的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢

  • linux shell的输出效果修改方法(界面颜色)

    文本终端的颜色可以使用"ANSI非常规字符序列"来生成.举例: echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置背景成为蓝色,前景白色,闪烁光标,输出字符"ME",然后重新设置屏幕到缺省设置,输出字符 "COOL"."e"是命令 echo 的一个可选项,它用于激活特殊字符的解析器."\033"引导非常规字符序列."m"意味着

  • JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • javascript绘制漂亮的心型线效果完整实例

    本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <style> div{ position:absolute; } .xx-box{ left:50%; top:50%;

  • Android自定义控件eBook实现翻书效果实例详解

    本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; public class Book extend

  • 一个JS翻页效果

    <IFRAME border=0 align=center marginWidth=0 marginHeight=0 src="1.htm" frameBorder=no width=200 scrolling=no height=200 style="border: 1px solid #CCCCCC" id="pic"></IFRAME> <a href="javascript:Page(-1)&quo

  • 巧用ViewPager实现驾考宝典做题翻页效果

    效果如下所示: 思路: a.利用ViewPager自带的动画效果,略作修改,实现滑动覆盖翻页效果. b.移动时加入阴影效果. 1.关键代码如下所示: public class ReaderViewPager extends ViewPager { public ReaderViewPager(Context context) { this(context, null); } public ReaderViewPager(Context context, AttributeSet attrs) {

  • ios电子书翻页效果代码详解

    近实现了一个完整的电子书阅读器,支持txt和epub格式的电子书阅读,其中epub支持图文混排的方式展示.本文主要谈谈其中两种翻页效果的实现,分别为仿真翻页和水平滑动翻页. 仿真翻页 最合适的方案就是使用系统提供的UIPageviewcontroller了,不过默认的UIpageviewcontroller翻页时背面是白色的,而阅读器通常都会有背景色或背景图片,翻页时用户体验就很糟糕,比如就像下面这样 所以接下来主要说说如何修改背面颜色以达到美观的翻页效果. UIpageviewcontroll

  • javascript移动端 电子书 翻页效果实现代码

    这篇文章主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果 1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q

随机推荐