Заказать звонок
Логин
Пароль

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

24.08.2019

Всем привет! =)

Наткнулся на интересную библиотеку: Readmore.js. Вот 2 главных параметра нее:
а) Скрывает большой текст (собственно, для чего эта библиотека и нужна)
б) Небольшой объем (ориентируясь на min версию)

Но есть и недостаток: Нет возможности настроить свои параметры для каждого блока в отдельности.

Короче, я исправил это недоразумение, но только для min версии (не особо люблю их, но нравится их объем).


Ссылка на актуальную версию обновленного плагина скрывающий большой текст (v.1.2)

Скачать Readmore.js

Инструкция по настройке Readmore.js (уже есть на некоторых сайтах, но здесь с моими дополнениями):

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

jQuery

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

$('article').readmore();

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

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

Опции:

speed: 100 //в миллисекундах
collapsedHeight: 200 //в пикселях, можно задать, как атрибут непосредственно на самом блоке
heightMargin: 16 //в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты - collapsedHeight
moreLink: 'Подробнее' //текст можно задать, как атрибут непосредственно на самом блоке
lessLink: 'Скрыть' //текст можно задать, как атрибут непосредственно на самом блоке
embedCSS: true //вставляет динамический CSS стили, установите false, если все стили вы будете подключаать сами в своём файле стилей
blockCSS: 'display: block; width: 100%;' //устанавливает стиль блоков
startOpen: false //по дефолту блок скрыт, при параметре true - текст будет показан полностью, но с возможностью скрыть
blockProcessed: function() {} //функция вызываемая во время инициализации плагина для каждого блока
afterToggle: function() {} //функция вызываемая после того, как блок развернется или свернется
beforeToggle: function() {} //функция вызываемая после нажатия на кнопку "Подробнее" или "Скрыть", но до того, как блок свернется или развернется

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

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

Функции обратного вызова, 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({
    blockCSS: 'display: inline-block; width: 50%;'
});

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

$('article').readmore({
embedCSS: false
});