迅睿cms模板如何自定义分页css样式
迅睿cms中列表页面分页标签变量写法是分页标签变量是{$pages}系统会自动生成分页html代码,针对这种系统生成出来的分页样式,如果没写css的话,访问页面就会错乱效果。针对这种情况,今天提供两个解决方案。
懒人方案
直接把下面的css复制到你的css文件中,再访问页面,就可以解决分页错乱的问题
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px; }
.pagination > li {
display: inline; }
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857;
text-decoration: none;
color: #337ab7;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px; }
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px; }
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px; }
.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
z-index: 2;
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-index: 3;
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 { }
相关文档
- pbootcms、dedecms等模板标签正则替换为迅睿cms标...
- 迅睿cms模板如何自定义分页css样式
- 迅睿cms首页及各页面实现ajax瀑布流滚动加载
- 迅睿cms搜索参数单选/多选/下拉字段条件筛选写法
- 迅睿cms模板循环标签每隔几行几个更换或指定输出特定样式
- 迅睿cms会员登录/注册/退出登录后跳转到指定链接或返回当前页面
- 迅睿cms网站任意页面前端调用全局模块表单提交及自定义样式方法
- 为下载的迅睿cms模板前端增加友情链接版块
- 迅睿cms二次开发系统目录结构说明
- 迅睿cms制作模板演示页(给内容创建多个模板和地址)
- 迅睿cms网站后台控制台面板如何添加自定义数据?
- 迅睿cms调用字段敏感信息首尾截取中间隐藏用星号代替
- 迅睿cms使用全局表单制作证书查询功能
- 迅睿cms模块表单制作在线预约报名付款(支持游客免登录支付)
- 迅睿cms读取zip压缩包文件目录结构配合jsTree展示文件树...
- 用jQuery替换文章编辑器里的图片样式及alt标签 实现自定义...
- 迅睿cms站群系统实现全国城市分站功能插件及调用标签
- 迅睿cms文章标题生成图片插件:亿级文章配图器不占用空间
- 迅睿cms使用API接口实现主站统一管理多站点群友情链接
- 安装迅睿cms网站程序的服务器环境要求