一个网站建设爱好者,技术交流,相互学习
当前位置:首页>>程序猿
thinkphp5 自定义跳转提示success error页面美化
发布时间:2021-11-16 10:50:51 栏目:程序猿 阅读量:769 作者:webcms

这篇文章是从之前的博客迁移过来的。

       之前没事,自己学习做一个简单的管理工具,在这里把一点觉得需要记录的东西记录一下。

首先记录一个 修改tp5的自定义提示信息页面吧。下图是tp默认的,是不是和平常开发的风格有点不合?

接下来我们就自己改一个吧。

首先我们自定义一个信息提示的html页面,我这里用的是搭配layer 的一个小插件弹窗,效果还不错,

然后在config配置文件中配置消息提示模板路径:

// 默认跳转页面对应的模板文件
'dispatch_success_tmpl'  => APP_PATH  . 'public' . DS  . 'jump.html',
'dispatch_error_tmpl'    =>  APP_PATH  . 'public' . DS . 'jump.html',

我这里是放在后台的视图模板里面。

首页模板页面引用 jquery和layer  两个资源js ,这里就不详细说了。

然后,是模板修改:

<!--
* $msg 待提示的消息
* $url 待跳转的链接
* $time 弹出维持时间(单位秒)
* icon 这里主要有两个layer的表情,5和6,代表(哭和笑)
-->
    <script type="text/javascript">
        (function(){
            var msg = '<?php echo(strip_tags($msg));?>';
            var iurl = '<?php echo($url);?>';
            var wait = '<?php echo($wait);?>';
         <?php
             switch ($code) {
                case 1:
           ?>
                  layer.msg(msg,{icon:"6",time:wait*1000});
            <?php
                   break;
                case 0:
             ?>
                layer.msg(msg,{icon:"5",time:wait*1000});
            <?php
                 break;
                }
              ?>
            setTimeout(function(){
                location.href=iurl;
            },1000)
        })();
    </script>

这里是根据tp5 默认的提示模板模仿修改过来的,相信既然在学tp5了  这点语句应该能看懂。 然后下面提示的消息是结合了 layer的弹窗样式,效果还可以,并且是提示完成3秒后自动跳转的。

 

当然这个样式可以自己选择,查看layer  api文档 里面有提供多种。

记得在 页面前面需要引入layer.js文件额。

<script type="text/javascript" src="/app/static/layer-v3.1.1/layer.js"></script>

好啦,修改提示消息模板到这里就搞定了,如果更好的可以留言,我们共同学习。 

一个来自php菜鸟的分享。

评论:

我的生活账单小程序
Copyright © web小工匠 保留所有权利. 渝ICP备15008469号 网站地图