互补网网专做高品质CMS教程,所有教程均为站长亲测有效后发布。
您当前所在位置:互补网首页 > 迅睿CMS > 技巧设置 >

迅睿cms列表页面分页页码与样式修改方式

发布时间:2021-10-20热度:0

部分人在使用迅睿cms建站时,移动端和手机端分页样式需要按照自己的想法去做。但是不知道如何修改,因为他的调用标签只有一个{$pages},从中得不到修改的方式,经过不断实践之后,发现修改方式很简单,如下:

首先需要修改php系统文件。

控制PC端和移动端的分页样式需要修改两个文件:

/config/page/pc/page.php PC端 前端分页样式

/config/page/mobile/page.php 移动端 前端分页样式


分页配置文件具体代码,这里以PC端为例:

<?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,


    // 显示的分页数字个数

    '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>',

    

    // 是否强制显示分页,默认情况


一、给分页加select选择页数,适用于列表页面和搜索页面

image

代码如下:

{$pages}

////////////开始//////////////

{if $nums}

<select onchange="dr_go_page(this.value)">

    {php $pp = range(1,$nums);}

    {loop $pp $p}

    <option value="{$p}">第{$p}页</option>

    {/loop}

</select>

<script>

    function dr_go_page(value) {

        var url="{$pagerule}";

        if (value) {

            url = url.replace('{page}', value);

            location.href=url;

        }

    }

    </script>

{/if}


二、给列表页面加上跳转

image

代码如下:

<div class="input-group">

    <input type="text" class="form-control" onkeypress="if(event.keyCode==13) { dr_module_search_page();return false;}" id="search_page">

    <span class="input-group-btn">

        <button class="btn btn-sm blue" onclick="dr_module_search_page()" type="button"> <i class="fa fa-search"></i> 页</button>

    </span>

</div>

<script>

    // 这段js是用来执行搜索的

    function dr_module_search_page() {

        var url="{$pagerule}";

        var value = $("#search_page").val();

        if (value) {

            url = url.replace('{page}', value);

            location.href=url;

        } else {

            $("#search_page").focus()

            dr_tips(0, "输入页码");

        }

        return false;

    }

</script>

本文地址:http://www.25923.com/xunrui/jiqiao/1020128.html(转载请保留)