Вітаю Вас на сторінках нашого сайту. У сьогоднішній статті ми будемо говорити про можливість згортати (приховувати) текст на сайті, а при кліці по посиланню показувати повний текст.
Дуже часто для економії місця на сайті, або ж просто для більш презентабельного вигляду, потрібно показати користувачеві тільки частину тексту, тобто згорнути розгорнути текст. Особливо часто я це застосовую при розробці інтернет магазину в категоріях, тобто, якщо Вам потрібно в описі категорії згорнути великий текст і розгорнути його при кліці, показати повний опис, то дана стаття саме те що вам потрібно.
Після прочитання цієї статті ви вже будете знати як приховати частину тексту на сайті а якщо клікнути на посилання показати повний текст. Думаю ви також стикалися з проблемою коли дуже багато тексту треба приховати але в той же час дати користувачеві можливість прочитати більше, дана стаття допоможе вам зрозуміти головний принцип як приховати текст в 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 }); |
Подивитися живий приклад або завантажити скрипт, ви можете у нас на сайті:
Немає коментарів
Ви можете залишити коментар першим.