Топ плагінів jQuery. Плагін jQuery читати далі для роботи з текстом

18

Від автора: і знову здрастуйте. Дозвольте представити вам черговий плагін з розряду 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. Плагін jQuery читати далі для роботи з текстом

Ну і залишилося лише ініціалізувати сам плагін jQuery читати далі, викликавши метод readmore():

$(function(){
$(‘article’).readmore();
});

Топ плагінів jQuery. Плагін jQuery читати далі для роботи з текстом

Відмінно, плагін працює! Залишилося лише налаштувати його за своїм смаком, передавши необхідні опції в плагін. Наприклад, я хочу стилізувати посилання під кнопку, поміняти текст посилання, змінити швидкість анімації при відкритті повного тексту, а також змінити висоту короткій частині статті. Все це дозволяють зробити наступні опції:

$(function(){
$(‘article’).readmore({
speed: 500,
lessLink: ‘

Згорнути

‘,
moreLink: ‘

Читати далі

‘,
collapsedHeight: 150,
});
});

Топ плагінів jQuery. Плагін jQuery читати далі для роботи з текстом

Як бачимо, нічого складного — все просто. Думаю, плагін jQuery читати далі буде вам корисний. На цьому у мене все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!