pbootcms模板制作教程七 - 自定义分页样式

时间:2023-08-08 23:24 浏览:0 评论:0
0


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

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

 

系统内置的完整分页条

{page:bar}

 

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

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

 

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

代码如下:

{page:bar}

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)} //分页容器

  • //{page:index}以及{page:pre}指定首页和上一页的链接地址,并且可以在a标签中自由设置首页或者上一页的文字

  •        //分页条        {page:numbar}                //同首页和上一页,这里是尾页和下一页

{/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的各种标签已经非常丰富,能不能做出好的东西,就看能不能熟悉标签,自由组合来达成各种需求。

1. 本站所有资源来源于用户上传或网络,仅作为参考研究使用,如有侵权请邮件联系站长!
2. 本站积分货币获取途径以及用途的解读,想在本站混的好,请务必认真阅读!
3. 本站强烈打击盗版/破解等有损他人权益和违法作为,请各位会员支持正版!
4. Pbootcms > pbootcms模板制作教程七 - 自定义分页样式

用户评论