Theo yêu cầu của bạn thì mình viết một script để tạo ra rank cho từng mức bài viết. Nếu như số bài vượt qua một ngưỡng nào đó (ví du 10 bài) thì sẽ thêm rank tương ứng.
Các thông số từng mức rank viết ở dạng JSON nên rất dễ tùy chỉnh và áp dụng.
Demo: http://jsfiddle.net/baivong/a5k3yjgo/show/
Hướng dẫn
Bước 1: Tìm trong temp
viewtopic_body:
- Code:
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
Sửa thành:
- Code:
<!-- BEGIN profile_field -->
<p class="profile_field_mess">
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</p>
<!-- END profile_field -->
Bước 2:Đặt code sau ở nơi muốn hiển thị rank:
- Code:
<div class="rank_mess"></div>
Lưu ý là vị trí của nó phải nằm trong
.postBước 3:Tạo một file js, check vào
In the topics:
- Code:
/*!
* zzRank by Zzbaivong <devs.forumvi.com>
* Thêm huân chương dựa theo số lượng bài viết
*/
$(function() {
var data_rank = {
10: {
title: "10 bài viết",
desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên.",
icon: "http://blog.uhm.vn/emo/laluot/2.gif"
},
50: {
title: "50 bài viết",
desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 50 bài viết trở lên.",
icon: "http://blog.uhm.vn/emo/laluot/5.gif"
},
100: {
title: "100 bài viết",
desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 100 bài viết trở lên.",
icon: "http://blog.uhm.vn/emo/laluot/24.gif"
},
500: {
title: "500 bài viết",
desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 500 bài viết trở lên.",
icon: "http://blog.uhm.vn/emo/laluot/10.gif"
}
};
$(".rank_mess").html(function() {
var all = "";
var post = parseInt($(this).closest(".post").find(".profile_field_mess:contains('Bài viết:')").text().match(/\d+/)[0], 10);
$.each(data_rank, function(key, val) {
if (post >= key) {
all += '<img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" />';
}
});
return all;
});
});
Lưu ý: Trong code trên, ở dòng 30, thay từ
Bài viết bằng từ chú thích số lượng bài viết của thành viên, trong diễn đàn của bạn.
Ghi chú:
- Chỉnh sửa lại thông số data_rank theo ý muốn, trong đó:
- Code:
// Đây là thiết lập cho một rank, ở một mức bài viết
10: { // 10 là số bài tối thiểu để đạt được huân chương
title: "10 bài viết", // Ghi chú ngắn gọn cho huân chương
desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên.", // Ghi chú chi tiết cho huân chương
icon: "http://blog.uhm.vn/emo/laluot/2.gif" // Ảnh huân chương sẽ hiển thị
}
Để thêm từng mức bài khác nhau thì bạn dùng lặp lại cấu trúc trên, lưu ý là ở nhóm cuối cùng không có dấu phẩy (,).
Nếu biết cách sử dụng JSON, bạn cũng có thể tự thêm các thông tin khác cho phù hợp.
- Trong code bước 3, dòng 33:
- Code:
'<img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" />'
Đây là cấu trúc để hiển thị từng huân chương, nếu biết về htmlString thì bạn cũng có thể sửa lại cho phù hợp diễn đàn của mình.
Ví dụ: http://jsfiddle.net/baivong/a5k3yjgo/1/
- Code:
'<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>'
Zzbaivong