[TUTs] Thu gọn bài viết dài

Thu gọn bài viết dài

Giới thiệu

Code sẽ tự động tìm và thu gọn các bài viết dài hơn 600px, cho phép bật/tắt dễ dàng.

Demo

Hướng dẫn

Bước 1

Thêm vào CSS

Code:

/* Thu gọn bài viết by devs.forumvi.com */
.baivietdai{overflow:hidden}
.thugon span:hover{cursor:pointer}
.thugon{background-color:#FAFFC7;border:3px double #9ED8FF;clear:both;margin:0;padding:2px 10px}
.viewfull{background:url(//ssl.gstatic.com/ui/v1/zippy/arrow_down.png) no-repeat scroll 3px 7px transparent;padding:0 15px}
.viewhide{background:url(//ssl.gstatic.com/ui/v1/icons/mail/arrow_up.png) no-repeat scroll 3px 7px transparent;padding:0 15px}
.fullOff{background:url(http://i48.servimg.com/u/f48/16/58/89/73/power_10.png) no-repeat scroll 0 2px transparent;margin-top:-2px;padding:2px 5px 2px 20px}
.fullOn{background:url(http://i48.servimg.com/u/f48/16/58/89/73/power_11.png) no-repeat scroll 0 2px transparent;margin-top:-2px;padding:2px 5px 2px 20px}

Bước 2

Tạo file javascript và đặt In the topics

Code:

/* Thu gọn bài viết by devs.forumvi.com */
$(function () {
   $(".postbody .post-entry").each(function () {
      600 <= $(this).height() && $(this).addClass("baivietdai").height(310).after('<p class="thugon"><span><span class="viewfull">Chi tiết</span><span class="viewhide" style="display:none">Thu gọn</span></span><span><span class="fullOff" style="float:right">Tắt thu gọn</span><span class="fullOn" style="float:right;display:none">Bật thu gọn</span></span></p>')
   });
   "100%" == my_getcookie("thugonbaiviet") && ($(".fullOn, .viewhide,.fullOff, .viewfull").toggle(), $(".baivietdai").height("100%"));
   $(".viewfull, .viewhide, .fullOff, .fullOn").click(function () {
      var c = "100%",
         a = $(this),
         b = a.attr("class");
      if ("viewhide" == b || "fullOn" == b) c = 310;
      "fullOff" == b || "fullOn" == b ? (my_setcookie("thugonbaiviet", c, !0), $(".fullOff, .fullOn").toggle()) : (a.closest(".thugon").prev().height(c), $(window).scrollTop(a.closest(".post").offset().top));
      a.hide().siblings().show()
   })
});

Nguồn

Zzbaivong (devs.forumvi.com)

Thím ân oán rip cái js của devs xong rồi nói code của méo là hàng sửa, thế đ** nào -_-
code của méo đang lỗi tùm lum kìa :v

NCat wrote:Thím ân oán rip cái js của devs xong rồi nói code của méo là hàng sửa, thế đ** nào -_-
code của méo đang lỗi tùm lum kìa :v

cái code này đâu phải cái devs đang dùng đâu :( , cái này hàng cũ rồi đem ra sửa tí rồi share á, còn cái của devs có đụng tới đâu mà biết :(
Méo xem lại code của Méo xem nó hỏng chổ nào, nếu hông sửa đc thì để tạm đó đi, ùi hôm khác fix mà :)

Không ngờ để sót bài này, đã cập nhật phiên bản mới >:(

Cái này đặt trong css ạ?

nghiahungdn2000 wrote:Cái này đặt trong css ạ?

code đầu là đặt trong css
code sau là đặt trong js để in the topic

có cách nào để giới hạn max-height là số dòng không nhỉ ? Ví dụ Height tối đa là 10 dòng, từ dòng 11 sẽ bị ẩn.

nhấp bật tắt nó ko mở ra vậy