Maison > Article > développement back-end > Méthode d'implémentation de réécriture de la page d'invite de saut dans TP5

Méthode d'implémentation de réécriture de la page d'invite de saut dans TP5

黄舟original: 2017-10-30 09:05:532245parcourir

L'exemple de cet article décrit la méthode de réécriture de la page d'invite de saut dans thinkPHP5 (TP5). Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Tout le monde sait que les pages de réussite et d'échec du framework Tp n'ont toujours pas été particulièrement belles, mais cela donne également aux développeurs un bon choix Nous pouvons réécrire cette page d'invite de saut selon nos propres préférences

J'utilise le framework Tp5 La réécriture de la page d'invite de saut de Tp5 est similaire à celle de Tp3. Framework Tp. J'ai directement collé le code de la page d'invite de saut qui l'accompagne :

{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>

Réécrivons-le ci-dessous. Tout d'abord, le CSS peut être supprimé directement. J'ai oublié de le mentionner. L'invite de saut de remplacement que j'ai utilisée est le plug-in de couche. Ce plug-in fait du bon travail : http://layer.layui.com/. tournez à gauche

1. Téléchargez le plug-in de couche et décompressez-le. Le package de fichiers décompressés est le suivant :

Après décompression, il contient ces trois éléments. fichiers principaux, parmi lesquels la couche que nous devons introduire dans le fichier est .js

Mais n'oubliez pas d'introduire jquery.js

Jetez ensuite un œil à quelques lignes plus importantes de code dans le code original de Tp :

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

Ces trois points sont les informations d'invite, le chemin de saut et le temps d'attente

Avec ceux-ci, vous pouvez utiliser la technique des champs cachés lors de la réécriture. champ caché pour obtenir les informations dont vous avez besoin via jquery. Insérez-le ensuite dans le js suivant :

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

Js réécrit :

<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>

Ici, je n'ai pas utilisé le saut automatique, mais manuellement. cliquez pour sauter, donc ce qui suit La minuterie a été supprimée directement sans affecter

La réécriture a réussi

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des configurations associées et résolution des erreurs dans phpmyadminArticle suivant：Explication détaillée des configurations associées et résolution des erreurs dans phpmyadmin

Articles Liés

Voir plus