代码之家  ›  专栏  ›  技术社区  ›  Lasse Espeholt

具有max lines属性的jQuery扩展器

  •  0
  • Lasse Espeholt  · 技术社区  · 15 年前

    jQuery Expander plugin 很好,但不能满足我的需要。它剪切文本并在文本后放置一个“阅读更多”按钮,从而展开文本。但它仅在文本长度超过指定值时才进行剪切。但如果文本是:

    Some text:
    
    
    
    
    Blah blah
    

    1 回复  |  直到 15 年前
        1
  •  3
  •   Lasse Espeholt    15 年前

    $(document).ready(function () {
        var maxlines = 12;
        var lineheight = 15; // line height in 'px'
        var maxheight = (maxlines * lineheight);
        var allowedExtraLines = 3;
        var showText = "Læs mere...";
        var hideText = "Skjul tekst...";
    
        $('.Truncate').each(function () {
            var text = $(this);
            if (text.height() > maxheight + allowedExtraLines * lineheight) {
                text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });
    
                var link = $('<a href="#">' + showText + '</a>');
                link.click(function (event) {
                    event.preventDefault();
    
                    if (text.css('height') == 'auto') {
                        $(this).html(showText);
                        text.css('height', maxheight + 'px');
                    } else {
                        //$(this).remove();
                        $(this).html(hideText);
                        text.css('height', 'auto');
                    }
                });
    
                var linkDiv = $('<div></div>');
                linkDiv.append(link);
    
                $(this).after(linkDiv);
            }
        });
    });