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

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). wrapItem và boxContent 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 đó boxHead và boxContent đượ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