漫游的备忘录
顶/踩文章的digg功能详解及ASP示例
2011-10-18 漫游

用到的DEDECMS的文件:digg_ajax.php,dedeajax2.js


 


前台代码(文件路径自行修改):

<script language="javascript" type="text/javascript" src="dedeajax2.js"></script>

<script language="javascript" type="text/javascript">

<!--

function postDigg(ftype,aid)

{

 var taget_obj = document.getElementById('newdigg');

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

 }

 myajax = new DedeAjax(taget_obj,false,false,'','','');

 var url = "/DedeCms/plus/digg_ajax.php?action="+ftype+"&id="+aid+"&rnd="+Math.random();

 myajax.SendGet2(url);

//getDigg(aid);    //可能要加上这句才能更新显示

}

function getDigg(aid)

{

 var taget_obj = document.getElementById('newdigg');

 myajax = new DedeAjax(taget_obj,false,false,'','','');

 myajax.SendGet2("/DedeCms/plus/digg_ajax.php?id="+aid);

 DedeXHTTP = null;

}

-->

</script>



   <!-- //顶踩 -->

   <div class="newdigg" id="newdigg">

    <div class="diggbox digg_good" onmousemove="this.style.backgroundPosition='left bottom';" onmouseout="this.style.backgroundPosition='left top';" onclick="javascript:postDigg('good',1)">

     <div class="digg_act">顶一下</div>

     <div class="digg_num">(0)</div>

     <div class="digg_percent">

      <div class="digg_percent_bar"><span style="width:0%"></span></div>

      <div class="digg_percent_num">0%</div>

     </div>

    </div>

    <div class="diggbox digg_bad" onmousemove="this.style.backgroundPosition='right bottom';" onmouseout="this.style.backgroundPosition='right top';" onclick="javascript:postDigg('bad',1)">

     <div class="digg_act">踩一下</div>

     <div class="digg_num">(0)</div>

     <div class="digg_percent">

      <div class="digg_percent_bar"><span style="width:0%"></span></div>

      <div class="digg_percent_num">0%</div>

     </div>

    </div>

   </div>

   <script language="javascript" type="text/javascript">getDigg(1);</script>

   <!-- //顶踩部份的源码结束 -->



样式:

/*顶踩*/

.newdigg{ width:406px; height:51px; margin:8px auto; clear:both; overflow:hidden; padding-left:8px;}

.diggbox{ width:195px; height:51px; float:left; margin-right:8px; overflow:hidden; cursor:pointer;}

.diggbox .digg_act{ font-size:14px; float:left; line-height:31px; text-indent:32px; height:29px; overflow:hidden; font-weight:bold;}

.diggbox .digg_num{ float:left; line-height:29px; text-indent:5px;}

.diggbox .digg_percent{ width:180px; clear:both; padding-left:10px; overflow:hidden;}

.diggbox .digg_percent .digg_percent_bar{ width:100px; height:7px; background:#E8E8E8; border-right:1px solid #CCC; float:left; overflow:hidden; margin-top:3px;}

.diggbox .digg_percent .digg_percent_num{ font-size:10px; float:left; padding-left:10px;}

.diggbox .digg_percent .digg_percent_bar span{ display:block; height:5px; overflow:hidden; background:#000;}

.newdigg .digg_good{ background:url(./images/newdigg-bg.png) left top no-repeat;}

.newdigg .digg_bad{ background:url(./images/newdigg-bg.png) right top no-repeat;}

.newdigg .digg_good .digg_act{ color:#C30; }

.newdigg .digg_good .digg_num{ color:#C63;}

.newdigg .digg_bad .digg_act{ color:#36C; }

.newdigg .digg_bad .digg_num{ color:#39C;}

.newdigg .digg_good .digg_percent .digg_percent_bar span{ border:1px solid #E37F24; background:#FFC535;}

.newdigg .digg_bad .digg_percent .digg_percent_bar span{ border:1px solid #689ACC; background:#94C0E4;}

.handle{ height:59px; padding-top:12px; overflow:hidden; clear:both;}

.handle .digg{ width:59px; height:59px; float:left; background:url(./images/digg-bg.gif) no-repeat; margin-right:12px;}

.handle .digg .digg_num{ width:56px; height:34px; font-size:20px; text-align:center; line-height:34px; overflow:hidden; color:#6B9169;}

.handle .digg .digg_act{ width:56px; height:22px; line-height:23px; overflow:hidden;}

.handle .digg .digg_act a{ margin-left:11px; color:#666; float:left;}





程序原理:先显示顶踩的样子,通过点击顶或踩触发postDigg(ftype,aid)函数,这里通过ajax发送到php页面处理,该页面处理好数据后返回<div class="newdigg" id="newdigg"></div>间的所有html代码,这时可能再执行一次getDigg(aid)来把内容显示到原来位置。JS通过检测cookie("diggid")的值与当前信息的id有否重复,有则判断为已经顶过。

下面是ASP的digg_ajax.asp代码,大家作些各自的修改就可以用:



<%@ CODEPAGE=936 %>

<%

Response.CodePage=936

Response.Charset="gb2312"

Response.AddHeader "Pragma", "no-cache"

Response.AddHeader "cache-ctrol", "no-cache"

Response.CacheControl = "no-cache"

Response.Flush

%>

<!--#include virtual="/inc/conn.asp"-->

<!--#include virtual="/inc/function.asp"-->

<%

id = request.QueryString("id")    '进行数值处理

action = request.QueryString("action")

saveid = request.Cookies("diggid")

if instr(","&saveid&",", ","&id&",") > 0 then response.end


set rs=server.createobject("adodb.recordset")

rs.open "select top 1 * from info where is_pass=1 and id=" & id,conn,1,3

if rs.eof then

' msgAlert "要查看的信息不存在或未审核。"

 response.End()

else

 if action = "good" then rs("act_good") = rs("act_good") + 1

 if action = "bad" then rs("act_bad") = rs("act_bad") + 1

 rs.update

 act_good = rs("act_good")

 act_bad = rs("act_bad")

end if

rs.close


if act_good+act_bad=0 then

 act_good_per = 0

 act_bad_per = 0

else

 act_good_per=cint(act_good/(act_good+act_bad)*100)

 act_bad_per=100-act_good_per

end if


set rs=nothing

CloseConn()

digg = ""

digg = digg & "<div class=""diggbox digg_good"" onmousemove=""this.style.backgroundPosition='left bottom';"" onmouseout=""this.style.backgroundPosition='left top';"" onclick=""postDigg('good'," & id & ")"">"

digg = digg &            "<div class=""digg_act"">顶一下</div>"

digg = digg &            "<div class=""digg_num"">(" & act_good & ")</div>"

digg = digg &            "<div class=""digg_percent"">"

digg = digg &            "    <div class=""digg_percent_bar""><span style=""width:" & act_good_per & "%""></span></div>"

digg = digg &            "    <div class=""digg_percent_num"">" & act_good_per & "%</div>"

digg = digg &            "</div>"

digg = digg &        "</div>"

digg = digg &        "<div class=""diggbox digg_bad"" onmousemove=""this.style.backgroundPosition='right bottom';"" onmouseout=""this.style.backgroundPosition='right top';"" onclick=""postDigg('bad'," & id & ")"">"

digg = digg &            "<div class=""digg_act"">踩一下</div>"

digg = digg &            "<div class=""digg_num"">(" & act_bad & ")</div>"

digg = digg &            "<div class=""digg_percent"">"

digg = digg &            "    <div class=""digg_percent_bar""><span style=""width:" & act_bad_per & "%""></span></div>"

digg = digg &            "    <div class=""digg_percent_num"">" & act_bad_per & "%</div>"

digg = digg &            "</div>"

digg = digg &        "</div>"

response.write digg

%>