[TUTs] zzVotePlus - Chức năng bỏ phiếu với giao diện google+

  Bài viết hay nhất1

zzVotePlus - Chức năng bỏ phiếu với giao diện Google plus


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

[TUTs] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ 325u61u


Hướng dẫn


Bước 1

Thêm vào CSS:

Code:
/* zzVotePlus by Zzbaivong - devs.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

Xóa code Temp nút vote mặc định
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 javascript 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"


Nguồn

Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất2
Thêm chữ đằng sau số "1" được ko Baivong? VD chữ "like" ấy. và trước hay sau khi vote đều còn chữ "like" đó
  Bài viết hay nhất3
Có thể, nhưng không nên làm thế!
  Bài viết hay nhất4
Zzbaivong wrote:Có thể, nhưng không nên làm thế!
BaiVong có thể cho mình biết lý do được không?
  Bài viết hay nhất5
Vì đây là giao diện google plus, sửa lại thì nó không còn là zzVotePlus nữa :D
  Bài viết hay nhất6
(y) cho code đẹp @@ + hay :putnam: nhiều người sẽ không bít đây là nút like
  Bài viết hay nhất7
Thấy bài của ad, biết nhấn vào là được rồi :3
  Bài viết hay nhất8
đẹp bác à :D
  Bài viết hay nhất9
thích nhất trong nút +1 của google là cái số cuộn lên . quất luôn style như vậy thì tuyệt bác ạ :d
  Bài viết hay nhất10
Có thấy cuộn đâu bác :v
  Bài viết hay nhất11
Không hiểu sao nhấn vào mà load mãi thôi! Like thì được mà không send mess lên wall đc :v
  Bài viết hay nhất12
Viewtopic_body đã sửa nên thế, riêng nick xanh thì tự mò nhé! :D
  Bài viết hay nhất13
(y)
  Bài viết hay nhất14
[TUTs] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ 3mTUpkI

Tình hình là mình cài ZZVotePlus theo như đã Share nhưng khi ấn vào like thì nó load mãi không ngừng(như trong ảnh) :'(
Giúp mình sửa với
  Bài viết hay nhất15
sonlapro wrote:[TUTs] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ 3mTUpkI

Tình hình là mình cài ZZVotePlus theo như đã Share nhưng khi ấn vào like thì nó load mãi không ngừng(như trong ảnh) :'(
Giúp mình sửa với
demo onl + acc test
  Bài viết hay nhất16
anhoang_qn wrote:
sonlapro wrote:[TUTs] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ 3mTUpkI

Tình hình là mình cài ZZVotePlus theo như đã Share nhưng khi ấn vào like thì nó load mãi không ngừng(như trong ảnh) :'(
Giúp mình sửa với
demo onl + acc test

www.bivn.tk
ID: baby11
Pass: bivn01
  Bài viết hay nhất17
div.post-options và div.main-foot ở đâu vậy ad
  Bài viết hay nhất18
ryansang281 wrote: div.post-options và div.main-foot ở đâu vậy ad
Sửa temp viewtopic_body..Admin đã nói trong phần hướng dẫn rồi mà bạn
  Bài viết hay nhất19
mình ko thấy 2 cái div.post-options và div.main-foot đó bạn ơi
  Bài viết hay nhất20
Link forum
  Bài viết hay nhất21
Sao nó cứ load mãi không ngừng thế, không post messenger lên wall được nữa ? :'(
  Bài viết hay nhất22
Code viết dựa trên cấu trúc mặc định của view. Tự edit lại phần tử là đc.
  Bài viết hay nhất23
Toàn load mãi không ngừng :'(
  Bài viết hay nhất24
Đã biết cách sửa, dành cho ai không biết

trong đoạn js tìm
Code:
$user = $post.find(".user a[href^='/u']:not(:has(img)):first");
thay .user thành cái class bao quanh user của bạn ạ
  Bài viết hay nhất25
Sao cái forum mình add cái đó vô, thì ai post bài nó cũng để nút +2 màu đỏ và không cho vote, đăng xuất vào nick khác cũng vậy luôn, mình đã làm giống như tut
  Bài viết hay nhất26
You cannot reply to topics in this forum