TP5框架《美化框架自带的跳转页面》

最新推荐文章于 2024-04-05 14:49:57 发布

涛々

最新推荐文章于 2024-04-05 14:49:57 发布

阅读量3k

点赞数 2

分类专栏： TP5 php 后端文章标签： tp5 登录超时页面跳转美化重定向

本文链接：https://blog.csdn.net/qq_23375733/article/details/86573440

版权

后端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

php

17 篇文章 0 订阅

订阅专栏

TP5

6 篇文章 0 订阅

订阅专栏

tp5框架，成功或者失败跳转提示页面一般都是用框架自带的，

个人感觉挺难看的，所有给他美化了下。

成功和失败跳转的方法文件位置： /thinkphp/library/traits/controller/Jump.php 这个文件中定义了error()和success()操作失败或成功跳转的快捷方法

成功和失败的页面文件位置：/thinkphp/tpl/dispath_jump.tpl 这个文件中是跳转页面的html代码，如果没修改框架自带的配置，那么成功和失败的页面都是跳转到这个文件中

美化后的效果：

dispath_jump.tpl：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>跳转中</title>
  <style>
      .buffer{
            background-color: black;
            height: 100%;
            width: 60%;
            margin: auto;
            filter: alpha(Opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.85;
            border-radius: 7px;
        }
 
        .buffer_tip{
            color: wheat;
            font-size: 30px;
            display: block;
            padding-top: 10px;
            text-align: center;
        }
        .spinner {
            margin: 16px auto 57px;
            width: 32px;
            height: 32px;
            position: relative;
        }
         
        .cube1, .cube2 {
            background-color: #67CF22;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            
            -webkit-animation: cubemove 1.8s infinite ease-in-out;
            animation: cubemove 1.8s infinite ease-in-out;
        }
         
        .cube2 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
         
        @-webkit-keyframes cubemove {
          25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
          50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
          75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
          100% { -webkit-transform: rotate(-360deg) }
        }
         
        @keyframes cubemove {
            25% {
                transform: translateX(42px) rotate(-90deg) scale(0.5);
                -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
            } 50% {
                transform: translateX(42px) translateY(42px) rotate(-179deg);
                -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
            } 50.1% {
                transform: translateX(42px) translateY(42px) rotate(-180deg);
                -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
            } 75% {
                transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
                -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
            } 100% {
                transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
            }
        }
 
        #href{
            color: wheat;
            font-size: 20px;
        }

        a:link{
            text-decoration:none;
        }
        
        .success, .error{
            color: wheat;
            font-size: 30px;
            display: block;
            padding-top: 10px;
            text-align: center;
        }
  </style>
</head>
<body>
 
<div class='buffer' id='buffer' >
    <?php switch ($code) {?>
        <?php case 1:?>
        <h1>:)</h1>
        <p class="success"><?php echo(strip_tags($msg));?></p>
        <?php break;?>
        <?php case 0:?>
        <h1>:(</h1>
        <p class="error"><?php echo(strip_tags($msg));?></p>
        <?php break;?>
    <?php } ?>
    <span class='buffer_tip' id='buffer_tip' >
        页面自动 <a id="href" href="<?php echo($url);?>">跳转</a> 等待时间： <b id="wait"><?php echo($wait);?></b>
    </span>
    <div class="spinner">
        <div class="cube1"></div>
        <div class="cube2"></div>
    </div>
</div>
 
<script type="text/javascript">
    (function(){
        var wait = document.getElementById('wait'),href = document.getElementById('href').href;
        var interval = setInterval(function(){
                var time = --wait.innerHTML;
                if(time <= 0) {
                    if(window != top){
                        top.location.href = '{:url("admin/login/login")}'; //路径地址自己修改
                        clearInterval(interval);
                    } else {
                        location.href = href;
                        clearInterval(interval);
                    }
                };
        }, 1000);
    })();
</script>
</body>
</html>

3秒倒计时结束后需要跳转到哪个页面可自行修改：

top.location.href = '{:url("admin/login/login")}'; //路径地址自己修改

使用这个也可以跳出 iframe 标签，上面已经判断好了。

个人觉得还行，记录一下！！

涛々

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
TP5框架《美化框架自带的跳转页面》

tp5框架，成功或者失败跳转提示页面一般都是用框架自带的，个人感觉挺难看的，所有给他美化了下。成功和失败跳转的方法文件位置： /thinkphp/library/traits/controller/Jump.php 这个文件中定义了error()和success()操作失败或成功跳转的快捷方法成功和失败的页面文件位置：/thinkphp/tpl/dispath_jump.tpl 这...
复制链接

扫一扫