free web
free web
free web
Home » Files » Thủ thuật web » 11.Dec.2017, 8:01 PM

Code tự động rút gọn đoạn văn bản bằng jQuery
Hẳn là các bạn đã từng xem nhiều trang web có chức năng là khi đoạn văn bản quá dài, sẽ xuất hiện dòng chữ đại loại như ” xem thêm ” hoặc ” more ” , và khi nhấp vào những dòng chữ này, những nội dung còn thiếu sẽ hiển thị đầy đủ. Để có thể dễ hiểu, các bạn có thể xem demo bài viết.

Code tự động rút gọn đoạn văn bản b
Demo - Link download

Bước 1 : HTML Markup Chúng ta sẽ cần có bộ khung minh họa cần rút ngắn lại như sau :
Copy
 
<div class="comment">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec.
Duis nisl nibh, egestas at fermentum at, viverra et purus.
Maecenas lobortis odio id sapien facilisis elementum.
Curabitur et magna justo, et gravida augue.
Sed tristique pellentesque arcu quis tempor.
</div>

Bước 2 : CSS
Chúng ta sẽ cần định dạng một vài đoạn css cơ bản như sau :
Copy
 
a {
color: #0254EB
}
a:visited {
color: #0254EB
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
padding:10px;
}

Bước 3 : Chèn jQuery
Đầu tiên các bạn cần download jQuery Shorten Plugin này về máy của mình. Sau khi tải về, các bạn chèn vô web như sau:
Copy
 
<script type="text/javascript" src="http://ifox.tk/track-bs/rut-gon-baiviet/jquery-latest.js"></script>
<script type="text/javascript" src="http://ifox.tk/track-bs/rut-gon-baiviet/jquery.shorten.1.0.js"></script>

Sau khi chèn xong, để tạo tính năng rút ngắn này, chúng ta cần khai báo một đoạn jQuery như sau:
Copy
 
<script type="text/javascript">
 $(".comment").shorten({
 "showChars" : 200,
 "moreText" : "Xem thêm",
 "lessText" : "Rút gọn",
});
</script>

Các bạn có thể thay thế các tham số sao cho phù hợp với mình, với showChars là số kí tự bạn muốn hiển thị, moreText và lessText là những dòng chữ sẽ hiển thị tương ứng với các giá trị mà mình đã đặt.
Lưu ý: Nếu code không chạy thì có thể đã bị xung đột java, cách khắc phục là bạn hãy xóa link java jquery-latest.js đi nhé.
Mình hy vọng với bài viết ngắn ngủi này, sẽ giúp các bạn có thêm kinh nghiệm và học hỏi thêm một chút ít về jQuery.
Chúc các bạn thành công !
Bài viết của webmaster

Từ Khóa: Học jquery, jQuery, shortened Text, code rut gon bai viet, rut gon text bang jQuery, huong dan rut gon bai viet bang jQuery, lam sao rut gon chu trong bai viet, cach rut gon bai viet tren web.


Lưu Ý:
  • Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
  • Các bài viết trên iFox chỉ mang tính chất chia sẻ thông tin tham khảo, các bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virut.
  • Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của iFox.
  • Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các bài viết vi phạm.
  • iFox Media luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
  • Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
  • Cảm ơn bạn đã quan tâm và ủng hộ iFox Media, chúc bạn một ngày làm việc hiệu quả!
Category: Thủ thuật web | Added by: Hoang_CLB | Tags: Học jquery, jQuery, Shortened Text, Code web
Số tin nhắn: 0
avatar