
使用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效果如下:
是非常原始简洁的一个效果,但是对用户体验度不是很好。
通过下面博主的讲解来进行稍做改变,可以变的很美观,舒服,适用。
这里主要用到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); |
效果如下:
其实layer插件提供很多不错的特效,这里说的只是冰山一角,需要大家亲自下载去研究一下。
发表评论
最新留言
表示我来过!
[***.240.166.169]2025年03月20日 16时07分23秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
网易云首倡中台方法论,发布全链路中台技术方案
2019-03-03
传输层协议
2019-03-03
OPC应用实例和故障排除培训
2019-03-03
什么是网络基础设施?
2019-03-03
如何加载dll文件计算UDS服务的秘钥
2019-03-03
IP代理给模拟器多开和虚拟机多开提供了哪些帮助?
2019-03-03
细数哪些网络用户需要换IP?
2019-03-03
“山东大学移动互联网开发技术教学网站建设”项目实训日志一
2019-03-03
codeforces1307D 1900分最短路
2019-03-03
2020牛客暑期多校训练营(第七场) 待补题
2019-03-03
2020牛客暑期多校训练营(第九场)
2019-03-03
8皇后问题 递归 函数调用是重点
2019-03-03
1541 +1 *2 ²
2019-03-03
老鼠走迷宫
2019-03-03
ural 1627 生成树计数模板题 基尔霍夫矩阵树定理 + 行列式计算模板
2019-03-03
面试别慌!阿里专家带你从【入门+基础+进阶+项目】攻破SpringBoot
2019-03-03
【Java面试】30个 Java 集合面试必备的问题和答案
2019-03-03
干了八年的阿里面试官,给大家分享我面试时最爱问的Java面试题
2019-03-03
华为鸿蒙到底是不是安卓系统套了个壳?
2019-03-03