От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с простым, но вместе с тем весьма полезным плагином Readmore.js, который позволяет скрыть часть текста под кнопкой читать далее. Плагин jQuery читать далее также реализует эффект, известный как jQuery спойлер.
Итак плагин jQuery читать далее, с которым мы сегодня поработаем, позволяет скрывать часть текста за кнопкой читать далее, проще говоря, реализуется эффект jQuery спойлер. Весьма полезная функция, особенно для новостных сайтов и блогов, где много информации и часто не хватает места на странице. В этих случаях прибегают к сокрытию, к примеру, полного текста новости за спойлером, иначе говоря, под кнопкой читать далее.
Перейдем на сайт плагина readmore.js и скачаем его. Там же мы можем познакомиться и с документацией к плагину jQuery спойлер. Теперь подключим единственный файл плагина и, само собой, библиотеку jQuery.
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/readmore.js"></script> |
Далее нам потребуется относительно длинный фрагмент текста, я добавлю пару статей.
|
1 2 3 4 5 6 |
<article> <h2>Статья 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore necessitatibus quas aspernatur vero fugit nulla suscipit sed consequuntur qui architecto, assumenda, cumque iure doloribus accusamus adipisci tempore distinctio hic temporibus.</p> ... </article> ... |
Ну и осталось лишь инициализировать сам плагин jQuery читать далее, вызвав метод readmore():
|
1 2 3 |
$(function(){ $('article').readmore(); }); |
Отлично, плагин работает! Осталось лишь настроить его по своему вкусу, передав необходимые опции в плагин. Например, я хочу стилизовать ссылку под кнопку, поменять текст ссылки, изменить скорость анимации при открытии полного текста, а также изменить высоту короткой части статьи. Все это позволяют сделать следующие опции:
|
1 2 3 4 5 6 7 8 |
$(function(){ $('article').readmore({ speed: 500, lessLink: '<p class="more"><a href="#" class="btn btn-default">Свернуть</a></p>', moreLink: '<p class="more"><a href="#" class="btn btn-default">Читать далее</a></p>', collapsedHeight: 150, }); }); |
Как видим, ничего сложного — все просто. Думаю, плагин jQuery читать далее будет вам полезен. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
