ホームページ >ウェブフロントエンド >jsチュートリアル >Empire CMSのホームページ一覧ページにいいね機能を追加する方法

Empire CMSのホームページ一覧ページにいいね機能を追加する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2017-12-30 17:57:322706ブラウズ

今回紹介するのは、Empire CMSのホームページ一覧ページにいいね機能を追加する方法です。Empire CMSのテンプレートをベースに必要な機能を追加したい場合は、どうすればよいですか。あなたはそれを実装しますか?この記事では、優れた分析を提供します。

以下に示すように、Empire CMS Web サイト ビルダーのニュース システムのコンテンツ ページ テンプレート コードを確認し、「いいね!」の 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() 関数の最初のパラメータはリクエストのアドレスであり、パラメータ データが伴います。2 番目のパラメータはリクエストが成功した後に実行されるコールバック関数の名前です。3 番目のパラメータは GET モードでリクエストを送信することを指定します。実装原理を理解すると、Web サイトの他のページにいいね (いいね) 機能を実装するのは簡単です。実装方法に関連するコードを以下に示します。 たとえば、商品リスト テンプレート ページに like 関数を実装する必要がある場合、まず商品リスト テンプレートのコードを変更する必要があります。以下は、私が変更したリスト テンプレート コードです。

リスト コンテンツ テンプレート (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 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

vueを使用してログイン検証を実装する方法


jsを使用してウィンドウシステムのカレンダー効果を模倣する


JSをクリックしてログインしている個人メールアドレスにジャンプするにはどうすればよいですか

以上がEmpire CMSのホームページ一覧ページにいいね機能を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。