tp5框架,成功或者失败跳转提示页面一般都是用框架自带的,
个人感觉挺难看的,所有给他美化了下。
成功和失败跳转的方法文件位置: /thinkphp/library/traits/controller/Jump.php 这个文件中定义了error()和success()操作失败或成功跳转的快捷方法
成功和失败的页面文件位置:/thinkphp/tpl/dispath_jump.tpl 这个文件中是跳转页面的html代码,如果没修改框架自带的配置,那么成功和失败的页面都是跳转到这个文件中
美化后的效果:![](https://i-blog.csdnimg.cn/blog_migrate/bbcde4140c39df5c758fd852c8d1ad71.png)
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 标签,上面已经判断好了。
个人觉得还行,记录一下 !!