Diễn đàn tổng hợp về Forumotion

DÀNH CHO KHÁCH
Vui lòng đăng nhập hoặc đăng kí để tham gia diễn đàn

[Code] Chức năng bỏ phiếu giống Google

Share
  • Gửi bài mới
  • Trả lời chủ đề này
Dang123
avatar
Posts : 16
Points : 2147483647
Thanked : 36

 on Sun Jun 12, 2016 9:13 pm

Giao diện chức năng vote làm theo mẫu của google plus, vì thế mình chỉ dùng nút vote +, còn nút vote - thì bỏ đi. Nếu diễn đàn bạn từng dùng cả 2 loại trước đây cũng sẽ không bị lỗi khi chuyển sang dùng zzVotePlus.
Ngoài ra, chức năng gửi thông báo lên tường cũng được tích hợp sẵn.


DEMO




HƯỚNG DẪN


BƯỚC 1



Thêm vào CSS:

Code:
/* zzVotePlus by Admin - hotrotonghop.forumvi.com */
div.vote-zzvote{float:left;margin-left:2em}
div.vote-zzvote > a.vote-plus{background:none no-repeat center #FFF;color:#444;cursor:pointer;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);box-shadow:0 1px 0 rgba(0,0,0,.05);border:1px solid #d9d9d9;border-radius:3px;font-size:11px;font-weight:700;display:inline-block;float:left;height:22px;line-height:20px;transition:background .3s;-webkit-transition:background .3s;-moz-transition:background .3s;padding:0 7px}
div.vote-zzvote > a.vote-plus:hover{border-color:#666}
div.vote-zzvote > a.vote-plus[href=""]{border:0 none;line-height:22px;background-color:#dd4b39;cursor:default;color:#FFF}
div.vote-zzvote > a.vote-plus.dis{background-color:#FFF;color:#CCC}
div.vote-zzvote > a.vote-plus.dis:hover{border-color:#d9d9d9;cursor:not-allowed}


BƯỚC 2


Sửa temp viewtopic_body:
Tìm và xóa :

Code:
<!-- BEGIN switch_vote_active -->
...
<!-- END switch_vote_active -->
Đặt code Temp này ở trong div.post-options

Code:
<!-- zzVotePlus by Zzbaivong - devs.forumvi.com -->
<div class="vote-zzvote">
   <!-- BEGIN switch_vote_active -->
   <a class="vote-plus" href="<!-- BEGIN switch_vote -->{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}<!-- END switch_vote -->">
      +<span class="vote-time" data-vote="<!-- BEGIN switch_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_bar --><!-- BEGIN switch_no_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_no_bar -->">1</span>
   </a>
   <!-- END switch_vote_active -->
</div>
Đặt code này ở trước div.main-foot hoặc cuối template viewtopic_body:

Code:
<!-- zzVotePlus by Zzbaivong - devs.forumvi.com -->
<script type="text/javascript">
   //<![CDATA[
   $(".vote-zzvote:empty").html('<a class="vote-plus dis" href="javascript:;">+<span class="vote-time" data-vote="Message not voted">1</span></a>');
   $(".vote-time").text(function() {
      var a = $(this).data("vote");
      if ("Message not voted" == a) return $(this).data("vote", 0), 1;
      a = a.split(/\W/);
      time = parseInt(a[7], 10);
      percent = parseInt(a[4], 10);
      plus = Math.round(percent / 100 * time);
      $(this).data("vote", plus);
      if (0 !== plus) return plus
   });
   $(".vote-plus").on("click", function(a) {
      a.preventDefault();
      var b = $(this),
         c = $(".vote-time", b); - 1 != this.href.indexOf("eval=plus&p_vote") && (b.css("background-image", "url(http://i57.servimg.com/u/f57/17/05/17/70/preloa10.gif)"), $.post(this.href, function() {
            c.text(parseInt(c.data("vote"), 10) + 1);
            $post = b.closest(".post");
            $user = $post.find(".user a[href^='/u']:not(:has(img)):first");
            $.post("/privmsg", {
               subject: "Bài viết hay",
               message: "Mình thích bài viết của bạn tại [url=" +
                  $post.find(".posthead a[href^='/t'][href*='#']")[0].href + "]" + document.title + "[/url]",
               username: $.trim($user.text()),
               u: $user.attr("href").replace(/.*\/u(\d+).*/, "$1"),
               mode: "post_profile",
               folder: "profile",
               post: "Send"
            }, function() {
               b.removeAttr("style")
            })
         }), this.href = "")
   });
   //]]>
</script>
Chú ý: Nếu bạn nhấn vote mà kết quả trả về là NaN thì ở code javascript, dòng 7 và dòng 12, bạn sửa:

Code:
data("vote"
Thành :

Code:
attr("data-vote"
[mod]Nguồn : devs.forumvi.com [/mod]
Admin
avatar
Posts : 18
Points : 105
Thanked : 30

 on Mon Jun 13, 2016 9:51 am

Hay , quass hay
Dang123
avatar
Posts : 16
Points : 2147483647
Thanked : 36

 on Mon Jun 13, 2016 3:46 pm

@Admin đã viết:Hay , quass hay
ukm, tks bạn
Sponsored content

 


Đăng kí hoặc đăng nhập để gửi trả lời

Bạn phải là thành viên của diễn đàn thì mới gửi được câu trả lời

Tạo một tài khoản

Bạn muốn tham gia diễn đàn của chúng tôi ? Hãy tạo một tài khoản nào !


Đăng kí

Đăng nhập vào diễn đàn

Bạn đã có tài khoản ? Còn chờ gì nữa mà không đăng nhập vào diễn đàn !


Đăng nhập

  • Bình luận Facebook
  • Bình luận Google