您现在的位置是:首页 > cms教程 > 帝国CMS教程帝国CMS教程

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

梁尉寒2023-05-18帝国CMS教程已有人查阅

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

帝国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>
        var num = $("#page").find("em").text();
        $(".nub").text(num);
        
        $(".pre").click(function(){
            var url = $("#page").find("b").prev().attr("href");
            
            if(url){
                window.location.href=url;
            }else{
                $(this).text("没有了")
            }
        })
        $(".next").click(function(){
            var url = $("#page").find("b").next().attr("href");
            if(url){
                window.location.href=url;
            }else{
                $(this).text("没有了")
            }
        })
        </script>

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

//返回内容分页
function sys_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='<a href="'.$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='<a href="'.$dolink.$prido.'">'.$fun_r['pripage'].'</a>';
	}
	//下一页
	if($page!=$totalpage)
	{
		$pagenex=$page+1;
		$nextpage='<a href="'.$dolink.$add[filename].'_'.$pagenex.$type.'">'.$fun_r['nextpage'].'</a>';
		$lastpage='<a href="'.$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='<a href="'.$dolink.$add[filename].$type.'">';
			$is_2="</a>";
		}
		else
		{
			$is_1='<a href="'.$dolink.$add[filename].'_'.$i.$type.'">';
			$is_2="</a>";
		}
		$returnstr.=''.$is_1.$i.$is_2;
	}
	$returnstr=$firststr.$toppage.$prepage.$returnstr.$nextpage.$lastpage;
	return $returnstr;
}

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

本文标签:帝国cms手机站 

很赞哦! ()

相关源码

  • (自适应响应式)瓷砖大理石装修建材类网站pbootcms模板html5模板本模板基于PbootCMS开发,针对瓷砖、大理石等建材行业特点进行优化设计。采用响应式布局技术,确保产品展示效果在不同设备上都能合理呈现。模板特别强化了石材纹理的视觉表现力,帮助建材企业更好地展示产品质感。查看源码
  • (PC+WAP)茶叶茶艺茶道茶文化pbootcms模网站源码下载本模板基于PbootCMS系统开发,为茶叶企业、茶艺培训机构设计,特别适合展示茶产品、茶道文化等内容。采用响应式技术,确保在不同设备上都能呈现优雅的茶文化氛围。查看源码
  • 自适应车行汽车租赁二手车行业企业网站模板为汽车租赁与二手车交易场景深度优化,采用PbootCMS内核开发,聚焦车辆展示、租赁流程与服务介绍三大核心模块。响应式布局确保PC与移动端数据实时同步,后台一键管理车辆信息查看源码
  • 帝国CMS7.5小说推荐公众号导航带wap手机站+带采集工具本模板为小说导航类网站设计开发,基于帝国CMS7.5内核构建,针对小说阅读领域的分类聚合需求进行深度优化。通过智能分类系统和用户行为分析,实现小说资源的精准推荐与导航功能。查看源码
  • 帝国cms7.2淘宝客导购自媒体博客网站模板源码本模板基于帝国CMS7.2内核深度开发,为淘宝客、商品导购类自媒体及博客网站设计。通过可视化后台管理,可快速搭建具备商品推荐、比价功能的内容平台,帮助用户实现流量高效转化。查看源码
  • 响应式艺考培训学校机构pbootcms模板html5源码基于PbootCMS免费开源内核开发,为艺考培训学校与艺术机构设计,替换图文即可快速适配全行业需求。响应式布局兼容手机/PC端,数据实时同步,运维效率提升300%。查看源码
分享笔记 (共有 篇笔记)
验证码: