Реализация Показать больше - показать меньше текста на странице - PullRequest
Новая
       19

Реализация Показать больше - показать меньше текста на странице

2 голосов
/ 21 июня 2011

У меня есть контент-ориентированный продукт.И в какой-то момент я отображаю список доступных сущностей с их полным резюме.Теперь упомянутое резюме - это данные, введенные пользователем с помощью редактора TinyMCE (то есть они могут содержать HTML-теги, такие как img, p, span, ul, li и т. Д.).Поскольку сводка может занимать несколько сотен строк, я хочу четко реализовать функцию Показать больше-меньше , используя javascript, где я загружаю сводку, частично скрытую по умолчанию, и показываю покой только при нажатии пользователем «Показать больше».'.

Было бы здорово узнать, как вы, ребята, это реализовали или реализовали бы.Я думаю ограничить разнообразие разметки, вводимой пользователем, и использовать regex , чтобы разделить разметку с помощью ссылки span для увеличения нагрузки (так же, как это делает Facebook).

Примечание : я не могу разбить текст по количеству символов / слов, так как это может нарушить разметку.Я не могу скрыть содержимое, ограничивая высоту из-за тегов img (которые загружаются позже и могут изменить высоту содержимого div и, в свою очередь, испортят ваши вычисления высоты).

Ответы [ 4 ]

3 голосов
/ 21 июня 2011

http://henrik.nyh.se/2008/02/jquery-html-truncate Очень аккуратная реализация этого парня. Вы также можете увидеть рабочую демонстрацию здесь http://henrik.nyh.se/examples/truncator/

2 голосов
/ 27 июня 2012

Лучший плагин jQuery, который я видел, который реализует эту функциональность, - Expander . Он также имеет преимущество в том, что он существует уже несколько лет, и до сих пор активно поддерживается в то время, когда он был написан, в отличие от большинства или всех других решений, связанных с ответами на этот вопрос.

2 голосов
/ 21 июня 2011

Я бы использовал следующую функцию, чтобы избавиться от нежелательных HTML-тегов. 

// Strips HTML and PHP tags from a string 
// returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>'
// example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>');
// returns 2: '<p>Kevin van Zonneveld</p>'
// example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>");
// returns 3: '<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>'
// example 4: strip_tags('1 < 5 5 > 1');
// returns 4: '1 < 5 5 > 1'
function strip_tags (str, allowed_tags)
{

    var key = '', allowed = false;
    var matches = [];    var allowed_array = [];
    var allowed_tag = '';
    var i = 0;
    var k = '';
    var html = ''; 
    var replacer = function (search, replace, str) {
        return str.split(search).join(replace);
    };
    // Build allowes tags associative array
    if (allowed_tags) {
        allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
    }
    str += '';

    // Match tags
    matches = str.match(/(<\/?[\S][^>]*>)/gi);
    // Go through all HTML tags
    for (key in matches) {
        if (isNaN(key)) {
                // IE7 Hack
            continue;
        }

        // Save HTML tag
        html = matches[key].toString();
        // Is tag not in allowed list? Remove from str!
        allowed = false;

        // Go through all allowed tags
        for (k in allowed_array) {            // Init
            allowed_tag = allowed_array[k];
            i = -1;

            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
            if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag)   ;}

            // Determine
            if (i == 0) {                allowed = true;
                break;
            }
        }
        if (!allowed) {
            str = replacer(html, "", str); // Custom replace. No regexing
        }
    }
    return str;
}

Использование, если содержимое является содержимым редактора. Это сохранит промежутки: 

var my_clean_content = strip_tags( content, 'span');
2 голосов
/ 21 июня 2011

Лично я бы сделал это с jQuery и использовал бы такой плагин, как Text Constrain .

Вы можете скачать его здесь или просмотреть другие подобные плагины на сайте jQuery .

...