收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

帝國cms首頁列表頁實現點贊功能

查看帝國cms建站程序新聞系統的內容頁模版代碼,找到頂一下的HTML代碼塊,如下所示:

<table border="0" align="center" cellpadding="0" cellspacing="0" class="digg"> 
<tr> 
<td class="diggnum" id="diggnum"><strong><script type="text/javascript" src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5"></script></strong></td> 
</tr> 
<tr> 
<td class="diggit"><a href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');" rel="external nofollow" >來頂一下</a></td> 
</tr> 
</table> 

由以上代碼可知,當前的總頂數是通過動態腳本載入的方式實時輸出,而a標簽上的makeRequest()函數就是用來實現頂一下功能的方法。makeRequest()函數的第一個參數是請求地址并附帶參數數據,第二個參數是成功請求后執行的回調函數名,第三個參數指定以GET方式發送請求。了解實現的原理之后就很容易在網站其他頁面上實現頂一下(點贊)功能,以下給出實現方法的相關代碼。

例如我們需要在產品列表模板頁面上實現頂一下功能,那么首先就需要修改產品列表模板的代碼,以下是我修改后的列表模板代碼:

頁面模板內容

<!DOCTYPE html> 
<html lang="zh"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta charset="utf-8"> 
<title><?php echo ReturnClassAddField(0,"seotitle");?></title> 
<meta name="keywords" content="[!--pagekey--]"> 
<meta name="description" content="[!--pagedes--]"> 
<link rel="stylesheet" href="[!--news.url--]index/css/style.css" rel="external nofollow" > 
</head> 
<body> 
<div class="head_about">[!--temp.header--]</div> 
<div class="bannProOuter"><div class="bannPro"><ul><li><a class="current" href="<?=sys_ReturnBqClassname($class_r[1],9)?>" rel="external nofollow" ><?=$class_r[1][classname]?></a></li></ul></div></div> 
<div class="proOuter"><div class="proInner clearfix"> 
  <div class="proSort"> 
    <ul> 
[e:loop={"select classid,classname,classpath from phome_enewsclass where classid in (7,8,9,10,11) order by classid asc",0,24,0}] 
<?php 
if($bqno==5){ 
  echo '<li class="lastChild">'; 
}else{ 
  echo "<li>"; 
} 
$titleclass=""; 
if($bqr[classid]==$GLOBALS[navclassid]){ 
  $titleclass="current"; 
} 
?> 
<a href="<?=$bqsr[classurl]?>" rel="external nofollow" class="<?=$titleclass?>"><?=$bqr[classname]?></a></li> 
[/e:loop] 
    </ul> 
  </div> 
  <div class="selectNumberScreen"><div class="screenBox"><?=user_ShowFieldandChange()?></div></div> 
  <div class="proList clearfix"><ul>[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]</ul></div> 
  <div class="page2 txtC">[!--show.listpage--]</div> 
</div></div> 
[!--temp.footer--] 
<script type="text/javascript"> 
$(".proList .photo").hover(function(){$(this).find(".txt").stop().animate({height:"300px"},300);},function(){$(this).find(".txt").stop().animate({height:"0px"},300);}); 
</script> 
</body> 
</html> 

列表內容模板(list.var)

$nomar=""; 
if($no%4==0){$nomar=" class="nomar"";}else{$nomar="";} 
if($r[titlepic]){$tpic=sys_ResizeImg($r[titlepic],300,300,1,"");}else{$tpic="/e/data/images/notimg.gif";} 
$listtemp='<li'.$nomar.'><div class="photo"><img src="'.$tpic.'"><a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><div class="txt"><h3>查看<br>詳情</h3></div></a></div> 
<b><a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" >[!--title--]([!--model--])</a></b> 
<a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><em>[!--diggtop--]</em>人贊過</a></li>'; 
最后在底部模板里或JS文件中加入以下js代碼,大功告成
[html] view plain copy print?
<script type="text/javascript"> 
$(".icon-thumbs-up").click(function(event){ 
  event.preventDefault(); 
  var mythis = $(this); 
  var classid = mythis.data("classid"); 
  var id = mythis.data("id"); 
  $.ajax({ 
    type:"GET", 
    url:"[!--news.url--]e/public/digg/", 
    data:{"classid":classid,"id":id,"dotop":1,"doajax":1,"ajaxarea":"diggnum"}, 
    dataType:"text", 
    success:function(data){ 
      var reinfo = data.split("|"); 
      if (reinfo.length != 1) { 
        if (reinfo[0] != "") { 
          mythis.find("em").html(reinfo[0]); 
        } 
        if (reinfo[2] != "") { 
          //var left = parseInt(mythis.offset().left)+20, top = parseInt(mythis.offset().top); 
          var left = 20, top = mythis.find("em").get(0).offsetHeight; 
          $(".zan").remove(); 
          if (reinfo[2] == "謝謝您的支持") { 
            mythis.append('<div class="zan">+1 謝謝您的支持</div>'); 
            //$("body").append('<div class="zan">+1 謝謝您的支持</div>'); 
          }else{ 
            mythis.append('<div class="zan">已贊</div>'); 
            //$("body").append('<div class="zan">已贊</div>'); 
          } 
          //"text-shadow":"0 1px 0 rgba(0,0,0,0.5)","font-family":"simsun" 
          $(".zan").css({"position":"absolute","z-index":"10","left":left+"px","top":-top+"px","color":"inherit"}).animate({top:-top-30},"slow",function(){$(this).fadeIn("fast").remove();}); 
        } 
      }else{} 
    } 
  }); 
}); 
</script> 

總結

以上所述是小編給大家介紹的帝國cms首頁列表頁實現點贊功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對積木網網站的支持!

JavaScript實現QQ列表展開收縮擴展功能
本文實例為大家分享了js實現QQ列表展開收縮擴展展示的具體代碼,供大家參考,具體內容如下效果圖:代碼:htmlheadmetahttp-equiv="Content-Type"content="text/html

JavaScript中正則表達式使數字、中文或指定字符高亮顯示
spanid="span_id"span2314的23文本213/spanvarhtmlobj=txt.replace(/(d+)/img,"spanstyle='background:red;'$&/span");//varhtmlobj=txt.replace(/([+-][0-9]+(.[0-9]+))/g,"spanstyle='background:red;'$1/sp

ES6擴展運算符用法實例分析
本文實例講述了ES6擴展運算符用法。分享給大家供大家參考,具體如下:擴展運算符用三個點號表示,功能是把數組或類數組對象展開成一系列用逗號

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 股票融资买入的步骤 幸运赛车天天精准计划 佳永配资是正规公司不 四川快乐12中奖口诀 旅游股票推荐 快乐12开奖走势图 福州配资炒股 幸运飞艇全国统一开奖视频 南京期货配资网 北京快乐8 玩法介绍 十一选五黑龙江一定 上海时时乐官方网站 贵州十一选五官方下载 山西快乐10分预测 云南十一选五一定牛 最优秀的十一运夺金