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

TP5에서 점프 프롬프트 페이지를 다시 작성하는 구현 방법

黄舟원래의: 2017-10-30 09:05:532244검색

이 기사의 예에서는 thinkPHP5(TP5)에서 점프 프롬프트 페이지를 다시 작성하는 방법을 설명합니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

Tp 프레임워크의 성공 및 실패 실행 페이지가 항상 보기에 좋지는 않았지만 이는 개발자에게 좋은 선택을 제공할 수도 있습니다. 우리의 선호에 따라 선택하세요. 가서 이 점프 프롬프트 페이지를 다시 작성하세요

저는 Tp5 프레임워크를 사용하고 있습니다. Tp5의 점프 프롬프트 페이지 재작성은 먼저 Tp3의 코드를 살펴보겠습니다. Tp 프레임워크와 함께 제공되는 점프 프롬프트 페이지입니다.

{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에서 점프 프롬프트 페이지를 다시 작성하는 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：