[TUTs] zzRank - Thêm huân chương theo số bài viết

  Bài viết hay nhất1
zzRank sẽ tạo ra nhiều kiểu huân chương cho từng mốc bài viết. Bằng cách kết hợp với điều kiện điểm thưởng và lượt cảm ơn, huân chương của bạn sẽ phong phú và hợp lý hơn.

Khi bạn sử dụng rank mặc định của forumotion sẽ chỉ có một huân chương cho mỗi cấp bậc, thay đổi mỗi khi lên cấp. Với zzRank, bạn có thể giữ lại huân chương của cấp bên dưới và bổ sung thêm các điều kiện về điểm thưởng, lượt cảm ơn để tạo thêm nhiều kiểu huận chương mới trong cùng cấp bậc đó.

Các thông số cho từng kiểu huân chương được viết ở dạng plainObject nên rất dễ tùy chỉnh và áp dụng.


Demo


http://jsfiddle.net/baivong/a5k3yjgo/2/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 ý: Vị trí của code phải nằm trong .post

Bước 3


Tạo một file js, check vào In the topics:
Code:
/*!
 * zzRank v0.2.1 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. Điểm thưởng tối thiểu là 20.",
            icon: "http://blog.uhm.vn/emo/laluot/2.gif",
            point: 20
        },
        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. Điểm tưởng lớn hơn hoặc bằng số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/5.gif",
            point: ">"
        },
        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. Được cảm ơn từ 10 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/20.gif",
            thank: 10
        },
        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. Điểm tưởng lớn hơn hoặc bằng số bài viết. Được cảm ơn từ 99 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/10.gif",
            point: ">",
            thank: 99
        },
        x500: {
            title: "Spamer",
            desc: "Thành viên đăng 500 bài viết trở lên, nhưng điểm thưởng thấp hơn số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/24.gif",
            point: "<"
        }
    };
    
    function checkif(key, check, val, post) {
        var cPost = data_rank[key][check];
        if (($.type(cPost) === "number" && cPost <= val) || ($.type(cPost) === "string" && cPost === ">" && val >= post) || ($.type(cPost) === "string" && cPost === "<" && val < post)) {
            return true;
        } else {
            return false;
        }
    }

    function getNumber(t, txt) {
        return parseInt($(t).closest(".post").find(".profile_field_mess:contains('" + txt + " : ')").text().match(/\d+/)[0], 10);
    }

    $(".rank_mess").html(function() {
        var all = "";

        var post_mess = getNumber(this, "Posts"),
            point_mess = getNumber(this, "Points"),
            thank_mess = getNumber(this, "Thanked");

        $.each(data_rank, function(key, val) {

            var point = data_rank[key].point,
                thank = data_rank[key].thank;

            if (post_mess >= parseInt(key.match(/\d+/)[0], 10)) {
                if ((point === undefined && thank === undefined) || (point !== undefined && thank === undefined && checkif(key, "point", point_mess, post_mess)) || (point === undefined && thank !== undefined && checkif(key, "thank", thank_mess, post_mess)) || (point !== undefined && checkif(key, "point", point_mess, post_mess) && thank !== undefined && checkif(key, "thank", thank_mess, post_mess))) {

                    all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>';

                }
            }

        });

        return all;
    });
});

Lưu ý: Trong code trên, ở dòng 56, thay từ Posts 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. Tương tự với từ Points, Thanked.


Ghi chú


Chỉnh sửa lại thông số data_rank(dòng 6 - 38) 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ị
}

Bạn cũng có thể thêm điều kiện point và thank nếu muốn, ví dụ:
Code:
point: ">" // point >= post
point: "<" // point < post
point: 3 // point >= 3

Nếu như mức bài viết trùng nhau, như trong ví dụ trên, trùng mức 500 bài viết, thì bạn thêm ký tự bất kỳ ở trước.

Để 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 plainObject, bạn cũng có thể tự thêm các thông tin khác cho phù hợp.


Xem v0.1 tại: https://devs.forumvi.com/t861-hoi-ap-js-xet-rank-nhe-nhat-co-the?showpost=p5584


Nguồn


Zzbaivong (devs.forumvi.com)
Tags: #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #rank
  Bài viết hay nhất2
e đả thử vào k add ở View CP
  Bài viết hay nhất3
Đây chính là đoạn code mình cần :D
  Bài viết hay nhất4
code hay lắm a ơi :)) có thể áp dụng vô làm nhiều thứ
  Bài viết hay nhất5
Có code thêm huân chương theo Top Poster ko?
  Bài viết hay nhất6
Làm được rồi nhưng mà mỏi huy chương nó lại xuống dồng khác vậy ? làm sao cho nó thành 1 hàng lun vậy anh ?

Demo : http://diendan.ngoinhagame.com/t3727-truy-kich-do-t-ki-ch-phien-ba-n-tren-web
  Bài viết hay nhất7
@Anchina dùng float: left để kéo nó lên lại
  Bài viết hay nhất8

boom wrote:@Anchina dùng float: left để kéo nó lên lại
boom ơi có YH hay FB gì ko giúp mình vài thứ trong forum mình send cho bạn 20k
  Bài viết hay nhất9

boom wrote:@Anchina dùng float: left để kéo nó lên lại

dùng làm sao ?
  Bài viết hay nhất10

AnChina wrote:Làm được rồi nhưng mà mỏi huy chương nó lại xuống dồng khác vậy ? làm sao cho nó thành 1 hàng lun vậy anh ?

Demo : http://diendan.ngoinhagame.com/t3727-truy-kich-do-t-ki-ch-phien-ba-n-tren-web
Thêm vào CSS:
Code:
.rank_mess fieldset {
  display: inline-block;
}
  Bài viết hay nhất11
Chào các bạn, mình có sử dụng vào làm theo đúng hướng dẩn sao vẩn không hiện, các bạn giúp mình với
website : http://www.kenhgamethu.com/
  Bài viết hay nhất12

anhsairoi wrote:Chào các bạn, mình có sử dụng vào làm theo đúng hướng dẩn sao vẩn không hiện, các bạn giúp mình với
website : http://www.kenhgamethu.com/
Do bạn để nó ẩn. Thêm vào CSS:
Code:
.user:hover + .user-info {
  display: block!important;
}
Rê chuột vào avatar sẽ hiện ra phần thông tin thành viên.
  Bài viết hay nhất13
vậy nếu muốn trao huy chương cho 1 nhóm thì sao ạ
  Bài viết hay nhất14
Mod này không làm được việc đó.
  Bài viết hay nhất15
em muốn khi di chuột vào huy chương hiện toolip thì lam sao hử bác
  Bài viết hay nhất16
@Zzbaivong em có ý tưởng lấy cái này làm pet. Ví như pet ở VNS , đến bài viết hay 1 points nào đó sẽ nâng cấp pet khác lên, (tiến hóa pet ấy)?
  Bài viết hay nhất17

doremon110 wrote:@Zzbaivong em có ý tưởng lấy cái này làm pet. Ví như pet ở VNS , đến bài viết hay 1 points nào đó sẽ nâng cấp pet khác lên, (tiến hóa  pet ấy)?

Làm Pet không khó, quan trọng là phải có hình ảnh của Pet. Nếu lấy tẹt từ VnS thì chả có ý nghĩa gì cả, còn bị vi phạm bản quyền và làm to chuyện. Nếu bạn muốn thì có thể tìm thuê một Designer làm Pet cho bạn rồi hẵng nghĩ đến cách này.
  Bài viết hay nhất18
tại sao êm làm từ a tới z mà nó hẻm chịu hiện vậy T_T: link demo: http://enlearners-family.forum.st/t179-topic acctest: acctest MK: Kelvin7414943
  Bài viết hay nhất19

Kelvin_Kingleon wrote:tại sao êm làm từ a tới z mà nó hẻm chịu hiện vậy T_T: link demo: http://enlearners-family.forum.st/t179-topic  acctest: acctest  MK: Kelvin7414943

Code này được thiết kế dựa trên viewtopic mặc định, nếu xài viewtopic đã tùy biến thì bạn phải chỉnh sửa lại selector cho phù hợp.
  Bài viết hay nhất20
@@ thôi vậy T_T em dốt về mấy khoảng đó lắm, gỡ ra luôn cho tiện, không biết làm mà mò lung tung chắc hư luôn quá, cảm ơn huynh K đã chỉ dẫn :3
  Bài viết hay nhất21
sao của em nó không hiển thị thị thế anh
Demo: http://arc-land.forumvi.com/t3-topic
  Bài viết hay nhất22

KTV2 wrote:sao của em nó không hiển thị thị thế anh
Demo: http://arc-land.forumvi.com/t3-topic

tự ý sửa chổ k cần sửa -_-

-thay lại mớ js đó bằng js này

Code:
$(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. Điểm thưởng tối thiểu là 20.",
                    icon: "http://blog.uhm.vn/emo/laluot/2.gif",
                    point: 20
                },
                    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. Điểm tưởng lớn hơn hoặc bằng số bài viết.",
                        icon: "http://blog.uhm.vn/emo/laluot/5.gif",
                        point: ">"
                    },
                    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. Được cảm ơn từ 10 lần trở lên.",
                        icon: "http://blog.uhm.vn/emo/laluot/20.gif",
                        thank: 10
                    },
                    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. Điểm tưởng lớn hơn hoặc bằng số bài viết. Được cảm ơn từ 99 lần trở lên.",
                        icon: "http://blog.uhm.vn/emo/laluot/10.gif",
                        point: ">",
                        thank: 99
                    },
                    x500: {
                        title: "Spamer",
                        desc: "Thành viên đăng 500 bài viết trở lên, nhưng điểm thưởng thấp hơn số bài viết.",
                        icon: "http://blog.uhm.vn/emo/laluot/24.gif",
                        point: "<"
                    }
                };

                function checkif(key, check, val, post) {
                    var cPost = data_rank[key][check];
                    if (($.type(cPost) === "number" && cPost <= val) || ($.type(cPost) === "string" && cPost === ">" && val >= post) || ($.type(cPost) === "string" && cPost === "<" && val < post)) {
                        return true
                    } else {
                        return false
                    }
                }

                function getNumber(t, txt) {
                    return parseInt($(t).closest(".post").find(".profile_field_mess:contains('" + txt + ":')").text().match(/\d+/)[0], 10)
                }
                $(".rank_mess").html(function() {
                    var all = "";
                    var post_mess = getNumber(this, "Bài gửi"),
                        point_mess = getNumber(this, "ARC Coins"),
                        thank_mess = getNumber(this, "Danh tiếng");
                    $.each(data_rank, function(key, val) {
                        var point = data_rank[key].point,
                            thank = data_rank[key].thank;
                        if (post_mess >= parseInt(key.match(/\d+/)[0], 10)) {
                            if ((point === undefined && thank === undefined) || (point !== undefined && thank === undefined && checkif(key, "point", point_mess, post_mess)) || (point === undefined && thank !== undefined && checkif(key, "thank", thank_mess, post_mess)) || (point !== undefined && checkif(key, "point", point_mess, post_mess) && thank !== undefined && checkif(key, "thank", thank_mess, post_mess))) {
                                all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>'
                            }
                        }
                    });
                    return all;
                })
            });
  Bài viết hay nhất23
Cảm ơn anh @anhoang_qn
  Bài viết hay nhất24
.post là gì vậy bác -_-
  Bài viết hay nhất25
là class="post" í
  Bài viết hay nhất26
You cannot reply to topics in this forum