Giới hạn số lượng từ.

Trở về

  • 1 241

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="http://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>
<span class="detail" style="display: none;">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ộ.</span>
</p>

Download file để thực hành

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="http://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>

Hiển thị trình duyệt:

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *