Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Як саме створити користувальницький jQuery акордеон

by
Read Time:10 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Акордеони (* графічний керуючий елемент, що містить список вертикально розташованих елементів. Кожний елемент можна розкрити для отримання зв'язаного з ним контенту) можуть бути дуже корисними для показу великої кількості розділів даних у невеликому просторі. У jQuery UI (* бібліотека готових компонентів для користувальницького інтерфейсу, розроблена на основі jQuery) є вбудований віджет Accordion, проте згідно з jQuery UI Download Builder (* конструктор для формування варіанту завантаження) розмір скриптів Core jQuery UI (* набір різноманітних утиліт та хелперів) та Accordion складає  25kb и 16.6kb відповідно. Сьогодні я покажу вам, як створити користувальницький акордеон, час завантаження якого значно менший.

Завантажте приєднання у боковому полі, щоб поглянути.

Напевно, це забагато для всього лише одного простого акордеона. Особливо коли ви додаєте звичайний скритн  jQuery, размір якого складає 18kb у мініфікованому (* мініфікація полягає у видаленні зайвих символів: коментарів, пробілів, нових рядків та табуляції) та заархівованому вигляді Так чому ж замість підвищення часу завантаження вашої сторінки через додаткову зайву функціональність не створити потрібний компонент з нуля?

Також мені здається, що при написанні коду з нуля ви набагато глибше починаєте розуміти, як використовувати jQuery ефективно, без постійної потреби у звертанні до стороннього коду.

Таким чином, план цього посібника – показати, як створити акордеон за допомогою віджета jQuery UI, а потім створити його ж за допомогою деякого власного коду. Давайте скористаємося боковим полем блога у якості прикладу.

Розмітка HTML-документу

Розмітка дуже проста. всього-на-всього елемент списку для кожного розділу в акордеоні.

Код CSS

Ми додамо деяке найбільш базове стильове оформлення, щоб акордеон виглядав більш презентабельно. Оскільки у цьому посібнику головна увага приділяється JavaScript, то я поверхнево ознайомлю вас з тим, що ми робимо у коді CSS.

Оскільки я завжди починаю зі своєї базової таблиці стилів, то буду використовувати її і тут:

Далі я видалю відступ та стильове оформлення маркера невпорядкованого списку акордеона та дочірніх списків і додам нижню границю до невпорядкованого списку акордеона (ви скоро побачите, чому додаємо тільки нижню границю).

Потім я додаю границю навколо кожного розділу акордеона, окрім нижньої. Також я видалю границю елементів списку, які є дочірніми елементами розділу акордеона, і додам тільки нижню границю. У випадку, якщо цей елемент є останнім дочірнім елементом невпорядкованого списку, я видалю нижню границю Так, я знаю, що цей маневр не спрацює в IE, проте це немає значення.

Далі я додаю стильове оформлення для головних посилань, при натисканні по яким акордеон розкривається, завдяки чому вони будуть виділятися більше серед решти:

Нарешті, я всього лише додаю деяке стильове оформлення для підсписків акордеона, завдяки чому вони будуть виглядати трохи приємніше:

Давайте подивимося, що в нас є на даний момент. Акордеон буде виглядати таким же чином, коли ми використовуємо jQuery UI Accordion при відключеному JavaScript.

Accordion MarkupAccordion MarkupAccordion Markup

Схоже, що для коректного відображення у в IE6 нам потрібно буде додати деякий додатковий код CSS для корегування  whitespace bug (* в IE6 додоються відступи між елементами списку).

JQuery UI Accordion

jQuery UI Home PagejQuery UI Home PagejQuery UI Home Page

Тепер, коли ми закінчили з розміткою та стильовим оформленням, дуже просто реалізувати акордеон jQuery UI. Для початку нам потрібно підключити скрипти jQuery та jQuery UI.

Потім нам потрібно ініціалізувати акордеон для нашого невпорядкованого списку, значенням id якого є accordion:

От і все, ми отримали працюючий акордеон.

Working AccordionWorking AccordionWorking Accordion

Для того, щоб поточний відкритий елемент акордеона виділявся серед інших, я додав трохи додаткового коду CSS:

Ім'я класу ui-accordion-selected автоматично додається до поточного розділу акордеона.

Наш користувальницький акордеон jQuery

Тепер, коли ми реалізували акордеон jQuery UI, прийшов час створити свій власний. Один момент, що мені безперечно не подобається у версії акордеона, реалізованого за допомогою jQuery UI, – його вигляд при виключеному JavaScript. Мені би більше сподобалося, якщо би одноразово відкривався тільки один розділ.

Щоб це здійснити я додам трохи коду PHP. Ви могли би виконати це за допомогою будь-якої іншої мови програмування.

Ідея полягає в тому, щоб передати змінну до URL, і якщо її значення співпадає зі значенням, вказаним у певному розділі, то ми додаємо до цього розділу клас current (* поточний). Набагато зрозуміліше повинно бути в коді, так що погляньте:

Також ви повинні були помітити, що я змінив URL-адреси всіх посилань, за допомогою яких розкриваються розділи акордеона, щоб значення змінних, що передаються з їх допомогою, співпадали зі значеннями, розташованими в умовах if кожного розділу.

Також нам потрібно видалити скрипт для додавання акордеона jQuery UI та додати наш власний:

Додатковий код CSS

Після внесення цієї невеликої зміни нам потрібно додати трохи додаткового коду CSS. У нас більше нема класу ui-accordion-selected, що додається до елементів списку; тепер замість нього використовується клас current. Також ми повинні врахувати зміну імені цього класу і у ввімкнутому стані акордеона:

Що ж, що ми хочемо тут зробити, так це сховати всі невпорядковані списки окрім випадків, коли вони є дочірніми для елемента списку з класом current. Також я додав id для body у цій демоверсії, завдяки чому ми можемо використовувати ту саму таблицю стилів в обох прикладах.

Користувальницький код JavaScript

По-перше, ми хочемо виконати скрипт одразу після завантаження документа, так що ми починаємо з цього:

Ми хочемо, щоб акордеон функціонував при натисканні посилань з назвами розділів, проте ми не хочемо залишати сторінку, так що нам потрібно забезпечити повернення false:

По-друге, мені не подобається контур, що з'являються навколо посилань при натисканні по ним, так що я встановлюю значенням властивості, що відповідає за додавання цього ефекту, none:

Є два різних випадки взаємодії користувача з цим скриптом:

  1. Посилання, що натискають, є розділом, що вже відкритий.
  2. Посилання, що натискають, не є розділом, що вже відкритий.

Перший випадок

Цього функціонала нема у версії, що реалізується за допомогою jQuery UI, проте мені здається, що у користувача повинна бути можливість при бажанні закрити всі розділи. Якщо у посилання, що ви натиснули, є батько з класом current, то ми хочемо звернути невпорядкований список та видалити клас current.

Інший момент, який мене достає у версії, що реалізується за допомогою jQuery UI, – те, що ви можете прокрутити (* переміщення вмісту вікна або екрана за допомогою лінійок прокручування або інших засобів. Розрізняють прокручування у вертикальному та горизонтальному напрямках) акордеон таким чином, що він опиниться майже на межами видимості, натиснути по його посиланню, і потім результат взаємодії з'являється за межами того, що доступно для вашого зору. Прокрутіть приклад з акордеоном, що реалізується за допомогою jQuery UI, та спробуйте самостійно.

Так що моє рішення цієї проблемки – використання цього чудового невеликого скрипта під назвою jQuery ScrollTo. Це дуже невеликий скрипт, завдяки якому додається плавне прокручування сторінки:

Давайте додамо його до заголовока документа перед скриптом нашого акордеона.

При прокручуванні розділу я хочу прокрутити вікно до верхівки акордеона:

Перший параметр функції – цільовий елемент, до якого хочемо зробити прокручування, а другий – кількість часу, за який воно повинно відбутися.

Другий випадок

Це випадок, коли розділ, по якому натискають, у той момент не розкрито. Отже, для початку ми хочемо сховати поточний відкритий розділ та видалити клас current (ця частина коду дуже схожа на ту, що використовували у першому випадку):

Далі ми хочемо відкрити розділ, по якому натиснули, і додати до нього клас current:

І, нарешті, давайте прокрутимо вікно до верхівки акордеона, таким же чином, як ми робили у першому випадку:

От і все. Я серйозно. Ви припускали, що створення акордеона могло би бути настільки простим?

Завершення

Тепер давайте порівняємо розміри файлів JavaScript за допомогою вкладки Net у Firebug (*  налагоджувач web-додатків, використовується як окреме розширення для браузера Mozilla Firefox;  розробку Firebug у вигляді окремого розширення припинено, а його функціональні можливості ввійшли до основного складу Firefox DevTools).

FirebugFirebugFirebug

У прикладі з jQuery UI розмір усіх файлів JavaScript складає біля 73 kb. У прикладі з користувальницьким віджетом, включаючи додаткову можливість прокрутки вікна, розмір усіх файлів JavaScript складає біля 57 kb. Що ж, може здатися, що це незначне покращення, проте уявіть, що у вас сайт з дуже великим трафіком. Завдяки цьому можна було би зекономити купу байтів. Плюс до цього ви тепер глибше розумієте роботу jQuery.

Тепер залиште посібник та пишіть власний код jQuery.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.