Thời gian: ![[Code] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ Empty](https://2img.net/i/fa/empty.gif)
Wed Jun 18, 2014 9:22 am
![[Code] zzVotePlus - Chức năng bỏ phiếu với giao diện google+ Punbb10](https://i.servimg.com/u/f74/16/18/15/10/punbb10.png)
iao 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+ 325u61u](https://i.imgur.com/325u61u.png)
Bước 1: Thêm vào CSS:
Bước 2: Sửa temp viewtopic_body
Xóa code Temp nút vote mặc định
Đặt code Temp này ở trong div.post-options
Đặt code javascript này ở trước div.main-foot hoặc cuối template viewtopic_body:
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:
thành:
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.
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
Devs.cf
Devs.cf
