迅睿cms模板如何自定义分页css样式

迅睿教程 0 来源:老K模板网 收藏

迅睿cms中列表页面分页标签变量写法是分页标签变量是{$pages}系统会自动生成分页html代码,针对这种系统生成出来的分页样式,如果没写css的话,访问页面就会错乱效果。针对这种情况,今天提供两个解决方案。

懒人方案

直接把下面的css复制到你的css文件中,再访问页面,就可以解决分页错乱的问题

.pagination {
    display: inline-block;
    padding-left0;
    margin20px 0;
    border-radius4px; }
.pagination > li {
    display: inline; }
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding6px 12px;
    line-height1.42857;
    text-decoration: none;
    color#337ab7;
    background-color#fff;
    border1px solid #ddd;
    margin-left: -1px; }
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left0;
    border-bottom-left-radius4px;
    border-top-left-radius4px; }
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-bottom-right-radius4px;
    border-top-right-radius4px; }
.pagination > li > a:hover.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
    z-index2;
    color#23527c;
    background-color#eeeeee;
    border-color#ddd; }
.pagination > .active > a.pagination > .active > a:hover.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    z-index3;
    color#fff;
    background-color#337ab7;
    border-color#337ab7;
    cursor: default; }


个性化方案

自定义分页样式需要修改全局配置文件,电脑端前端分页样式是config>page>pc/page.php文件,移动端前端分页样式是config>page>mobile/page.php文件。分页配置文件完整参数解析如下:

<?php

/**
 * 自定义分页标签样式
 */

return array(

   // 自定义“统计”链接
   'total_link' => '共%s条'// 你希望在分页中显示“统计”名字链接。如果你不希望显示,可以把它的值设为 FALSE 
   'total_tag_open' => '<li><a>'// “统计”打开标签链接
   'total_tag_close' => '</a></li>'// “统计”关闭标签链接
   //'total_remove_anchor' => true, // “统计”链接移除a标签
   'total_anchor_class' => ''// 加a标签的class,留空采用anchor_class属性
   
   // 自定义“下一页”链接
   'next_link' => '下一页'// 你希望在分页中显示“下一页”链接的名字。如果你不希望显示,可以把它的值设为 FALSE 
   'next_tag_open' => '<li>'// “下一页”链接的打开标签
   'next_tag_close' => '</li>'// “下一页”链接的关闭标签
   'next_anchor_class' => ''// 加a标签的class,留空采用anchor_class属性
   
   // 自定义“上一页”链接
   'prev_link' => '上一页'// 你希望在分页中显示“上一页”链接的名字。如果你不希望显示,可以把它的值设为 FALSE 
   'prev_tag_open' => '<li>'// “上一页”链接的打开标签
   'prev_tag_close' => '</li>'// “上一页”链接的关闭标签
   'prev_anchor_class' => ''// 加a标签的class,留空采用anchor_class属性
   
   // 自定义“当前页”链接
   'cur_tag_open' => '<li class="active"><a>'// “当前页”链接的打开标签
   'cur_tag_close' => '</a></li>'// “当前页”链接的关闭标签
   
   // 自定义“数字”链接
   'num_tag_open' => '<li>'// “数字”链接的打开标签
   'num_tag_close' => '</li>'// “数字”链接的关闭标签
   'num_anchor_class' => ''// 加a标签的class,留空采用anchor_class属性
   
   // 自定义“最后一页”链接
   'last_link' => '最后一页'// 你希望在分页的右边显示“最后一页”链接的名字。如果你不希望显示,可以把它的值设为 FALSE
   'last_tag_open' => '<li>'// “最后一页”链接的打开标签
   'last_tag_close' => '</li>'// “最后一页”链接的关闭标签
   'last_anchor_class' => ''// 加a标签的class,留空采用anchor_class属性
   
   // 自定义“第一页”链接
   'first_link' => '第一页'// 你希望在分页的左边显示“第一页”链接的名字。如果你不希望显示,可以把它的值设为 FALSE
   'first_tag_open' => '<li>'// “第一页”链接的打开标签
   'first_tag_close' => '</li>'// “第一页”链接的关闭标签
   'first_anchor_class' => ''// 加a标签的class,留空采用anchor_class属性
   
   // 是否显示数字链接
   'display_pages' => TRUE,

    // 显示的分页左右两边数字个数,比如4表示显示4+1+4个数字
    'num_links' => 4,

    // 给每一个链接添加class属性
   'anchor_class' => '',
   
   // 给每一个链接添加data-ci-pagination-page属性,设置''表示不加链接属性
   'data_page_attr' => 'data-ci-pagination-page', 
   
   // 区域标签
    'full_tag_open' => '<ul class="pagination">',

   // 区域标签
    'full_tag_close' => '</ul>',
    
    // 是否强制显示分页,默认情况下当分页数量不足两页时就不会显示分页字符 v4.3.13以上版本支持
    'compel_page' =>  false,
    
    // 是否强制显示上一页,默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_prev_page' =>  false,
    
    // 是否强制显示下一页,默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_next_page' =>  false,
    
    // 是否强制显示最后一页,默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_last_page' =>  false,
    
    // 是否强制显示第一页,默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_first_page' =>  false,
   
);

前端模板结合这个分页配置文件,就可以自定义样式了,css样式可以根据实际情况写到li 或者 a标签中即可。

个性化常用样式

.pagination {}
.pagination > li {}
.pagination > li > a{}
.pagination > .active > a.pagination > li > a:hover { }

免责声明:1.凡本站注明“来源:XXX(非老K模板网)”的作品,均转载自其它媒体,所载的文章、图片、音频视频文件等资料的版权归版权所有人所有,如有侵权,请联系laokcms#126.com处理;2.凡本站转载内容仅代表作者本人观点,与老K模板网无关。
0 条评论

网友留言