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

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

php中世界最好的语言
リリース: 2017-12-30 17:57:32
オリジナル
2704 人が閲覧しました

今回紹介するのは、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート