Инициализация
Плагин Readmore.js позволяет создавать функциональность «Читать далее» для любых элементов с текстовым содержимым, таких как <div>
, <p>
, <section>
или <article>
. Скрипт обрезает содержимое до заданной высоты и добавляет кнопку для разворачивания/сворачивания текста.
Для инициализации используйте CSS-селектор, например, класс .readmore
, который нужно добавить к целевым элементам. Убедитесь, что элемент содержит достаточно контента, чтобы его высота превышала параметр collapsedHeight
, иначе кнопка не появится.
<div class="readmore">
<!-- Ваш текстовый контент, например, несколько абзацев -->
<p>Это пример длинного текста, который будет частично скрыт...</p>
<p>Дополнительный контент, который появится после нажатия "Читать далее".</p>
</div>
Важно
Если содержимое элемента короче значения collapsedHeight
или состоит только из пробелов либо пустых тегов, плагин автоматически отключит функциональность для этого элемента. Для корректной работы рекомендуется проверять высоту содержимого перед инициализацией.
Совет
Добавляйте уникальные классы или идентификаторы к элементам, если планируете применять разные настройки к отдельным блокам на одной странице.
Инициализация без параметров
Для быстрого запуска Readmore.js можно вызвать функцию initReadMore
с селектором, используя настройки по умолчанию. В этом случае плагин применит стандартные значения: высота 250 пикселей, анимация длительностью 300 мс, текст кнопок <span>Read More</span>
и <span>Close</span>
.
document.addEventListener('DOMContentLoaded', function () {
initReadMore('.readmore');
});
Примечание
Этот способ подходит для базового использования, но для адаптации к дизайну или поведению на разных устройствах рекомендуется указывать собственные параметры.
Инициализация с параметрами
Для гибкой настройки Readmore.js передайте объект с параметрами вторым аргументом функции initReadMore
. Это позволяет изменять высоту, скорость анимации, текст кнопок и так далее. Такой способ работает одинаково на всех устройствах без ограничений по ширине экрана.
document.addEventListener('DOMContentLoaded', function () {
initReadMore('.readmore', {
collapsedHeight: 200, // Высота свернутого блока в пикселях
speed: 400, // Длительность анимации в миллисекундах
moreLink: '<span>Читать далее</span>', // Текст кнопки разворачивания
lessLink: '<span>Свернуть</span>' // Текст кнопки сворачивания
});
});
Преимущество
Вы можете добавить собственные классы или стили к moreLink
и lessLink
, например: <span class="btn btn-primary">Читать далее</span>
, чтобы они соответствовали дизайну вашего сайта.
Инициализация с адаптивными настройками
Для адаптации поведения плагина под разные размеры экрана используйте параметр breakpoints
. Он позволяет задавать разные значения collapsedHeight
, speed
или текст кнопок в зависимости от ширины окна браузера. Ключи объекта breakpoints
— это максимальная ширина экрана в пикселях.
document.addEventListener('DOMContentLoaded', function () {
initReadMore('.readmore', {
collapsedHeight: 200,
speed: 400,
moreLink: '<span>Читать далее</span>',
lessLink: '<span>Свернуть</span>',
breakpoints: {
576: { // Для экранов до 576 пикселей
collapsedHeight: 100,
speed: 200,
moreLink: '<span>Подробнее</span>',
lessLink: '<span>Скрыть</span>'
},
768: { // Для экранов до 768 пикселей
collapsedHeight: 150,
speed: 300
},
1024: { // Для экранов до 1024 пикселей
disableCollapse: true // Отключить функциональность
}
}
});
});
Важно
Если ширина экрана превышает самую большую точку останова (например, 1024 пикселя в примере выше), плагин не будет применяться, если не указано disableCollapse: false
. Для больших экранов задавайте глобальные параметры или дополнительные точки останова.
Совет
Используйте параметр disableCollapse
в breakpoints
, чтобы отключить плагин на определённых устройствах, например, на десктопах, где весь контент должен быть видимым.