28 850 Скрипты / Text

Readmore.js - плагин скрывающий большой текст

Плагин позволяющий скрывать часть текста, если он превышает заданную длину. Добавляется ссылка, как правило в виде кнопки "Подробнее" - по клику отображается скрытый текст.

Совместим с версиями jQuery выше 1.7.0

JS

Простой вызов плагина:

$('article').readmore();

Можно вызвать с дополнительными опциями:

$('article').readmore({
    speed: 75,
    maxHeight: 500
});

Опции

  • speed: 100 (в миллисекундах)
  • maxHeight: 200 (в пикселях)
  • heightMargin: 16 (в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты - maxHeight)
  • moreLink: '<a href="#">Подробнее</a>'
  • lessLink: '<a href="#">Скрыть</a>'
  • embedCSS: true (вставляет динамический CSS стили, установите false, если все стили вы будете подключаать сами в своём файле стилей)
  • sectionCSS: 'display: block; width: 100%;' (устанавливает стиль блоков)
  • startOpen: false (по дефолту блок скрыт, при параметре true - текст будет показан полностью, но с возможностью скрыть)
  • expandedClass: 'readmore-js-expanded' (класс добавляемый к развернутому блоку)
  • collapsedClass: 'readmore-js-collapsed' (класс добавляемый к свернутому блоку)
  • beforeToggle: function() {} ( функция вызываемая после нажатия на кнопку "Подробнее" или "Скрыть", но до того, как блок свернется или развернется)
  • afterToggle: function() {} ( функция вызываемая после того, как блок развернется или свернется)

Если у элемента задана максимальная высота в CSS стилях, то плагин будет использовать именно это значение, а не значение опции maxHeight

Обратный вызов:

Функции обратного вызова, beforeToggle() и afterToggle() получают те же самые аргументы: trigger, element и more.

  • trigger: кнопки "Подробнее" или "Скрыть"
  • element: блок, который в настоящее время сворачивается или разворачивается
  • more: boolean, true - означает, что блок разворачивается

Пример обратного вызова.
Вот пример использования функции afterToggle, для прокрутки к верхней части блока, когда нажата кнопка "Скрыть":

$('article').readmore({
    afterToggle: function(trigger, element, more) {
        if(! more) { // кнопка "Скрыть" была нажата
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
        }
    }
});

Отключить функционал плагина можно так:

$('article').readmore('destroy');

Или же вы можете указать элемент, на котором плагин не должен работать:

$('article:first').readmore('destroy');

CSS

По умолчанию плагин вставляет следующий CSS код на страницу:

.readmore-js-toggle, .readmore-js-section {
    display: block;
    width: 100%;
}
.readmore-js-section {
    overflow: hidden;
}

С помощью опции плагина можно изменить первое правило:

$('article').readmore({
    sectionCSS: 'display: inline-block; width: 50%;'
});

Если вы хотите использовать свой файл стилей, то в настройках плагина укажите false:

$('article').readmore({
    embedCSS: false
});
Скачать 6829Загрузок 5,73 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи