In diesem Artikel wird hauptsächlich die Methode zum Umschreiben der Jump-Prompt-Seite in TP5 vorgestellt und die Änderungsschritte und zugehörigen Vorsichtsmaßnahmen für den Betrieb der thinkPHP5-Jump-Prompt-Seite anhand von Beispielen analysiert
Das Beispiel dieses Artikels beschreibt die Methode zum Umschreiben der Sprungaufforderungsseite in thinkPHP5 (TP5). Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Jeder weiß, dass die Erfolgs- und Misserfolgsseiten des Tp-Frameworks immer nicht besonders gut aussahen, aber dies gibt Entwicklern auch eine gute Auswahl. Wir können diese Jump-Prompt-Seite nach Ihren Wünschen umschreiben
Ich verwende das Tp5-Framework. Das Umschreiben der Jump-Prompt-Seite von Tp3 ähnelt zunächst dem von Tp3 -in Tp-Framework. Ich habe den Code für die Sprungaufforderungsseite direkt eingefügt:
{__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>
Schreiben Sie ihn zunächst direkt neu. Das ist fast keine Wirkung. Ich habe vergessen zu erwähnen, dass das von mir verwendete Layer-Plugin gute Arbeit leistet: http://layer.layui.com/. Wenn Sie es sehen möchten, biegen Sie bitte nach links ab.
1. Laden Sie das Layer-Plugin herunter und dekomprimieren Sie es wie folgt:
Nach der Dekomprimierung enthält es diese drei Hauptdateien, von denen wir brauchen. In die Datei wird Layer.js eingeführt
, aber vergessen Sie nicht, jquery.js einzuführen
. Schauen Sie sich dann noch ein paar weitere wichtige Codezeilen im Originalcode von Tp an:
<p class="success"><?php echo(strip_tags($msg));?></p> <?php echo($url);?> <?php echo($wait);?>
Diese drei Punkte sind Aufforderungsinformationen, Sprungpfad und Wartezeit
Mit diesen können Sie beim Umschreiben versteckte Felder verwenden, um die benötigten Informationen in Form einer JQuery abzurufen und sie dann in die folgenden JS einzufügen:
<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 neu geschrieben:
<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>
Hier habe ich nicht den automatischen Sprung verwendet, sondern manuell zum Springen geklickt, also das Folgende Der Timer wurde direkt gelöscht und hatte keine Auswirkungen auf
Das Umschreiben war erfolgreich
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonTP5 implementiert die Methode zum Umschreiben der Sprungaufforderungsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!