Comment ajouter la fonction J'aime à la page de liste de la page d'accueil d'Empire CMS

Ce que je vais vous montrer cette fois, c'est comment ajouter la fonction J'aime à la page de liste des pages d'accueil d'Empire CMS. Le modèle Empire CMS est très facile à utiliser. Si vous souhaitez ajouter certaines fonctions dont vous avez besoin en fonction du modèle, comment devez-vous le mettre en œuvre ? Cet article vous donnera une bonne analyse.

Vérifiez le code du modèle de page de contenu du système d'actualités empire cms website builder et recherchez le bloc de code HTML pour les likes, comme indiqué ci-dessous :

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

À partir du code ci-dessus, nous pouvons connaître le nombre total actuel de likes. Il est affiché en temps réel grâce au chargement dynamique de script, et la fonction makeRequest() sur la balise a est utilisée pour implémenter la fonction like. Le premier paramètre de la fonction makeRequest() est l'adresse de la requête et accompagné des données du paramètre. Le deuxième paramètre est le fonction de rappel nom à exécuter après une requête réussie. Le troisième paramètre spécifie l'envoi de la requête en GET. mode. Après avoir compris le principe de mise en œuvre, il est facile d'implémenter la fonction like (like) sur d'autres pages du site Web. Le code correspondant à la méthode de mise en œuvre est donné ci-dessous.

Par exemple, si nous devons implémenter la fonction J'aime sur la page du modèle de liste de produits, nous devons d'abord modifier le code du modèle de liste de produits. Voici mon code de modèle de liste modifié :

Modèle de contenu de liste (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>

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser vue pour implémenter la vérification de connexion

JS pour implémenter l'effet de calendrier du système de fenêtre d'imitation

Comment utiliser JS pour cliquer pour accéder à la boîte aux lettres personnelle connectée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!