Đă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] zzRank - Thêm huân chương theo số bài viết

    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:24 

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


    zzRank sẽ tạo ra rank cho từng mức bài viết, kết hợp với điều kiện điểm thưởng và lượt cảm ơn.

    Chức năng

    Khi bạn sử dụng rank mặc định của forumotion sẽ chỉ có một huy hiệu cho mỗi cấp bậc. Với zzRank, bạn có thể tạo ra một bộ sưu tập huy hiệu cho từng cấp bậc, dựa trên số bài viết của thành viên đó. Ngoài ra, bạn cũng có thể bổ sung thêm các điều kiện về điểm thưởng, lượt cảm ơn để làm phong phú thêm bộ sưu tập rank.
    Các thông số cho từng mức rank 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 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://zzbaivong.forumvi.com/t21-tuts-zzrank-them-huan-chuong-theo-so-bai-viet?showpost=p82

    Nguồn

    Zzbaivong (devs.forumvi.com)
    Tags: #tutorial

    Quản trị viên

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #2

     24.08.15 21:14 

    zzRankv0.1

    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 .post

    Bướ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ú:

    1. 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.
    2. 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
    You cannot reply to topics in this forum