網站程式設計-PHP
一、通知
- 上節我們利用$_SESSION，做了「登入」、「登出」的功能，這二個動作都必須「轉向」，但轉向後並沒有訊息告知動作是否成功或失敗，因此有需要製做一個，資訊通知中心。
- jgrowl 官網：https://github.com/stanlemon/jGrowl
二、方法
- 引入CSS
- 引入JS
- 調用插件
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>
<!--調用插件-->
<script type="text/javascript">
$(document).ready(function(){
$.jGrowl('訊息通知中心', { life:3000 , position: 'center', speed: 'slow' });
});
</script>
三、先整合至樣板
- 將css、js存至 class/jGrowl
- 實體引用
<link rel="stylesheet" type="text/css" href="<{$smarty.const.WEB_URL}>/class/jGrowl/jquery.jgrowl.min.css" />
<script src="<{$smarty.const.WEB_URL}>/class/jGrowl/jquery.jgrowl.min.js"></script>
<!--調用插件-->
<script type="text/javascript">
$(document).ready(function(){
$.jGrowl('訊息通知中心', { life:3000 , position: 'center', speed: 'slow' });
});
</script>
四、上面只要一進入網站，就會有訊息通知，請問該如何做到，有訊息時網頁才啟動「通知功能」
- 這是原本轉頁的函數
header("location:admin/index.php");
- 這是參考xoops轉向的函數
redirect_header(轉向網址,停留豪秒,訊息);
由於前後台都可以用，所以將此函數放在function.php
- redirect_header($url="", $time = 3000, $message = '已轉向！！')
###############################################################################
# 轉向函數
###############################################################################
function redirect_header($url = "", $time = 3000, $message = '已轉向！！') {
$_SESSION['redirect'] = "\$.jGrowl('{$message}', { life:{$time} , position: 'center', speed: 'slow' });";
header("location:{$url}");
exit;
}
- 當redirect_header()被執行時，$_SESSION['redirect'] 有值
- 在前台與後台的head.php下方，必須將 smarty與function都引入完成的位置，加入
$_SESSION['redirect']=isset($_SESSION['redirect'])?$_SESSION['redirect']:"";
$smarty->assign("redirect", $_SESSION['redirect']);
$_SESSION['redirect']="";
- 如此，我們即可在樣板判斷 <{redirect}>
<{if $redirect}>
<link rel="stylesheet" type="text/css" href="<{$smarty.const.WEB_URL}>/class/jGrowl/jquery.jgrowl.min.css" />
<script src="<{$smarty.const.WEB_URL}>/class/jGrowl/jquery.jgrowl.min.js"></script>
<!--調用插件-->
<script type="text/javascript">
$(document).ready(function(){
<{$redirect}>
});
</script>
<{/if}>
- 登入
//header("location:admin/index.php");
redirect_header("admin/index.php", 3000, '登入成功！！');
ps：注意後台jquery的位置
- 登出
//header("location:index.php");
redirect_header("index.php", 3000, '登出成功！！');
- 若測試正常，將之變成子樣板
theme.html <{include file="tpl/redirect_header.html"}> redirect_header.html <{if $redirect}> <link rel="stylesheet" type="text/css" href="<{$smarty.const.WEB_URL}>/class/jGrowl/jquery.jgrowl.min.css" /> <script src="<{$smarty.const.WEB_URL}>/class/jGrowl/jquery.jgrowl.min.js"></script> <!--調用插件--> <script type="text/javascript"> $(document).ready(function(){ <{$redirect}> }); </script> <{/if}>