Всем привет! =)
Наткнулся на интересную библиотеку: Readmore.js. Вот 2 главных параметра нее:
а) Скрывает большой текст (собственно, для чего эта библиотека и нужна)
б) Небольшой объем (ориентируясь на min версию)
Но есть и недостаток: Нет возможности настроить свои параметры для каждого блока в отдельности.
Короче, я исправил это недоразумение, но только для min версии (не особо люблю их, но нравится их объем).
Ссылка на актуальную версию обновленного плагина скрывающий большой текст (v.1.2)
Совместим с версиями jQuery выше 1.7.0
Простой вызов плагина:
$('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.
Вот пример использования функции 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 код на страницу:
.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
});