recherche

Maison  >  Article  >  développement back-end  >  TP5 implémente une méthode de réécriture de la page d'invite de saut

TP5 implémente une méthode de réécriture de la page d'invite de saut

不言
不言original
2018-05-10 10:26:392935parcourir

Cet article présente principalement la méthode de réécriture de la page d'invite de saut dans TP5 et analyse les étapes de modification et les précautions de fonctionnement associées de la page d'invite de saut thinkPHP5 sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

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 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 utiliser Réécrire cette page d'invite de saut selon vos 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. -dans le framework Tp. J'ai directement collé le code de la page d'invite de saut : 

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

Tout d'abord, le CSS peut être supprimé. directement. Celui-ci n'a presque aucun effet. J'ai oublié de mentionner que l'invite de saut de remplacement que j'utilise est le plug-in de couche. Ce plug-in fait du bon travail. . Si vous voulez le voir, veuillez le vérifier. Tournez à gauche

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

.

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

, mais n'oubliez pas d'introduire jquery.js

. Ensuite, regardez quelques lignes de code plus importantes 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 des informations rapides, un chemin de saut, et temps d'attente

Avec ceux-ci, c'est ok, réécrit Lorsque vous utilisez la technique du champ caché, utilisez le champ caché pour obtenir les informations dont vous avez besoin sous forme de jquery, puis insérez-le 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 cliqué manuellement pour sauter, donc le minuteur suivant a été supprimé directement Cela n'affecte pas

La réécriture a réussi

Recommandations associées :

TP5 implémente l'encapsulation du service d'envoi d'e-mails et peut envoyer des pièces jointes, des instances de

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：Méthode thinkPHP+ajax pour réaliser des statistiques de pages vues pvArticle suivant：Méthode thinkPHP+ajax pour réaliser des statistiques de pages vues pv

Articles Liés

Voir plus