thinkPHP5如何实现改写跳转提示页面
导读:本文共2501字符,通常情况下阅读需要8分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 具体如下:大家都知道Tp框架一直以来的执行成功和失败的页面都不是特别的好看,不过这样也给了开发者一个不错的选择我们可以根据自己的喜好去改写这个跳转提示的页面我使用的是Tp5框架,Tp5的跳转提示页面的改写和Tp3的有异曲同工之妙,首先还是先看一下Tp框架中自带的跳转提示页面的代码吧,我直接贴上了:{__NOLAYOUT__}<!DOCTYPEhtmlPUB... ...
目录
(为您整理了一些要点),点击可以直达。具体如下:
大家都知道Tp框架一直以来的执行成功和失败的页面都不是特别的好看,不过这样也给了开发者一个不错的选择我们可以根据自己的喜好去改写这个跳转提示的页面
我使用的是Tp5框架,Tp5的跳转提示页面的改写和Tp3的有异曲同工之妙,首先还是先看一下Tp框架中自带的跳转提示页面的代码吧,我直接贴上了:
{__NOLAYOUT__}<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>跳转提示</title><styletype="text/css">*{padding:0;margin:0;}body{background:#fff;font-family:"MicrosoftYahei","HelveticaNeue",Helvetica,Arial,sans-serif;color:#333;font-size:16px;}.system-message{padding:24px48px;}.system-messageh2{font-size:100px;font-weight:normal;line-height:120px;margin-bottom:12px;}.system-message.jump{padding-top:10px;}.system-message.jumpa{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><divclass="system-message"><?phpswitch($code){?><?phpcase1:?><h2>:)</h2><pclass="success"><?phpecho(strip_tags($msg));?></p><?phpbreak;?><?phpcase0:?><h2>:(</h2><pclass="error"><?phpecho(strip_tags($msg));?></p><?phpbreak;?><?php}?><pclass="detail"></p><pclass="jump">页面自动<aid="href"href="<?phpecho($url);?>"rel="externalnofollow">跳转</a>等待时间:<bid="wait"><?phpecho($wait);?></b></p></div><scripttype="text/javascript">(function(){varwait=document.getElementById('wait'),href=document.getElementById('href').href;varinterval=setInterval(function(){vartime=--wait.innerHTML;if(time<=0){location.href=href;clearInterval(interval);};},1000);})();</script></body></html>
下面进行改写,首先css的东西都可以直接删掉,那个几乎没有什么作用,忘了说了我使用的替换的跳转提示的是layer插件,这个插件做的还是不错的,官网:http://layer.layui.com/,想看的请同志们左拐
1.下载layer插件,进行解压,解压之后的文件包如下:
解压之后包含这三个主要的文件,其中我们需要引入到文件中的是layer.js
但是千万不要忘记引入了jquery.js
然后大家看Tp原来的代码中几行比较重要的代码:
<pclass="success"><?phpecho(strip_tags($msg));?></p><?phpecho($url);?><?phpecho($wait);?>
这三点分别是提示信息,跳转路径,等待时间
有了这几个就可以了,改写的时候使用隐藏域的手手法,利用隐藏域将需要获得信息通过jquery的形式获取,然后插入到下面的js中:
<scripttype="text/javascript">(function(){layer.open({content:msg,yes:function(index,layero){//dosomethinglayer.close(index);//如果设定了yes回调,需进行手工关闭}});varwait=document.getElementById('wait'),href=document.getElementById('href').href;varinterval=setInterval(function(){vartime=--wait.innerHTML;if(time<=0){location.href=href;clearInterval(interval);};},1000);})();</script>varmsg=$('#msg').val();提示信息varurl=$('#url').val();跳转urlvarwait=$('#wait').val();等待时间
改写后的js:
<scripttype="text/javascript">(function(){varmsg=$('#msg').val();varurl=$('#url').val();varwait=$('#wait').val();layer.open({content:msg,yes:function(index,layero){//dosomethinglocation.href=url;layer.close(index);//如果设定了yes回调,需进行手工关闭}});})();</script>
这里我没有使用自动跳转,而是手动点击进行跳转,所以下面的计时器直接删除掉了,并不影响
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
thinkPHP5如何实现改写跳转提示页面的详细内容,希望对您有所帮助,信息来源于网络。