使用layer插件来定制tp5的消息提示页面
发布日期:2021-05-04 09:22:35 浏览次数:34 分类:技术文章

本文共 1084 字,大约阅读时间需要 3 分钟。

出处:http://www.dawnfly.cn/article-1-314.html

随着thinkphp5新版本的发布,越来越多的开发者选择使用它来开发项目,或许它现在还有些美中不足的地方,但也无伤大雅,今天给大家带来的就是更换和定制属于自己风格的success/error消息提示页面,这一功能将使用插件来完成。

下载最新版本的tp5之后,它默认的success/error效果如下:

定制tp5提示页面

是非常原始简洁的一个效果,但是对用户体验度不是很好。

通过下面博主的讲解来进行稍做改变,可以变的很美观,舒服,适用。

这里主要用到layer弹出层插件(不得不说,它近来很火,兼容性也不错)。

从layer官方网站下载最新的版本后,放到项目中,在Common.php中自定义一个方法alert,

1
2
3
4
5
6
7
8
9
10
11
/**
 
* $msg 待提示的消息
 
* $url 待跳转的链接
 
* $icon 这里主要有两个,5和6,代表两种表情(哭和笑)
 
* $time 弹出维持时间(单位秒)
 
*/
function 
alert(
$msg
=
''
,
$url
=
''
,
$icon
=
''
,
$time
=3){ 
    
$str
=
'<script type="text/javascript" src="'
.config(
'admin_static'
).
'/lib/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="'
.config(
'admin_static'
).
'/lib/layer/2.1/layer.js"></script>'
;
//加载jquery和layer
    
$str
.=
'<script>$(function(){layer.msg("'
.
$msg
.
'",{icon:'
.
$icon
.
',time:'
.(
$time
*1000).
'});setTimeout(function(){self.location.href="'
.
$url
.
'"},2000)});</script>'
;
//主要方法
    
return 
$str
;
}

然后就是控制器调用:

1
return 
alert(
'您好,欢迎光顾破晓博客!'
,
'http://www.dawnfly.cn'
,6,3);

效果如下:

定制tp5提示页面

其实layer插件提供很多不错的特效,这里说的只是冰山一角,需要大家亲自下载去研究一下。

上一篇:TP5 基础说明
下一篇:thinkphp5 引入前台、后台模板方法

发表评论

最新留言

表示我来过!
[***.240.166.169]2025年03月20日 16时07分23秒