首页 / PHP / TP5改写跳转提示页面的实现方法

TP5改写跳转提示页面的实现方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了TP5改写跳转提示页面的实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3566字，纯文字阅读大概需要6分钟。

内容图文

本文实例讲述了thinkPHP5(TP5)实现改写跳转提示页面的方法。分享给大家供大家参考，具体如下：

大家都知道Tp框架一直以来的执行成功和失败的页面都不是特别的好看，不过这样也给了开发者一个不错的选择我们可以根据自己的喜好去改写这个跳转提示的页面

我使用的是Tp5框架，Tp5的跳转提示页面的改写和Tp3的有异曲同工之妙，首先还是先看一下Tp框架中自带的跳转提示页面的代码吧，我直接贴上了：

{NOLAYOUT}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>跳转提示</title>
 <style type="text/css">
  *{ padding: 0; margin: 0; }
  body{ background: #fff; font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; color: #333; font-size: 16px; }
  .system-message{ padding: 24px 48px; }
  .system-message h1{ font-size: 100px; font-weight: normal; line-height: 120px; margin-bottom: 12px; }
  .system-message .jump{ padding-top: 10px; }
  .system-message .jump a{ color: #333; }
  .system-message .success,.system-message .error{ line-height: 1.8em; font-size: 36px; }
  .system-message .detail{ font-size: 12px; line-height: 20px; margin-top: 12px; display: none; }
 </style>
</head>
<body>
 <p class="system-message">
  <?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 } ?>
  <p class="detail"></p>
  <p class="jump">
   页面自动 <a id="href" href="<?php echo($url);?>" rel="external nofollow" >跳转</a> 等待时间： <b id="wait"><?php echo($wait);?></b>
  </p>
 </p>
 <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) {
     location.href = href;
     clearInterval(interval);
    };
   }, 1000);
  })();
 </script>
</body>
</html>

下面进行改写，首先css的东西都可以直接删掉，那个几乎没有什么作用，忘了说了我使用的替换的跳转提示的是layer插件，这个插件做的还是不错的，官网：http://layer.layui.com/，想看的请同志们左拐

1.下载layer插件，进行解压，解压之后的文件包如下：

TP5改写跳转提示页面的实现方法 - 文章图片

解压之后包含这三个主要的文件，其中我们需要引入到文件中的是layer.js

但是千万不要忘记引入了jquery.js

然后大家看Tp原来的代码中几行比较重要的代码：

 <p class="success"><?php echo(strip_tags($msg));?></p>
<?php echo($url);?>
<?php echo($wait);?>

这三点分别是提示信息，跳转路径，等待时间

有了这几个就可以了，改写的时候使用隐藏域的手手法，利用隐藏域将需要获得信息通过jquery的形式获取，然后插入到下面的js中：

<script type="text/javascript">
(function(){
layer.open({
  content: msg,
  yes: function(index, layero){
   //do something
   layer.close(index); //如果设定了yes回调，需进行手工关闭
  }
 });
 var wait = document.getElementById('wait'),
  href = document.getElementById('href').href;
 var interval = setInterval(function(){
  var time = --wait.innerHTML;
  if(time <= 0) {
   location.href = href;
   clearInterval(interval);
  };
 }, 1000);
})();
</script>
var msg = $('#msg').val(); 提示信息
var url = $('#url').val();  跳转url
var wait = $('#wait').val(); 等待时间

改写后的js:

<script type="text/javascript">
  (function(){
   var msg = $('#msg').val();
   var url = $('#url').val();
   var wait = $('#wait').val();
   layer.open({
    content: msg,
    yes: function(index, layero){
     //do something
     location.href = url;
     layer.close(index); //如果设定了yes回调，需进行手工关闭
    }
   });
  })();
 </script>

这里我没有使用自动跳转，而是手动点击进行跳转，所以下面的计时器直接删除掉了，并不影响

就这样改写成功了

以上就是TP5改写跳转提示页面的实现方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的TP5改写跳转提示页面的实现方法全部内容，希望文章能够帮你解决TP5改写跳转提示页面的实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/141365.html

来源：【匿名】