집 > 기사 > 백엔드 개발 > TP5는 점프 프롬프트 페이지를 다시 작성하는 방법을 구현합니다.

TP5는 점프 프롬프트 페이지를 다시 작성하는 방법을 구현합니다.

不言원래의: 2018-05-10 10:26:392878검색

이 글에서는 주로 TP5에서 점프 프롬프트 페이지를 다시 작성하는 방법을 소개하고, thinkPHP5 점프 프롬프트 페이지의 수정 단계와 관련 동작 주의사항을 예시 형태로 분석해 도움이 필요한 친구들이 참고할 수 있습니다.

이 글에서는 예제를 설명합니다. thinkPHP5( TP5) 점프 프롬프트 페이지를 다시 작성하는 방법을 구현합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

Tp 프레임워크의 성공 및 실패 페이지가 항상 보기에 좋지 않다는 것은 누구나 알고 있지만 이는 개발자에게 적절한 선택을 제공합니다. 이 점프 프롬프트 페이지를 다시 작성하세요

저는 Tp5 프레임워크를 사용하고 있습니다. Tp5의 점프 프롬프트 페이지 재작성은 Tp3의 것과 유사합니다. , 제가 직접 게시했습니다:

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

우선 CSS를 직접 삭제할 수 있다는 점을 언급하는 것을 잊어버렸습니다. 제가 사용하는 프롬프트는 레이어 플러그인입니다. 이 플러그인은 꽤 좋습니다. 공식 웹사이트: http://layer.layui.com/, 보시려면 왼쪽으로 가세요

1. 플러그인하고 압축을 푼 파일 패키지는 다음과 같습니다.

압축 해제 후 이 세 가지 주요 파일이 포함되어 있습니다. 그 중 파일에 도입해야 할 것은 layer.js

하지만 마세요. jquery.js를 소개하는 것을 잊지 마세요

그럼 Tp 원본 코드의 몇 줄을 비교해 보겠습니다. 중요 코드:

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

이 세 가지 포인트는 프롬프트 정보, 점프 경로, 대기 시간입니다

이를 통해 다시 작성할 때 숨겨진 필드 기술을 사용할 수 있으며, 숨겨진 필드를 사용하여 얻어야 하는 정보를 jquery 형식으로 얻은 후 다음 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(); 等待时间

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

여기에서는 자동 점프를 사용하지 않고 수동으로 클릭하여 점프 전송하므로 다음 타이머는 영향을 주지 않고 직접 삭제됩니다.

재작성이 성공했습니다

TP5는 점프 프롬프트 페이지를 다시 작성하는 방법을 구현합니다.

관련 기사