11. 資訊通知中心

一、通知

1. 上節我們利用$_SESSION，做了「登入」、「登出」的功能，這二個動作都必須「轉向」，但轉向後並沒有訊息告知動作是否成功或失敗，因此有需要製做一個，資訊通知中心。
2. jgrowl 官網：https://github.com/stanlemon/jGrowl

二、方法

1. 引入CSS
2. 引入JS
3. 調用插件

   
       <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>

    

三、先整合至樣板

1. 將css、js存至 class/jGrowl
2. 實體引用

   
       <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>

   
    

四、上面只要一進入網站，就會有訊息通知，請問該如何做到，有訊息時網頁才啟動「通知功能」

1. 這是原本轉頁的函數

   header("location:admin/index.php");

    

2. 這是參考xoops轉向的函數

   redirect_header(轉向網址,停留豪秒,訊息);

   由於前後台都可以用，所以將此函數放在function.php

3. 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;
   }

    

4. 當redirect_header()被執行時，$_SESSION['redirect'] 有值
5. 在前台與後台的head.php下方，必須將 smarty與function都引入完成的位置，加入

   $_SESSION['redirect']=isset($_SESSION['redirect'])?$_SESSION['redirect']:"";
   $smarty->assign("redirect", $_SESSION['redirect']);
   $_SESSION['redirect']="";

    

6. 如此，我們即可在樣板判斷 <{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}>

    

7. 登入

   
   		//header("location:admin/index.php");
   		redirect_header("admin/index.php", 3000, '登入成功！！');

   ps：注意後台jquery的位置

8. 登出

   
     //header("location:index.php");
   	redirect_header("index.php", 3000, '登出成功！！');

    

9. 若測試正常，將之變成子樣板
   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}>