本文實(shí)例講述了thinkPHP5(TP5)實(shí)現(xiàn)改寫跳轉(zhuǎn)提示頁(yè)面的方法。分享給大家供大家參考,具體如下:
大家都知道Tp框架一直以來的執(zhí)行成功和失敗的頁(yè)面都不是特別的好看,不過這樣也給了開發(fā)者一個(gè)不錯(cuò)的選擇我們可以根據(jù)自己的喜好去改寫這個(gè)跳轉(zhuǎn)提示的頁(yè)面
我使用的是Tp5框架,Tp5的跳轉(zhuǎn)提示頁(yè)面的改寫和Tp3的有異曲同工之妙,首先還是先看一下Tp框架中自帶的跳轉(zhuǎn)提示頁(yè)面的代碼吧,我直接貼上了:
{__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>跳轉(zhuǎn)提示/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>
div 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">
頁(yè)面自動(dòng) a id="href" href="?php echo($url);?>" rel="external nofollow" >跳轉(zhuǎn)/a> 等待時(shí)間: b id="wait">?php echo($wait);?>/b>
/p>
/div>
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>
下面進(jìn)行改寫,首先css的東西都可以直接刪掉,那個(gè)幾乎沒有什么作用,忘了說了我使用的替換的跳轉(zhuǎn)提示的是layer插件,這個(gè)插件做的還是不錯(cuò)的,官網(wǎng):http://layer.layui.com/,想看的請(qǐng)同志們左拐
1.下載layer插件,進(jìn)行解壓,解壓之后的文件包如下:
解壓之后包含這三個(gè)主要的文件,其中我們需要引入到文件中的是layer.js
但是千萬(wàn)不要忘記引入了jquery.js
然后大家看Tp原來的代碼中幾行比較重要的代碼:
p class="success">?php echo(strip_tags($msg));?>/p>
?php echo($url);?>
?php echo($wait);?>
這三點(diǎn)分別是提示信息,跳轉(zhuǎn)路徑,等待時(shí)間
有了這幾個(gè)就可以了,改寫的時(shí)候使用隱藏域的手手法,利用隱藏域?qū)⑿枰@得信息通過jquery的形式獲取,然后插入到下面的js中:
script type="text/javascript">
(function(){
layer.open({
content: msg,
yes: function(index, layero){
//do something
layer.close(index); //如果設(shè)定了yes回調(diào),需進(jìn)行手工關(guān)閉
}
});
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(); 跳轉(zhuǎn)url
var wait = $('#wait').val(); 等待時(shí)間
改寫后的js:
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); //如果設(shè)定了yes回調(diào),需進(jìn)行手工關(guān)閉
}
});
})();
/script>
這里我沒有使用自動(dòng)跳轉(zhuǎn),而是手動(dòng)點(diǎn)擊進(jìn)行跳轉(zhuǎn),所以下面的計(jì)時(shí)器直接刪除掉了,并不影響
就這樣改寫成功了
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- thinkphp在php7環(huán)境下提示Cannot use ‘String’ as class name as it is reserved的解決方法
- ThinkPHP中自定義錯(cuò)誤頁(yè)面和提示頁(yè)面實(shí)例
- ThinkPHP做文字水印時(shí)提示call an undefined function exif_imagetype()解決方法
- ThinkPHP調(diào)用common/common.php函數(shù)提示錯(cuò)誤function undefined的解決方法
- Thinkphp自定義美化success和error提示跳轉(zhuǎn)頁(yè)面代碼實(shí)例