本文编辑:小秋同学

易优列表页分页样式说明和使用教程

小秋同学 09-08 20:10:59 网站教程
摘要:  做网站的时候难免遇到列表页分页部分样式怎么设计和写入CLASS标签。就比如你去利用别人的网站分页风格一样或者自己先修改但是易优是直接一个分页标签,这个时候就难倒了。{eyou:pagelist listitem='index,pr摘要:  做网站的时候难免遇到列表页分页部分样式怎么设计和写入CLASS标签。就比如你去利用别人的网站分页风格一样或者自己先修改但是易优是直接一个分页标签,这个时候就难倒了。{eyou:pagelist listitem='index,pr

 做网站的时候难免遇到列表页分页部分样式怎么设计和写入CLASS标签。就比如你去利用别人的网站分页风格一样或者自己先修改但是易优是直接一个分页标签,这个时候就难倒了。

{eyou:pagelist listitem='index,pre,pageno,next,end' listsize='2' /}


QQ图片20200908185815.png


那么我们该怎么修改了。


这里我将简单的举例说明下。



分页样式修改需改动PHP文件 目录是:

\core\library\think\paginator\driver


目录里面的  Eyou.php  ---(PC端)


首先,我们在这里先确认下  自己要改的样式。


(这里以对象网站来说明,也就是说 分页样式他首先是以什么格式,

比如   :

<ul>

  <li>--</li>

</ul>

这样的格式   你首先得先确认好他的格式样式才可以 这样才能按照他的格式 来做修改。


然后选择页数的当时样式  比如  是第二页  那么 第二页了这个链接(2)就会显示不同的样式来高亮分辨



来个实际的例子吧!


<div class="ListsPages"> 

<a>首页</a> 

<a>上一页</a>

 <a class="active">1</a>

<a href="/10262/shenghuochangshi/lists_1_2.html" data-ey_fc35fdc="html" data-tmp="1">2</a><a href="/10262/shenghuochangshi/lists_1_3.html" data-ey_fc35fdc="html" data-tmp="1">3</a><a href="/10262/shenghuochangshi/lists_1_4.html" data-ey_fc35fdc="html" data-tmp="1">4</a> <a href="/10262/shenghuochangshi/lists_1_2.html" data-ey_fc35fdc="html" data-tmp="1">下一页</a> 

<a href="/10262/shenghuochangshi/lists_1_4.html" data-ey_fc35fdc="html" data-tmp="1">末页</a>

</div>


image.png


像上面的样式应该怎么修改到我们的分页里面去了。



首先我们先确定他的样式 基本就是


<div class="ListsPages">

<a class="active">1</a>  //选择后(当前页)有样式

<a>2</a>    //没选择后(当前页)就没有样式

</div>


那么在风格模板里面我们就可以改成以下


<div class="ListsPages">

{eyou:pagelist listitem='index,pre,pageno,next,end' listsize='2' /}

</div>



然后到 PHP里面我们做修改就可以了,

分页样式修改改动PHP文件 目录是:

\core\library\think\paginator\driver


目录里面的  Eyou.php  ---(PC端)


找到:

-----------------------------划分线开始---------------------------------------------


 protected function getAvailablePageWrapper2($url, $page)

    {

        return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';

    }


    /**

     * 生成一个可点击的按钮

     *

     * @param  string $url

     * @param  int    $page

     * @return string

     */

    protected function getAvailablePageWrapper($url, $page)

    {

        return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';

    }


    /**

     * 生成一个禁用的按钮

     *

     * @param  string $text

     * @return string

     */

    protected function getDisabledTextWrapper($text)

    {

        return '<li><a>' . $text . '</a></li>';

    }


    /**

     * 生成一个激活的按钮

     *

     * @param  string $text

     * @return string

     */

    protected function getActivePageWrapper($text)

    {

        return '<li class="active"><a>' . $text . '</a></li>';

    }


  ---------------------------------划分线结束----------------------------------------


修改成以下 代码:

  ---------------------------------划分线开始----------------------------------------



    protected function getAvailablePageWrapper2($url, $page)

    {

        return '<a href="' . htmlentities($url) . '">' . $page . '</a>';

    }


    /**

     * 生成一个可点击的按钮

     *

     * @param  string $url

     * @param  int    $page

     * @return string

     */

    protected function getAvailablePageWrapper($url, $page)

    {

        return '<a href="' . htmlentities($url) . '">' . $page . '</a>';

    }


    /**

     * 生成一个禁用的按钮

     *

     * @param  string $text

     * @return string

     */

    protected function getDisabledTextWrapper($text)

    {

        return '<a>' . $text . '</a>';

    }


    /**

     * 生成一个激活的按钮

     *

     * @param  string $text

     * @return string

     */

    protected function getActivePageWrapper($text)

    {

        return '<a class="active">' . $text . '</a>';

    }



  ---------------------------------划分线结束----------------------------------------



红色部分 active  就是当前页高亮变色的样式。

其实修改的部分就是上面有颜色的部分


解说:


   return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';

改成:

   return '<a href="' . htmlentities($url) . '">' . $page . '</a>';


因为样式里面没有<li></li>部分


保存即可!

这样做出来的效果 就是


<div class="ListsPages"> <a>首页</a> <a>上一页</a> <a class="active">1</a><a href="/10262/shenghuochangshi/lists_1_2.html" data-ey_fc35fdc="html" data-tmp="1">2</a><a href="/10262/shenghuochangshi/lists_1_3.html" data-ey_fc35fdc="html" data-tmp="1">3</a><a href="/10262/shenghuochangshi/lists_1_4.html" data-ey_fc35fdc="html" data-tmp="1">4</a> <a href="/10262/shenghuochangshi/lists_1_2.html" data-ey_fc35fdc="html" data-tmp="1">下一页</a> <a href="/10262/shenghuochangshi/lists_1_4.html" data-ey_fc35fdc="html" data-tmp="1">末页</a></div>


大家可以对照下我改的 就知道怎么修改了



总结是 先确定好格式 然后再按照格式来做修改。


明天补充图文教程


文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/706.html发布于 09-08 20:10:59
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~