下载鸥 > 网站下载 > 开发教程 > 帝国CMS

帝国CMS结合JS自定义手机端内容分页样式

596 2021-02-05 16:07:26

收藏

帝国CMS自带的内容分页标签为[!--page.url--],在制作多终端模板的时候,[!--page.url--]在手机端就会显得太长了,如果删掉一些[!--page.url--]在电脑端又显得太短。

完美的方法是自定义一个分页函数,在对于新手朋友太难,这里精准像素分享一个简单的方法,利用JS来完成,不太完美但基本功能都能实现。

 

下面来说说代码,首先是模板代码

<div class="contentpage">
	<span class="pre">上一张</span>
<b class="nub"></b>
<span class="next">下一张</span>
<div id="page">[!--page.url--]</div>
</div>

然后是JS,

<script>
varnum=$("#page").find("em").text();
$(".nub").text(num);

$(".pre").click(function(){
varurl=$("#page").find("b").prev().attr("href");

if(url){
window.location.href=url;
}else{
$(this).text("没有了")
}
})
$(".next").click(function(){
varurl=$("#page").find("b").next().attr("href");
if(url){
window.location.href=url;
}else{
$(this).text("没有了")
}
})
</script>

最后是内容分页函数代码,在/e/class/t_functions.php里面

//返回内容分页
functionsys_ShowTextPage($totalpage,$page,$dolink,$add,$type,$search=""){
	global$fun_r,$public_r;
	if($totalpage==1)
	{
		return'';
	}
	$page_line=$public_r['textpagelistnum'];
	$snum=2;
	//$totalpage=ceil($num/$line);//取得总页数
	$firststr='<em>'.$page.'/'.$totalpage.'</em>';
	//上一页
	if($page<>1)
	{
		$toppage='<ahref="'.$dolink.$add[filename].$type.'">'.$fun_r['startpage'].'</a>';
		$pagepr=$page-1;
		if($pagepr==1)
		{
			$prido=$add[filename].$type;
		}
		else
		{
			$prido=$add[filename].'_'.$pagepr.$type;
		}
		$prepage='<ahref="'.$dolink.$prido.'">'.$fun_r['pripage'].'</a>';
	}
	//下一页
	if($page!=$totalpage)
	{
		$pagenex=$page+1;
		$nextpage='<ahref="'.$dolink.$add[filename].'_'.$pagenex.$type.'">'.$fun_r['nextpage'].'</a>';
		$lastpage='<ahref="'.$dolink.$add[filename].'_'.$totalpage.$type.'">'.$fun_r['lastpage'].'</a>';
	}
	$starti=$page-$snum<1?1:$page-$snum;
	$no=0;
	for($i=$starti;$i<=$totalpage&&$no<$page_line;$i++)
	{
		$no++;
		if($page==$i)
		{
			$is_1="<b>";
			$is_2="</b>";
		}
		elseif($i==1)
		{
			$is_1='<ahref="'.$dolink.$add[filename].$type.'">';
			$is_2="</a>";
		}
		else
		{
			$is_1='<ahref="'.$dolink.$add[filename].'_'.$i.$type.'">';
			$is_2="</a>";
		}
		$returnstr.=''.$is_1.$i.$is_2;
	}
	$returnstr=$firststr.$toppage.$prepage.$returnstr.$nextpage.$lastpage;
	return$returnstr;
}

CSS代码就不分享了,自己些吧。

本文地址:https://xzo.com.cn/develop/empire/222.html

有帮助,很赞!

信息来源:精准像素
导出教程 下载word版教程
发表评论 共有条评论
关于帝国CMS


帝国cms是一款功能极为强大的cms程序,性能强悍、安全性高,可轻松支持10万数据,高级开发人员可制作出能容纳千万数据量的网站,是国内最出色的开源cms程序之一,推荐企业用户使用

当前最新版本为7.5,8.0版本即将上线,新版本的核心优化点在于多终端的适配。

推荐帝国CMS开发教程
帝国cms父栏目数据为空怎么办?
帝国cms父栏目数据为空怎么办?

帝国CMS一级栏目和二级栏目使用同一个模板,二级栏目是终极栏目,调用本栏目数...

8 959
帝国CMS百度推送插件怎样将默认ID排序改为时间倒序?
帝国CMS百度推送插件怎样将默认ID排序改为时间倒序?

很多采集站点可能是这样操作的:采集好的资讯时间是采集时间,到了发布的时候会...

19 638
帝国CMS怎样做百万、千万级别数据库的网站?
帝国CMS怎样做百万、千万级别数据库的网站?

帝国CMS作为最强大的开源cms之一,其程序效率毫无疑问。但,帝国CMS真的可以做...

19 1336
帝国cms灵动标签怎样按字母调用信息?
帝国cms灵动标签怎样按字母调用信息?

帝国cms灵动标签是可以按照字母调用信息的,通过按字母调动,可以在信息分类时...

1 403
帝国cms下载判断设备环境安卓苹果并适配下载地址
帝国cms下载判断设备环境安卓苹果并适配下载地址

帝国cms静态站下载判断设备环境是安卓还是苹果,并自动适配下载地址,如果当前...

1 464
帝国cms安装模板里没有install文件夹怎么办?
帝国cms安装模板里没有install文件夹怎么办?

许多客户在使用帝国cms建站后想要再做一个网站,但复制所有的文件到新服务器...

0 459
帝国cms怎样判断一个栏目有没有子栏目?(父栏目换位判断原创方案)
帝国cms怎样判断一个栏目有没有子栏目?(父栏目换位判断原创方案)

在帝国cms站点的开发过程中,有时候需要判断栏目有没有下级栏目,如果有子栏目,...

3 432
帝国cms静态页中如何获取php设置的cookie值?
帝国cms静态页中如何获取php设置的cookie值?

帝国cms的前台页面,是生成的静态文件,如果想要直接获取cookie,或是直接生成页...

3 609
推荐插件
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 420
帝国cms百度AI图像去雾api接口对接插件
帝国cms百度AI图像去雾api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...

0 447
帝国cms纳米数据接口(足球比赛中最新数据)
帝国cms纳米数据接口(足球比赛中最新数据)

帝国cms 对接纳米数据(www.nami.com)接口,本接口主要接收、整理足球比赛实时数...

0 391
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 553
帝国cms多栏目多数据表自动审核推送插件
帝国cms多栏目多数据表自动审核推送插件

本插件基于帝国cms帝国cms每日自动审核插件,在自动审核指定条数信息的基础上...

0 908
帝国cms百度AI图像无损放大api接口对接插件
帝国cms百度AI图像无损放大api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像无损放大的功能。经过...

0 430
帝国cms在线考试系统模板插件
帝国cms在线考试系统模板插件

一直没看到好用的帝国cms在线考试插件,所以自己开发了一款。在线考试插件用...

0 1270
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1263
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入