Від автора: і знову здрастуйте. Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з простим, але разом з тим дуже корисним плагіном Readmore.js, який дозволяє приховати частину тексту під кнопкою читати далі. Плагін jQuery читати далі також реалізує ефект, відомий як jQuery спойлер.
Отже плагін jQuery читати далі, з яким ми сьогодні попрацюємо, дозволяє приховувати частину тексту кнопкою читати далі, простіше кажучи, реалізується ефект jQuery спойлер. Досить корисна функція, особливо для новинних сайтів і блогів, де багато інформації і часто не вистачає місця на сторінці. У цих випадках вдаються до приховування, наприклад, повного тексту новини за спойлером, інакше кажучи, під кнопкою читати далі.
Перейдемо на сайт плагіна readmore.js і завантажити його. Там же ми можемо познайомитися і з документацією до плагіну jQuery спойлер. Тепер підключимо єдиний файл плагіна і, само собою, бібліотеку jQuery.
Далі нам буде потрібно відносно довгий фрагмент тексту, я додам пару статей.
Стаття 1
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.
…
…
Ну і залишилося лише ініціалізувати сам плагін jQuery читати далі, викликавши метод readmore():
$(function(){
$(‘article’).readmore();
});
Відмінно, плагін працює! Залишилося лише налаштувати його за своїм смаком, передавши необхідні опції в плагін. Наприклад, я хочу стилізувати посилання під кнопку, поміняти текст посилання, змінити швидкість анімації при відкритті повного тексту, а також змінити висоту короткій частині статті. Все це дозволяють зробити наступні опції:
$(function(){
$(‘article’).readmore({
speed: 500,
lessLink: ‘
Згорнути
‘,
moreLink: ‘
Читати далі
‘,
collapsedHeight: 150,
});
});
Як бачимо, нічого складного — все просто. Думаю, плагін jQuery читати далі буде вам корисний. На цьому у мене все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!
