pbootcms模板制作教程八:自定义分页样式

2022-12-25 0 2,386

要自定义分页,首先要使用分页。

根据PbootCMS官方文档,分页标签有两种:

系统内置的完整分页条

{page:bar}

独立的分页元素标签,可自由搭配使用

{page:current}、{page:count}、{page:rows}…等

 

第一种:系统内置的完整分页条

<div class=”paging”>{page:bar}</div>

pbootcms模板制作教程八:自定义分页样式

而且,每个元素都已经拥有了自己的样式名称,例如:.page-status、.page-inde…等。

 

接下来只要写上对应的CSS进行美化就可以了。

例如:

/* 分页样式 */
.paging { margin-top: 32px; font-size: 14px; }
.paging > span { margin: auto 16px; }
.paging .page-numbar { margin: auto 0; }
.paging .page-numbar .page-num,
.paging .page-index,
.paging .page-pre,
.paging .page-next,
.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }
.paging .page-numbar .page-num-current,
.paging .page-numbar .page-num:hover { border-color: #8667F7; color: #8667F7; }

处理后效果:

pbootcms模板制作教程八:自定义分页样式

 

第二种:独立的分页元素标签

如果有需求需要对分页条的内容进行自定义,那么看以本站的分页代码为例:

//通过{page:count}来判断当前列表的分页数量,如果超过1页则显示分页条
{pboot:if(‘{page:count}’ > 0)}

//分页容器
<div class=”uk-text-center frontier-paging”>
<ul class=”uk-clearfix”>

//{page:index}以及{page:pre}指定首页和上一页的链接地址,并且可以在a标签中自由设置首页或者上一页的文字
<a class=”first” href=”{page:index}”><i class=”fa fa-angle-double-left”></i></a>
<a class=”uk-visible@s prev” href=”{page:pre}”><i class=”fa fa-angle-left”></i></a>

//分页条
{page:numbar}

//同首页和上一页,这里是尾页和下一页
<a class=”uk-visible@s next” href=”{page:next}”><i class=”fa fa-angle-right”></i></a>
<a class=”last” href=”{page:last}”><i class=”fa fa-angle-double-right”></i></a>
</ul>
</div>
{/pboot:if}

添加样式美化:

/* 分页样式 */
.frontier-paging { margin-top: 32px; }
.frontier-paging ul { display: inline-block; vertical-align: bottom; }
.frontier-paging ul span,
.frontier-paging ul a { display: block; float: left; margin: auto 2px; padding: 4px 12px; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.07); border-radius: 2px; font-size: 14px; color: #999; }
.frontier-paging ul a.page-num-current,
.frontier-paging ul a:hover { background: #775BFF; color: #FFF; }

处理后效果:

pbootcms模板制作教程八:自定义分页样式

 

总结:还是以前所说的,PbootCMS的各种标签已经非常丰富,能不能做出好的东西,就看能不能熟悉标签,自由组合来达成各种需求。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:1、本站资源均来源于用户上传和网络传播,因此不包含技术服务,请大家谅解!2、本站所有资源仅可用于学习交流,若有商业用途之需,请购买正版,否则产生的一切后果将由下载用户本人自行承担。3、本站资源均来源于用户上传和网络传播,如侵犯您的权益,请务必联系客服(E-mail: 469663672@qq.com)删除。4、本站不保证所提供资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!5、本站资源均来源于用户上传和网络传播,仅供学习交流、参考和研究,请理解这个概念,所以不能保证每个细节都符合您的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款,请知悉后再支付下载!

新科源码 PbootCMS教程 pbootcms模板制作教程八:自定义分页样式 https://www.xinke123.net/1758.html

常见问题
  • 因为源码、模板和插件等资源具有可复制性、可传播性,仅用于学习研究,不可商用,订单一旦生效,不支持退换,所以请您务必看清楚后再购买。
查看详情
  • 我们承诺资源均和演示效果图一样,如有不同,全额退款,并且我们的源码和模板都没有留后门,请放心使用。
查看详情

相关资源

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务