Русский
Українська
English
Вітаю Вас на сторінках нашого сайту. У сьогоднішній статті ми будемо говорити про можливість згортати (приховувати) текст на сайті, а при кліці по посиланню показувати повний текст.
Дуже часто для економії місця на сайті, або ж просто для більш презентабельного вигляду, потрібно показати користувачеві тільки частину тексту, тобто згорнути розгорнути текст. Особливо часто я це застосовую при розробці інтернет магазину в категоріях, тобто, якщо Вам потрібно в описі категорії згорнути великий текст і розгорнути його при кліці, показати повний опис, то дана стаття саме те що вам потрібно.
Після прочитання цієї статті ви вже будете знати як приховати частину тексту на сайті а якщо клікнути на посилання показати повний текст. Думаю ви також стикалися з проблемою коли дуже багато тексту треба приховати але в той же час дати користувачеві можливість прочитати більше, дана стаття допоможе вам зрозуміти головний принцип як приховати текст в readmore.
Скрипт який приховує великий текст, дуже корисна функція а іноді навіть необхідна для сайту, тому ми сьогодні і будемо розглядати варіант створення скрипта який буде згортати текст якщо він перевищує задану в настройках висоту. Тобто якщо ваш текст буде мати висоту блоку більше ніж ви задасте в настройках то буде з'являтися посилання при кліці на яке буде розгортатися повний текст опису, в разі якщо ж ваш текст не досягне заданої в налаштуваннях висоти дане посилання з'являтися не буде.
І так, сам скрипт "прихований текст під спойлером" і приклад його роботи ви зможете завантажити і подивитися внизу під цією статтею, а в самій статті ми розглянемо деякі з його функцій і налаштувань.
Функція самого простого виклику скрипта виглядає так:
|
1
|
$('article').readmore();
|
Для виклику скрипта згорнути розгорнути текст з його додатковими настройками робимо приблизно так:
|
1
2
3
4
|
$('article').readmore({
speed: 75,
maxHeight: 500
});
|
Даний скрипт має додаткові налаштування які можна до нього застосувати, розглянемо їх:
speed: 100 (швидкість розгортання тексту вказується в мілісекундах)
maxHeight: 200 (Максимальна висота блоку вказується в пікселях)
heightMargin: 16 (вказуємо в пікселях, дозволяє уникнути ламання блоків, якщо вони лише не набагато більше висоти - maxHeight)
moreLink: '<a href="#">Розгорнути текст</a>'
lessLink: '<a href="#">Згорнути текст</a>'
embedCSS: true (дозволяє додавати динамічні CSS стилі, якщо стилі ви підключаєте самі в своєму файлі стилів, встановіть значення false)
sectionCSS: 'display: block; width: 100%;' (дане значення встановлює стиль блоків)
startOpen: false (за замовчуванням блок прихований, якщо значення true - текст буде відразу розгорнутим, але буде можливість його приховати)
expandedClass: 'readmore-js-expanded' (клас css який додається до розгорнутого блоку.)
collapsedClass: 'readmore-js-collapsed' (клас css який додається до згорнутого блоку)
beforeToggle: function() {} ( функція яка викликається після натискання на кнопку "Розгорнути текст" або "Згорнути текст", але до того, як блок згорнеться або розгорнеться.)
afterToggle: function() {} ( функція яка викликається після того, як блок розгорнеться або згорнеться.)
Якщо у елемента вказана максимальна висота в стилях css, в даному випадку будуть застосовуватися саме вони, значення maxHeight буде проігноровано.
Функція зворотного виклику:
Функції зворотного виклику скрипта, beforeToggle() и afterToggle() мають ті ж аргументи: trigger, element и more.
- trigger: кнопки “Розгорнути текст” або “Згорнути текст”
- element: блок, який в даний момент згортається або розгортається.
- more: boolean, true – означає, що блок розгортається.
Приклад функції зворотного виклику:
|
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
});
}
}
});
|
Відключення деякого функціоналу даного скрипта використовується приблизно так:
|
1
|
$('article').readmore('destroy');
|
Або вкажіть потрібний вам елемент з яким скрипт не повинен працювати.
|
1
|
$('article:first').readmore('destroy');
|
Даний скрипт за замовчуванням додає свої стилі css на сторінку:
|
1
2
3
4
5
6
7
|
.readmore-js-toggle, .readmore-js-section {
display: block;
width: 100%;
}
.readmore-js-section {
overflow: hidden;
}
|
За допомогою налаштувань скрипта перше правило можна змінити:
|
1
2
3
|
$('article').readmore({
sectionCSS: 'display: inline-block; width: 50%;'
});
|
Для того щоб використовувати свої стилі у файлі css в налаштуваннях вам потрібно вказати значення false:
|
1
2
3
|
$('article').readmore({
embedCSS: false
});
|
Подивитися живий приклад або завантажити скрипт, ви можете у нас на сайті:
Також ви можете скачати готовий код нижче.
Немає коментарів
Ви можете залишити коментар першим.