집 > 기사 > 웹 프론트엔드 > Empire CMS 홈페이지 목록 페이지에 좋아요 기능을 추가하는 방법

Empire CMS 홈페이지 목록 페이지에 좋아요 기능을 추가하는 방법

php中世界最好的语言원래의: 2017-12-30 17:57:322660검색

이번에 보여드릴 내용은 Empire CMS 홈페이지 목록 페이지에 좋아요 기능을 추가하는 방법입니다. Empire CMS 템플릿은 템플릿을 기반으로 필요한 기능을 추가하고 싶다면 어떻게 해야 할까요? 그걸 구현하는 거야? 이 기사는 당신에게 좋은 분석을 제공할 것입니다.

Empire 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(&#39;[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum&#39;,&#39;EchoReturnedText&#39;,&#39;GET&#39;,&#39;&#39;);" rel="external nofollow" >来顶一下</a></td> 
</tr> 
</table>

위 코드에서 현재 총 개수를 확인할 수 있습니다. likes는 동적 스크립트 로딩을 통해 실시간으로 출력되며, a 태그의 makeRequest() 함수를 사용하여 like 기능을 구현합니다. makeRequest() 함수의 첫 번째 매개변수는 요청 주소이며 매개변수 데이터가 함께 제공됩니다. 두 번째 매개변수는 성공적인 요청 후 실행되는 콜백 함수의 이름입니다. 세 번째 매개변수는 GET 모드로 요청을 보내는 것을 지정합니다. 구현 원리를 이해한 후에는 웹 사이트의 다른 페이지에서 좋아요(like) 기능을 쉽게 구현할 수 있습니다. 구현 방법에 대한 관련 코드는 다음과 같습니다. 예를 들어 상품 목록 템플릿 페이지에 좋아요 기능을 구현해야 한다면 먼저 상품 목록 템플릿의 코드를 수정해야 합니다. 다음은 제가 수정한 목록 템플릿 코드입니다.

List content template (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=&#39;<li&#39;.$nomar.&#39;><p class="photo"><img src="&#39;.$tpic.&#39;"><a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p class="txt"><h3>查看<br>详情</h3></p></a></p> 
<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>&#39;; 
最后在底部模板里或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(&#39;<p class="zan">+1 谢谢您的支持</p>&#39;); 
            //$("body").append(&#39;<p class="zan">+1 谢谢您的支持</p>&#39;); 
          }else{ 
            mythis.append(&#39;<p class="zan">已赞</p>&#39;); 
            //$("body").append(&#39;<p class="zan">已赞</p>&#39;); 
          } 
          //"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>

위의 소개를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!