Home > Article > Backend Development > Implementation method of rewriting jump prompt page in TP5

Implementation method of rewriting jump prompt page in TP5

黄舟Original: 2017-10-30 09:05:532264browse

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>

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);?>

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(); 等待时间

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of related configurations and error resolution in phpmyadminNext article：Detailed explanation of related configurations and error resolution in phpmyadmin

See more

Implementation method of rewriting jump prompt page in TP5

Related articles