Đă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] zzfavouriteBox - Tạo chuyên mục ưa thích

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:27 

    zzfavouriteBox - Tạo chuyên mục ưa thích


    zzfavouriteBox sẽ tạo nhóm các chuyên mục ưa thích của bạn và đặt ở đầu diễn đàn để bạn dễ dàng truy cập vào lần sau.


    Giới thiệu

    Thông thường, trong diễn đàn có nhiều mục, mỗi thành viên có nhu cầu khác nhau nên chắc chắn sẽ có các mục ưa thích được sử dụng thường xuyên hơn và các mục không hoặc ít sử dụng.
    Để đáp ứng nhu cầu đó, một cách thông dụng là xắp xếp các chuyên mục có tỷ lệ xem cao hơn lên đầu, một số diễn đàn sẽ sử dụng chức năng ẩn/hiện chuyên mục hoặc cho phép thành viên xắp xếp lại thứ tự chuyên mục theo ý thích.
    Bài này mình sẽ hướng dẫn các bạn một cách khác, đó là tạo một nhóm chuyên mục ảo để chứa các mục ưa thích.


    Demo


    Ở trang chính, các chuyên mục ưa thích sẽ được nhóm vào một nhóm chuyên mục ảo và đưa lên đầu danh mục.


    Trong nhóm chuyên mục gốc, các mục ưa thích sẽ được đánh dấu nổi bật.


    Hướng dẫn


    Bước 1

    CSS
    ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

    Code:
    /* zzfavouriteBox by baivong - http://www.devs.cf/ */
    #indexBox .zzheart{display:inline-block;background:url(//i56.servimg.com/u/f56/18/59/49/93/heart10.png) no-repeat;background-position:0 0;width:16px;height:16px;cursor:pointer;margin-left:5px;opacity:.5;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease}
    #indexBox .zzlove{background-position:0 -16px}
    #indexBox .zzheart:hover{opacity:1}

    Bước 2

    Template index_box:
    ACP >> Display >> QLTT >> index_box

    Tìm:
    Code:
    <div class="main">
    Thay bằng:
    Code:
    <div id="indexBox" class="main">

    Tìm:
    Code:
    <!-- BEGIN switch_on_index -->

    Thêm vào trước nó:
    Code:
    <!-- zzfavouriteBox by baivong - http://www.devs.cf/ -->
    <script type="text/javascript">
    //<![CDATA[
    var zzfavourite = {
       wrapAll: "#indexBox",
       title: "#indexBox .forumtitle",
       item: "tr",
       wrapItem: ".statused",
       boxContent: ".main-content",
       favouriteCal: '<div class="main-head favouriteBox"><div class="page-title"><h2>Ưa thích</h2></div></div><div class="main-content favouriteBox"><table cellspacing="0" class="table"><thead><tr><th class="tcl">Forum</th><th class="tc2">Topics</th><th class="tc3">Posts</th><th class="tcr">Last Posts</th></tr></thead><tbody id="favourites" class="statused"></tbody></table></div>',
       pageIndex: "",
       favouriteBox: function () {
          $("#favourites").length || $(zzfavourite.wrapAll).prepend(zzfavourite.favouriteCal)
       },
       start: function () {
          if ("/" == location.pathname || "/forum" == location.pathname) zzfavourite.pageIndex = !0;
          $(zzfavourite.title).after('<div class="zzheart"></div>');
          $(zzfavourite.wrapAll).on("click", ".zzheart", function () {
             var t = $(this);
             if (t.hasClass("zzlove")) {
                var c = t.prev().attr("href"),
                   a = RegExp("\\b" + c.match(/\/f(\d+)-.*/)[1] + "\\b\\s?");
                my_setcookie("favouriteBox", my_getcookie("favouriteBox").replace(a, ""), !0);
                t.removeClass("zzlove");
                if (zzfavourite.pageIndex) {
                   var d = t.closest(zzfavourite.item),
                      b = $(zzfavourite.title + "[href='" + c + "']:last").closest(zzfavourite.item);
                   d.fadeOut(300, function () {
                      b.closest(zzfavourite.boxContent).is(":hidden") && b.closest(zzfavourite.boxContent).fadeIn().prev().fadeIn();
                      b.find(".zzheart").removeClass("zzlove").end().fadeIn(300);
                      d.remove();
                      $("#favourites " + zzfavourite.item).length || $(".favouriteBox").remove()
                   })
                }
             } else if (c = t.prev().attr("href").match(/\/f(\d+)-.*/)[1], t.addClass("zzlove"),
                a = my_getcookie("favouriteBox"), null == a || "" == a ? my_setcookie("favouriteBox", c, !0) : RegExp("\\b" + c + "\\b\\s?").test(a) || my_setcookie("favouriteBox", a + " " + c, !0), zzfavourite.pageIndex) {
                zzfavourite.favouriteBox();
                var e = t.closest(zzfavourite.item);
                e.fadeOut(300, function () {
                   e.clone().appendTo("#favourites").fadeIn(300);
                   0 == t.closest(zzfavourite.wrapItem).height() && t.closest(zzfavourite.boxContent).hide().prev().hide()
                })
             }
          });
          var b = my_getcookie("favouriteBox");
          null != b && "" != b && ($.each($.trim(b).split(" "), function (c, a) {
             var d = $(zzfavourite.title + "[href^='/f" + a + "-']");
             d.next().addClass("zzlove");
             zzfavourite.pageIndex && (zzfavourite.favouriteBox(), d.closest(zzfavourite.item).hide().clone().appendTo("#favourites").show(), 0 == d.closest(zzfavourite.wrapItem).height() && d.closest(zzfavourite.boxContent).hide().prev().hide())
          }), $("#favourites").is(":empty") && $(".favouriteBox").remove())
       }
    };
    zzfavourite.start();
    //]]>
    </script>

    Bước 3

    Cấu hình
    ACP >> Display >> Homepage >> Structure and hierarchy >> Index packing
    Split categories on index: Medium


    Hướng dẫn tùy chỉnh

    Nếu bạn đã đã sửa cấu trúc index_box, sẽ có thể sẽ bị lỗi khi sử dụng code trên. Trong trường hợp đó, bạn cần sửa lại các tham số cho phù hợp. Tham khảo sơ đồ sau:



    Trong đó:

    wrapAll: khung bao toàn bộ các nhóm chuyên mục.
    boxHead: tiêu đề mỗi nhóm chuyên mục. Không có tham số cho boxHead, phải đặt nó ở ngay trước boxContent.
    boxContent: khung mỗi nhóm chuyên mục.
    wrapItem: khung bao các mục (diễn đàn con). wrapItemboxContent có thể trùng nhau.
    item: mỗi mục (diễn đàn con).
    title: tiêu đề mỗi mục (diễn đàn con).
    favouriteCal: Đây là cấu trúc một nhóm chuyên mục rỗng, tức là không có item, dùng để tạo khung cho nhóm chuyên mục ảo. Trong đó boxHeadboxContent được thêm class favouriteBox, wrapItem thêm id favourites.

    Lưu ý: Đặt các thông số tùy chỉnh trước khi chạy hàm start(). Ví dụ:
    Code:
    zzfavourite.boxContent = ".box";
    zzfavourite.item = "li";
    zzfavourite.start();


    Nguồn

    Zzbaivong (devs.forumvi.com)
    Tags: #tutorial
    You cannot reply to topics in this forum