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

  Bài viết hay nhất1

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


Bài viết bình thường


Bài viết đã thu gọn


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)
  Bài viết hay nhất2
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
  Bài viết hay nhất3
@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à :)
  Bài viết hay nhất4
Không ngờ để sót bài này, đã cập nhật phiên bản mới >:(
  Bài viết hay nhất5
Cái này đặt trong css ạ?
  Bài viết hay nhất6
@nghiahungdn2000 wrote:Cái này đặt trong css ạ?
code đầu là đặt trong css
code sau là đặt trong js để in the topic
  Bài viết hay nhất7
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.
  Bài viết hay nhất8
nhấp bật tắt nó ko mở ra vậy
  Bài viết hay nhất9
You cannot reply to topics in this forum