上节我们制作了分页显示,但是thinkphp本身自带的分页效果不忍直视,美观度严重不足,本节我们来美化一下显示效果.重点是学习一下分页效果的美化办法.

分页后果

基本思路

我们利用开源HTML5跨屏前端框架---amazeui.利用此框架内置的分页显示效果,改动Page.class.php,实现分页效果的美化.

一、引入amaze ui

我们下载Amaze UI紧缩包,解压后,拷贝assets目录到public文件夹内.然后打开fenye.html,引入assets文件夹内的amazeui.css,代码如图：

引入css

二、熟悉Amaze UI分页代码

我们打开Amaze UI官网,查看分页显示后果图及相关代码,了解其分页css设计.

html分页后果

三、修改Page.class.php

Page.class.php文件是thinkphp的核心文件,为了避免修改出现不测,我们在修改前先备份一下.

通过上面察看,我们发现Amaze UI的分页显示,利用<ul>和<li>,并通过设置相应的class来设置分页显示效果的.

我们找到Page.class.php中的show办法.然后找到“替换分页内容”的代码,修改代码如图:

php代码改动

然后找到“//上一页,//下一页,//第一页,//最后一页,//数字连接”分离进行修改：

php代码改动

如果您仔细察看的话,会发现,我们其实都在所有<a>和</a>标签外加上了<li>和</li>.

下面我们在浏览器中打开http://localhost/tp3/admin.php/Admin/Fenye/fenye,如果配置正确的话显示后果如下：

最终后果

接下来我们来看几位即有颜值又有实力的法式猿.

代码女神---赵洁琼

代码女神---赵洁琼

代码女神---赵洁琼

被著名游戏媒体网站Kotaku评为十年来最具影响的十位游戏界女性之一,也是其中唯一的女法式员---余国荔

余国荔

余国荔

喜欢的话,可以存眷我们.

如有疑问可以留言,我们会第一时间进行反馈.感激!

本文由头条号“性命一路前行”原创,请勿转载.