走过平凡人生、留下平凡足迹 注册 | 登陆

sablog加入jquery顶一下功能修改笔记

加入文章顶或踩功能 修改原程序文件

1.加入jquery.js到include目录
2.修改模版文件show.php:

引入jquery.js
<script type="text/javascript" src="include/jquery.js"></script>

引入ding.js
<script type="text/javascript" src="include/ding.js"></script>

ding.js内容:

JavaScript代码
  1. function ding(type, aid, showHtml) {//可自定义类型,文章ID,要显示的文本(例如:顶或踩)  
  2.     $.get('ding.php',{  
  3.             'check' : 'checkcookies',//发送check检查session是否存在返回0或者1  
  4.             'aid' : aid,//发送文章ID  
  5.             'type' : type//类型()  
  6.             },function(data){  
  7.                 //alert(data);  
  8.                 if(data > 0){//如果大于0,则表示存在  
  9.                     $("#dig" + type).html('<font color="#999999">' + showHtml + '</font>');//去掉超链接并改变颜色  
  10.                 }  
  11.             });  
  12.   
  13.             $("#dig" + type +" a").click(function(){//点击事件  
  14.                     var n = parseInt($("#show" + type).text());//得到当前值  
  15.                     $.get('ding.php',{  
  16.                             'act' : type,  
  17.                             'aid' : aid},function(data){  
  18.                     });  
  19.             n += 1;//原值加1,这里直接在原值的基础上加1并显示,不重新查询数据库  
  20.             $("#dig" + type).html('<font color="#999999">' + showHtml + '</font>');//去掉超链接并改变颜色  
  21.             $("#show" + type).html(n);//显示结果数值  
  22.               
  23.         });  
  24. }  

适当位置加入

   

xml/HTML代码
  1. <div class="digbox">  
  2.         <div class="dig" id="showding">$d</div>  
  3.         <div class="digaction" id="digding"><a href="###">顶一下</a></div>  
  4.     </div>  


加入代码:

JavaScript代码
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.     ding('ding','$article[articleid]','顶一下');  
  4.       
  5. });  
  6.   
  7. </script>  


3.修改数据库表articles
增加ding字段 varchar(10),默认值为0|0(原设计为顶或踩两个功能)

4.增加css样式

CSS代码
  1. .digbox{  
  2. width:52px;  
  3. height:80px;  
  4. float:rightright;  
  5.   
  6. }  
  7. .dig{  
  8.     width:52px;  
  9.     height:52px;  
  10.     background:url(img/dig.gif) repeat-y;  
  11.     font-size20px;  
  12.     color:#FFFFFF;  
  13.     line-height52px;  
  14.     text-aligncenter;  
  15.     clearboth;  
  16.   
  17. }  
  18. .digaction{  
  19.     width:52px;  
  20.     height:20px;  
  21.     font-size12px;  
  22.     margin-top:5px;  
  23.     border1px solid #DEEAF7;  
  24.     text-aligncenter;  
  25.     line-height20px;  
  26.     color:white;  
  27.     background:url(img/btn_normal.gif);  
  28.     font-weight:bold;  
  29. }  
  30. .digaction a:link{  
  31. color:white;  
  32. text-decoration:none  
  33. }  
  34.   
  35. .digaction a:hover{  
  36. color:black;  
  37. text-decoration:none;  
  38. border1px solid #ADCAEC;  
  39. display:block  
  40.   
  41. }  

5. 增加PHP处理文件 ding.php 内容如下

PHP代码
  1. <?php  
  2.   
  3. require_once('global.php');  
  4.   
  5.   
  6. require_once(SABLOG_ROOT.'include/visits.php');  
  7.   
  8. if($check == 'checkcookies'){  
  9.     session_start();  
  10.     if($_SESSION['article'.$type.$aid] != '') {//如果session不存在返回0,反之返回1
  11.         echo 1;  
  12.     } else {  
  13.         echo 0;  
  14.     }  
  15. }  
  16.   
  17.   
  18.   
  19. if (!$act && !$cid) {  
  20.     exit();  
  21. }  
  22.   
  23. $sql = $DB->fetch_one_array("SELECT ding FROM {$db_prefix}articles WHERE articleid='$aid'");  
  24. //print_r($sql);  
  25. $ding = explode("|"$sql['ding']);  
  26. $d = $ding[0];  
  27. $c = $ding[1];  
  28. if($act == "ding") {  
  29.     $d = $d + 1;  
  30.     $data = $d."|".$c;  
  31. else {  
  32.     $c = $c + 1;  
  33.     $data = $d."|".$c;  
  34. }  
  35.   
  36.     if ($data != '') {  
  37.         $DB->unbuffered_query("UPDATE {$db_prefix}articles SET ding='$data' WHERE articleid='$aid'");  
  38.         session_start();  
  39.         session_register("article".$act.$aid);  
  40.         $_SESSION["article".$act.$aid] = md5("article".$act.$aid);  
  41.   
  42.     } else {  
  43.         echo "更新失败";  
  44.     }  
  45.   
  46. ?>  

 

Tags: jquery php

« 上一篇 | 下一篇 »

Trackbacks

点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5

4条记录访客评论

不错哦!有创意,不过顶的那个图片怎么和CNBETA上面一样的?

Post by xJin on 2008, April 7, 2:21 PM 引用此文发表评论 #1

k来的^_^

Post by Aming on 2008, April 7, 6:20 PM 引用此文发表评论 #2

不错。。

Post by nokia on 2008, December 7, 12:38 PM 引用此文发表评论 #3

收藏了。

Post by 跑跑 on 2008, December 19, 8:03 PM 引用此文发表评论 #4


发表评论

评论内容 (必填):