Связаться со мной можно через Вконтакте или почту evexa@mail.ru

3 способа скрыть текст с помощью Readmore

Наверняка вы не раз сталкивались с такой фигней когда много текста надо скрыть, но оставить возможность прочитать больше, я собрал 3 различных способа скрыть текст в readmore.

Способ №1

Простенький скрипт который помогает обрезать текст и автоматом прятать текст в спойлер, этот скрипт ни как не повредит на быстродействие сайта, поэтому юзайте не бойтесь. Устанавливается просто, без проблем.

Устанавливается он так:

1. После необходимо прописать:

HTML
1
<script type='text/javascript' src="/js/readmore.min.js"></script>
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
 $(function() { 
 $('#demo').readmore({ 
 moreLink: '<a href="#">Читать больше...</a>', 
 lessLink: '<a href="#">Не хочу больше читать</a>', 
 collapsedHeight: 432, 
 speed: 200, 
 afterToggle: function(trigger, element, expanded) { 
 if(! expanded) { // The "Close" link was clicked 
 $('html, body').animate({scrollTop: $(element).offset().top}, {duration: 100}); 
 } 
 } 
 }); 
 });

Скачать readmore.min.js

2. Участки с текстом оформляются вот так:

HTML
1
<section id="demo">Здесь любой ваш текст</section>

Способ №2

Абсолютно, такой же скрипт как и способ номер один, за исключением того, что он реализован не много по другому и имеет множество настроек.

jQuery

Простой вызов:

JS
1
$('article').readmore();

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

JS
1
2
3
4
$('article').readmore({
    speed: 75,
    maxHeight: 500
});

Опции:

speed: 100 (в миллисекундах)
maxHeight: 200 (в пикселях)
heightMargin: 16 (в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты — maxHeight)
moreLink:Подробнее
lessLink:Скрыть
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, для прокрутки к верхней части блока, когда нажата кнопка «Скрыть»:

JS
1
2
3
4
5
6
7
8
9
10
11
$('article').readmore({
    afterToggle: function(trigger, element, more) {
        if(! more) { // кнопка "Скрыть" была нажата
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
        }
    }
});

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

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

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

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

CSS

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

CSS
1
2
3
4
5
6
7
.readmore-js-toggle, .readmore-js-section {
    display: block;
    width: 100%;
}
.readmore-js-section {
    overflow: hidden;
}

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

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

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

JS
1
2
3
$('article').readmore({
    embedCSS: false
});

Способ №3

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

HTML
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">// <![CDATA[
function collapsElement(id) {
 if ( document.getElementById(id).style.display != "none" ) {
 document.getElementById(id).style.display = 'none';
 }
 else {
 document.getElementById(id).style.display = '';
 }
 }
// ]]></script>

и это:

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="readmore">
 
Текст
 
 
<p style="float:right; position: absolute; bottom: -10px; right:0px;"> 
<a href="javascript: collapsElement('read_more')" style="text-decoraton:none !important;">
 Читать подробнее</a> </p>
 
 
<div id="read_more" style="display: none;">
 
Подробный текст
 
</div>
 
</div>
Опубликовано: 04.09.2017
Категория: JavaScript
Комментарии отключены. Есть вопросы? Пишите в Вконтакте или почту evexa@mail.ru.
Всего комментариев: 0

Оставить комментарий

Наверх