0

jQuery Expander プラグインは素晴らしいと思いますが、私のニーズを満たすことはできません。テキストを切り取り、テキストを展開するテキストの後に「続きを読む」ボタンを配置します。ただし、テキストの長さが指定された値を超える場合にのみカットされます。しかし、テキストが次の場合はどうでしょう。

Some text:




Blah blah

テキストは多くの文字を含むテキストと同じくらい多くのスペースを使用しますが、Expander はそれを切り取ることはありません。テキストの長さと最大行数の両方を制限できるように、最大​​行数プロパティが必要です。プラグインの提案はありますか?

4

1 に答える 1

3

fudgey のリンクから部分的に取得したこの jQuery を作成しました。残念ながら、div の高さと .height() を比較する必要があるため、em ではなく px を使用します。関数にする方がきれいかもしれませんが、機能します:)

$(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);
        }
    });
});
于 2009-11-23T18:53:38.557 に答える