Đă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

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     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

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