[TUTS] ZZFAVOURITEBOX - TẠO CHUYÊN MỤC ƯA THÍCH

GIỚI THIỆU

DEMO

BƯỚC 1

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

Code:

<div class="main">

Code:

<div id="indexBox" class="main">

Code:

<!-- BEGIN switch_on_index -->

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

HƯỚNG DẪN TUỲ 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