Giới hạn số lượng từ.
Một đoạn văn bản dài, khi muốn giới hạn lại số lượng từ, và nội dung còn lại sẽ được thay thế bằng một liên kết Xem thêm, nội dung này sẽ được hiển thị khi ta click vào liên kết.
Giới hạn từ trong đoạn văn
Một đoạn văn bản dài, khi muốn giới hạn lại số lượng từ, và nội dung còn lại sẽ được thay thế bằng một liên kết Xem thêm, nội dung này sẽ được hiển thị khi ta click vào liên kết.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
//Số lượng từ giới hạn
var limitW = 120;
//Số ký tự của từ
var char = 4;
var txt = $('p').html();
var txtStart = txt.slice(0,limitW).replace(/\w+$/,'');
var txtEnd = txt.slice(txtStart.length);
if ( txtEnd.replace(/\s+$/,'').split(' ').length > char ) {
$('p').html([
txtStart,
'<a href="#" class="more">xem thêm...</a>',
'<span class="detail">',
txtEnd,
'</span>'
].join('')
);
}
$('span.detail').hide();
$('a.more').click(function() {
$(this).hide().next('span.detail').fadeIn();
return false;
});
});
</script>
</head>
<body>
<p>Đây là một đoạn văn dài, đoạn văn này được giới hạn số lượng từ bằng cách sử dụng các function trong jquery kết hợp với phân tích chuỗi, nếu số lượng từ nhiều hơn 120 thì những từ từ 121 trở đi sẽ được ẩn đi và được thay thế bằng link xem thêm..., khi click vào link này thì đoạn văn sẽ hiển thị toàn bộ.</p>
</body>
</html>
Hiển thị trình duyệt:
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
|
<p>Đây là một đoạn văn dài, đoạn văn này được giới hạn số lượng từ bằng cách sử dụng các function trong jquery kết hợp với phân tích chuỗi, nếu số lượng từ nhiều hơn 120 thì những từ từ 121 trở đi sẽ được ẩn đi và được thay thế bằng link xem thêm…, khi click vào link này thì đoạn văn sẽ hiển thị toàn bộ.</p> |
<p>Đây là một đoạn văn dài, đoạn văn này được giới hạn số lượng từ bằng cách sử dụng các function trong jquery kết hợp với <a class=”more” href=”#”>xem thêm…</a> |
Giới hạn từ thể hiện bằng function jQuery
Viết gọn lại đoạn code giới hàn từ bằng function, có thể dễ dàng config cho nhiều thành phần khác nhau
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$.fn.limit = function($n){
this.each(function(){
var allText = $(this).html();
var tLength = $(this).html().length;
var startText = allText.slice(0,$n);
if(tLength >= $n){
$(this).html(startText+'...');
}else {
$(this).html(startText);
};
});
return this;
}
$('.list li').limit(120);
});
</script>
</head>
<body>
<ul class='list'>
<li>Đây là một đoạn văn dài, đoạn văn này được giới hạn số lượng từ bằng cách sử dụng các function trong jquery kết hợp với phân tích chuỗi, nếu số lượng từ nhiều hơn 120 thì những từ từ 121 trở đi sẽ được ẩn đi và được thay thế bằng link.</li>
<li>Đây là một đoạn văn dài, đoạn văn này được giới hạn số lượng từ bằng cách sử dụng các function trong jquery kết hợp với phân tích chuỗi, nếu số lượng từ nhiều hơn 120 thì những từ từ 121 trở đi sẽ được ẩn đi và được thay thế bằng link. Nếu số lượng từ nhiều hơn 120 thì những từ từ 121 trở đi sẽ được ẩn đi và được thay thế bằng link.</li>
<li>Đây là một đoạn văn dài, đoạn văn này được giới hạn số lượng từ bằng cách sử dụng các function trong jquery kết hợp với phân tích chuỗi..</li>
</ul>
</body>
</html>