使用layer插件来定制tp5的消息提示页面
出处:http://www.dawnfly.cn/article-1-314.html
随着thinkphp5新版本的发布,越来越多的开发者选择使用它来开发项目,或许它现在还有些美中不足的地方,但也无伤大雅,今天破晓博主给大家带来的就是更换和定制属于自己风格的success/error消息提示页面,这一功能将使用layer弹出层插件来完成。
下载最新版本的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插件提供很多不错的特效,破晓博主这里说的只是冰山一角,需要大家亲自下载去研究一下。
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇: layui 数据表格 根据值(1=业务,2=机构)显示中文名称
- 下一篇: php中判断变量是否为数组