快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

thinkPHP5如何实现改写跳转提示页面-创新互联

这篇文章主要介绍了thinkPHP5如何实现改写跳转提示页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司自2013年起,是专业互联网技术服务公司,拥有项目成都做网站、网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元海阳做网站,已为上家服务,为海阳各地企业和个人服务,联系电话:13518219792

具体如下:

大家都知道Tp框架一直以来的执行成功和失败的页面都不是特别的好看,不过这样也给了开发者一个不错的选择我们可以根据自己的喜好去改写这个跳转提示的页面

我使用的是Tp5框架,Tp5的跳转提示页面的改写和Tp3的有异曲同工之妙,首先还是先看一下Tp框架中自带的跳转提示页面的代码吧,我直接贴上了:

{__NOLAYOUT__}


 
 跳转提示
 
  *{ 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 h2{ 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; }
 


 
  
   
   

:)

   

           

:(

   

         

      页面自动 " rel="external nofollow" >跳转 等待时间:    

 
    (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);   })();  

下面进行改写,首先css的东西都可以直接删掉,那个几乎没有什么作用,忘了说了我使用的替换的跳转提示的是layer插件,这个插件做的还是不错的,官网:http://layer.layui.com/,想看的请同志们左拐

1.下载layer插件,进行解压,解压之后的文件包如下:

thinkPHP5如何实现改写跳转提示页面

解压之后包含这三个主要的文件,其中我们需要引入到文件中的是layer.js

但是千万不要忘记引入了jquery.js

然后大家看Tp原来的代码中几行比较重要的代码:

 

这三点分别是提示信息,跳转路径,等待时间

有了这几个就可以了,改写的时候使用隐藏域的手手法,利用隐藏域将需要获得信息通过jquery的形式获取,然后插入到下面的js中:


(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);
})();

var msg = $('#msg').val(); 提示信息
var url = $('#url').val();  跳转url
var wait = $('#wait').val(); 等待时间

改写后的js:


  (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回调,需进行手工关闭
    }
   });
  })();
 

这里我没有使用自动跳转,而是手动点击进行跳转,所以下面的计时器直接删除掉了,并不影响

感谢你能够认真阅读完这篇文章,希望小编分享的“thinkPHP5如何实现改写跳转提示页面”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页标题:thinkPHP5如何实现改写跳转提示页面-创新互联
网站路径:http://6mz.cn/article/cdsgco.html

其他资讯