Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:18 

    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



    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)
    Tags: #tutorial
    You cannot reply to topics in this forum