Mãi Không Quên

cộng đồng teen

  • Thống kê diễn đàn


[Code] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ Bài trước Bài sau

 :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

View previous topic View next topic Go down

[Code] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ Bài trước Bài sau Empty [Code] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ Bài trước Bài sau

Post by Bui Minh Phong™ 28/5/2014, 9:01 pm

[You must be registered and logged in to see this link.]

Giao diện chức năng vote mình 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.

[Code] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ Bài trước Bài sau 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"


Zzbaivong
Bui Minh Phong™
Bui Minh Phong™
Quản Trị Cấp Cao
Quản Trị Cấp Cao

Posts : 3260
Points : 370712
Thanked : 1927
Birthday : 1994-12-18
Status Hãy Lặng Yên Để Cảm Nhận Tình Yêu Xung Quanh Bạn :x
Giới tính : Male Rất dễ thương

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Mãi Không Quên :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

 
Permissions in this forum:
You cannot reply to topics in this forum