最新公告
  • 欢迎您光临尘梦网,我们提供建站技术教学,帮助用户实现从技能提升到技能应用的能力闭环。立即加入我们
  • PbootCms自定义分页制作自己常用的分页风格

    内置分页效果

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

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

    系统内置的完整分页条

    1. {@page:bar}

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

    1. {@page:current}、{@page:count}、{@page:rows}…等

    我们先来看第一种:系统内置的完整分页条

    代码如下:

    1. <div class=”paging“>{@page:bar}</div>

    可以看到,一个完整的分页条就出来了。

    1544462011867173.png

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

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

    例如:

    1. /* 分页样式 */
    2. .paging { margin-top32pxfont-size14px; }
    3. .paging > span { margin: auto 16px; }
    4. .paging .page-numbar { margin: auto 0; }
    5. .paging .page-numbar .page-num,
    6. .paging .page-index,
    7. .paging .page-pre,
    8. .paging .page-next,
    9. .paging .page-last { display: inline-block; margin: auto 4pxpadding2px 12pxborder1px solid #EEEborder-radius2px; }
    10. .paging .page-numbar .page-num-current,
    11. .paging .page-numbar .page-num:hover { border-color#8667F7color#8667F7; }

    一个简单的分页样式就完成了:

    002.jpg

    怎么样?用PbootCMS作者的话来说:“是不是简单得想哭?”

    自定义分页效果

    如果有需求需要对分页条的内容进行自定义,那么看第二种:独立的分页元素标签

    以本站的分页代码为例:

    1. [email protected]:count}来判断当前列表的分页数量,如果超过1页则显示分页条
    2. [email protected]:if(@page:count}>0)}
    3. //分页容器
    4. <div class=“uk-text-center frontier-paging”>
    5.     <ul class=“uk-clearfix”>
    6. [email protected]:[email protected]:pre}指定首页和上一页的链接地址,并且可以在a标签中自由设置首页或者上一页的文字
    7.         <a class=“first” href=[email protected]:index}”><i class=“fa fa-angle-double-left”></i></a>
    8.         <a class=[email protected] href=[email protected]:pre}”><i class=“fa fa-angle-left”></i></a>
    9.         //分页条
    10. [email protected]:numbar}
    11.         //同首页和上一页,这里是尾页和下一页
    12.         <a class=[email protected] href=[email protected]:next}”><i class=“fa fa-angle-right”></i></a>
    13.         <a class=“last” href=[email protected]:last}”><i class=“fa fa-angle-double-right”></i></a>
    14.     </ul>
    15. </div>
    16. {@/pboot:if}

    添加样式美化:

    1. /* 分页样式 */
    2. .frontier-paging { margin-top32px; }
    3. .frontier-paging ul { display: inline-block; vertical-align: bottom; }
    4. .frontier-paging ul span,
    5. .frontier-paging ul a { display: block; float: left; margin: auto 2pxpadding4px 12pxbackground#FFFbox-shadow0 0 8px rgba(0,0,0,0.07); border-radius2pxfont-size14pxcolor#999; }
    6. .frontier-paging ul a.page-num-current,
    7. .frontier-paging ul a:hover { background#775BFFcolor#FFF; }

    效果图:(由于演示站没有加载字体图标,箭头就用普通的<>来表示了)

    003.jpg

    教程到此为止,剩下的就靠大家自由发挥了。

    尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    尘梦网 » PbootCms自定义分页制作自己常用的分页风格

    常见问题FAQ

    尘梦网是什么?
    尘梦网(itwork.ren)是互联网综合学习平台。尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    本站课程是否为1对1教学?
    本站为录播课程,可直接寻找对应课程观看,不定时会有直播课
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    免费下载或者会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供部分资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

    发表评论

    • 24350会员总数(位)
    • 367资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 343稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情