zoukankan      html  css  js  c++  java
  • thinkphp5.1使用layer插件来定制tp5的消息提示页面

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

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

    是非常原始简洁的一个效果,但是对用户体验度不是很好。
    通过下面博主的讲解来进行稍做改变,可以变的很美观,舒服,适用。
    这里主要用到layer弹出层插件(不得不说,它近来很火,兼容性也不错)。
    从layer官方网站下载最新的版本后,放到项目中,在common.php中自定义一个方法alert,

    /**
     * $msg 待提示的消息
     * $url 待跳转的链接
     * $icon 这里主要有两个,5和6,代表两种表情(哭和笑)
     * $time 弹出维持时间(单位秒)
     */
    function alert($msg='',$url='',$icon='',$time=3){ 
        $str='<script type="text/javascript" src="'.config('template.tpl_replace_string.__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;
    }

    然后就是控制器调用:

    return alert('你无权修改!',url('hospital/index'),5,3);
    return alert('操作成功!',url('hospital/index'),6);

    效果如下:

  • 相关阅读:
    js 简单getByClass得封装
    微信红包的随机算法
    js 淘宝评分
    HDU 1023 Train Problem II( 大数卡特兰 )
    HDU 1576 A/B( 逆元水 )
    HDU 5533 Dancing Stars on Me( 有趣的计算几何 )
    POJ 1664 放苹果( 递推关系 )
    HDU 2095 find your present (2)( 位运算 )
    POJ 3517 And Then There Was One( 约瑟夫环模板 )
    POJ 1988 Cube Stacking( 带权并查集 )*
  • 原文地址:https://www.cnblogs.com/panziwen/p/12596821.html
Copyright © 2011-2022 走看看