織夢dedecms內容頁面是有頂、踩效果的,但是我們很多時候不光是在內容頁面需要這樣的效果,很多時候我們可能會再列表頁面,甚至首頁都需要這樣的效果,我們該如何來實現呢?下面是一個用戶的需要分析:
1. 列表頁里面的每條信息對應一個頂和踩的按鈕,然后實現javascript效果,點擊后不刷新當前頁面就改變數值。
2. 右側最火、最熱的列表信息塊,或者是一些用戶列表,要求也有如上頂、踩的功能。
3. 修改內容頁頂踩的樣式。
分析:
需求1和需求2其實原理一模一樣,只是需求不一樣而言,一些對dede不太熟悉的用戶也就別大驚小怪了。
原理淺析:
實現無刷新頂、踩效果,其實就是借用javascript的ajax技術,以及javascript對文檔的操作,通過ajax調用dede系統里面的plus目錄下的php文件,然后返回一個參數值或者html代碼(這一過程在瀏覽器后臺執行,不刷新當前頁面,所以謂之:無刷新技術),然后javascript處理獲得的值或html代碼在前臺進行修改,然后顯示。
提示:通過分析dede內容頁的頂踩技術來看其實現的原理,然后模仿這個原理來實現列表頁的頂踩效果。
步驟:
第一步、在需要實現效果的列表模板頁添加頂、踩標簽代碼,比如修改list_article.htm;
{dede:list pagesize='15'}
< li><div class="share fr">
<span id="diggNum[field:id/]">
<a id="unlike" class="dig"
href="javascript:" onclick="javascript:postDigg('bad',[field:id/])">踩一下
<span class="count">(<span>[field:badpost/]</span>)</span></a>
<a id="love" class="dig"
href="javascript:" onclick="javascript:postDigg('good',[field:id/])">喜歡
<span class="count">(<span>[field:goodpost/]</span>)</span></a>
</span>
</div>
[field:wbname/]
< /li>
{/dede:list}
注:紅色標記的代碼十分必要,而且必須和第二步里面的javascript代碼一一對應,否則沒有效果。除此之外,為了更好地看到效果,將此處代碼粘貼到列表頁里面自行調整縮進。
第二步、在列表頁<head></head>標簽里引用根目錄下include文件夾里的dedeajax2.js,然后添加如下javascript代碼,其實這段代碼是來自內容頁的,只是稍作修改,主要是紅色部分代碼的修改,因為它必須和第一步里面的紅色代碼部分一一對應;
<script language="javascript" type="text/javascript"src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>< script language="javascript" type="text/javascript">function postDigg(ftype,aid){var taget_obj = document.getElementById('diggNum'+aid);var saveid = GetCookie('diggid');if(saveid != null){var saveids = saveid.split(',');var hasid = false;saveid = '';j = 1;for(i=saveids.length-1;i>=0;i--){if(saveids[i]==aid && hasid) continue;else {if(saveids[i]==aid && !hasid) hasid = true;saveid += (saveid=='' ? saveids[i] : ','+saveids[i]);j++;if(j==20 && hasid) break;if(j==19 && !hasid) break;}}if(hasid) { alert("您已經頂過該帖,請不要重復頂帖 !"); return; }else saveid += ','+aid;SetCookie('diggid',saveid,1);}else{SetCookie('diggid',aid,1);}/*此處是調用dedeajax2.js文件里面的ajax類,實現無刷新數據的處理 */myajax = new DedeAjax(taget_obj,false,false,'','','');var url = "{dede:global.cfg_phpurl/}/digg_ajax_list.php?action="+ftype+"&id="+aid;myajax.SendGet2(url);}function getDigg(aid){var taget_obj = document.getElementById('diggNum'+aid);myajax = new DedeAjax(taget_obj,false,false,'','','');myajax.SendGet2("{dede:global.cfg_phpurl/}/digg_ajax_list.php?id="+aid);DedeXHTTP = null;}< /script>分析:
'diggNum'+aid 對應 diggNum[field:id/](第一步里面的)
{dede:global.cfg_phpurl/}/digg_ajax_list.php
就是第三步在plus文件下創建的php文件。
第三步、在plus文件夾下創建”digg_ajax_list.php” 文件,其實這里我們完全不需要像網上另外叫的那種方法,自建一個php文件,然后在里面寫一些數據處理的代碼。這樣對一些不擅長php代碼的朋友,很是受罪,因為萬一他們不小心敲錯了(或許根本就沒錯),然后沒實現效果就以為是自己弄錯了,接著就是不花大把大把時間去排錯,最后可能根本就解決不了問題,因為可能其實就是那個教程的問題,或者版本兼容性問題。
因此,在此推薦直接復制“digg_ajax.php”(默認的那個頂踩文件),然后修改其數據返回的html代碼(下面紅色標記的部分)即可。這樣簡單方便,而且不容易出錯。
即,復制digg_ajax.php文件,然后修改名字為:digg_ajax_list.php(必須和第二步里面的文件相對應),然后修改代碼如下:
< ?php/**** 文檔digg處理ajax文件** @version $Id: digg_ajax.php 2 13:00 2011/11/25 tianya $* @package DedeCMS.Plus* @copyright Copyright (c) 2007 - 2010, DesDev, Inc.* @license http://help.dedecms.com/usersguide/license.html* @link http://www.dedecms.com*/require_once(dirname(__FILE__)."/../include/common.inc.php");$action = isset($action) ? trim($action) : '';$id = empty($id)? 0 : intval(preg_replace("/[^/d]/",'', $id));helper('cache');if($id < 1){exit();}$maintable = 'dede_archives';$prefix = 'diggCache';$key = 'aid-'.$id;$row = GetCache($prefix, $key);if(!is_array($row) || $cfg_digg_update==0){$row = $dsql->GetOne("SELECT goodpost,badpost,scores FROM `$maintable` WHERE id='$id' ");if($cfg_digg_update == 0){if($action == 'good'){$row['goodpost'] = $row['goodpost'] + 1;$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores + {$cfg_caicai_add},goodpost=goodpost+1,lastpost=".time()." WHERE id='$id'");}else if($action=='bad'){$row['badpost'] = $row['badpost'] + 1;$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores - {$cfg_caicai_sub},badpost=badpost+1,lastpost=".time()." WHERE id='$id'");}DelCache($prefix, $key);}SetCache($prefix, $key, $row, 0);} else {if($action == 'good'){$row['goodpost'] = $row['goodpost'] + 1;$row['scores'] = $row['scores'] + $cfg_caicai_sub;if($row['goodpost'] % $cfg_digg_update == 0){$add_caicai_sub = $cfg_digg_update * $cfg_caicai_sub;$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores + {$add_caicai_sub},goodpost=goodpost+{$cfg_digg_update} WHERE id='$id'");DelCache($prefix, $key);}} else if($action == 'bad'){$row['badpost'] = $row['badpost'] + 1;$row['scores'] = $row['scores'] - $cfg_caicai_sub;if($row['badpost'] % $cfg_digg_update == 0){$add_caicai_sub = $cfg_digg_update * $cfg_caicai_sub;$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores - {$add_caicai_sub},badpost=badpost+{$cfg_digg_update} WHERE id='$id'");DelCache($prefix, $key);}}SetCache($prefix, $key, $row, 0);}$digg = '';if(!is_array($row)) exit();if($row['goodpost'] + $row['badpost'] == 0){$row['goodper'] = $row['badper'] = 0;}else{$row['goodper'] = number_format($row['goodpost'] / ($row['goodpost'] + $row['badpost']), 3) * 100;$row['badper'] = 100 - $row['goodper'];}if(empty($formurl)) $formurl = '';if($formurl=='caicai'){if($action == 'good') $digg = $row['goodpost'];if($action == 'bad') $digg = $row['badpost'];}else{$row['goodper'] = trim(sprintf("%4.2f", $row['goodper']));$row['badper'] = trim(sprintf("%4.2f", $row['badper']));$digg = '<a id="unlike" class="dig"href="javascript:" onclick="javascript:postDigg(/'bad/','.$id.')">踩一下<span class="count">(<span>'.$row['badpost'].'</span>)</span></a><a id="love" class="dig"href="javascript:" onclick="javascript:postDigg(/'good/','.$id.')">喜歡<span class="count">(<span>'.$row['goodpost'].'</span>)</span></a>';}AjaxHead();echo $digg;exit();注意到沒:紅色部分的php代碼和第一步里面的html代碼很類似,因為我們通過ajax要返回的正式這段html代碼數據,然后才能實現頂踩效果后樣式的統一。
到這里列表頁整合無刷新頂、踩效果就完成了,可能有不完善的地方,大家多多包涵。
新聞熱點
疑難解答