Implementation method of rewriting jump prompt page in TP5-PHP Tutorial-php.cn

Implementation method of rewriting jump prompt page in TP5

黄舟

Release： 2023-03-16 20:16:02

Original

2257 people have browsed it

The example of this article describes the method of rewriting the jump prompt page in thinkPHP5 (TP5). Share it with everyone for your reference, the details are as follows:

Everyone knows that the success and failure pages of the Tp framework have always been not particularly good-looking, but this also gives developers a good choice. We can rewrite this jump prompt page according to our own preferences

I am using the Tp5 framework. The rewriting of the jump prompt page of Tp5 is similar to that of Tp3. First, let’s take a look at the Tp framework. I directly pasted the code for the jump prompt page that comes with it:

{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(&#39;wait&#39;),
    href = document.getElementById(&#39;href&#39;).href;
   var interval = setInterval(function(){
    var time = --wait.innerHTML;
    if(time <= 0) {
     location.href = href;
     clearInterval(interval);
    };
   }, 1000);
  })();
 </script>
</body>
</html>

Copy after login

Let’s rewrite it below. First of all, the css can be deleted directly. It has almost no effect. I forgot to mention it. The replacement jump prompt used is the layer plug-in. This plug-in does a good job. The official website: http://layer.layui.com/. If you want to see it, please turn left

1. Download layer plug-in, decompress it. The decompressed file package is as follows:

After decompression, it contains these three main files, of which we need to introduce layer.js into the file.

But don’t forget to introduce jquery.js

Then let’s take a look at a few more important lines of code in Tp’s original code:

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

Copy after login

These three points are tips. Information, jump path, waiting time

Just have these. When rewriting, use the hidden field technique. Use the hidden field to obtain the information you need in the form of jquery, and then insert it below In js:

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

Copy after login

Rewritten js:

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

Copy after login

Here I did not use automatic jump, but manually clicked to jump, so the following timer was deleted directly, and It will be rewritten successfully without affecting

The above is the detailed content of Implementation method of rewriting jump prompt page in TP5. For more information, please follow other related articles on the PHP Chinese website!