Hướng dẫn tạo nút hiệu ứng thu gọn - mở rộng với jquery readmore

Thảo luận trong 'Software' bắt đầu bởi Admin, 8 Tháng ba 2017.

  1. Admin Nothing to lose.. your love to win.. Chuyển tiền

    Bài viết:
    Tìm chủ đề
    4,974
    Jquery Readmore.js là plugin javascript giúp tạo hiệu ứng, nút bấm thu gọn, mở rộng khi cần trình bày đoạn văn bản quá dài.

    Download: Readmore.js - Link trang chủ

    Demo: Hài Tết

    Các bạn bấm vào 1 video bất kỳ và xem ở phần chú thích.

    Hiển thị thêm

    [​IMG]

    Hiển thị bớt

    [​IMG]

    Hướng dẫn:

    Tải về file readmore.js ở trên và up lên host.

    Chèn đoạn code sau vào nơi hiển thị nội dung bạn cần thu gọn.

    Mã:
    <script type="text/javascript" src="clients/js/jquery.readmore.js"></script>
    <script type="text/javascript">
    $('article').readmore({
      speed: 75,
      moreLink: '<a href="#">HIỂN THỊ THÊM</a>',
      lessLink: '<a href="#">HIỂN THỊ BỚT</a>',
      collapsedHeight: 40,
      heightMargin:1,
    });
    </script>
    Với article là biến chứa nội dung cần thu gọn, bạn có thể tùy biến tùy theo code của bạn.

    Lưu ý biến này trong code của bạn phải là duy nhất không được trùng, có thể lấy theo id đỡ trùng.

    Ở đây đoạn code chứa nội dung trong ví dụ là:

    Mã:
    <article>Nội dung cần thu gọn / mở rộng</article>
    Lưu ý:

    Plugin này hoạt động dựa trên jQuery nên các bạn cần thêm thư viện jQuery vào code nếu chưa có.

    VPS tốt nhất dành cho webmaster: Vultr hoặc DigitalOcean
     
    Muối thích bài này.
    Chỉnh sửa cuối: 4 Tháng ba 2018
  2. Đang tải...
Trả lời qua Facebook
Đang tải...