Функціональний акордеон за допомогою jquery
Акордеон - це така штука, в якій при натисканні на назву (в списку інших назв) і знизу виїжджає область з контентом. Зазвичай, інші панелі при цьому закриваються. Акордеони - це мудрий спосіб "упаковки" контенту на сторінці в умовах обмеженого простору.
У цьому уроці ми створимо незвичайний акордеон, в якому можна розмістити безліч інформації на мінімумі простору.
HTML: класичне використання списків визначення
Акордеони - це ідеальне місце для використання списків визначення.
Наш акордеон буде складатися з div ів, які разом становитимуть горизонтальний ряд. Кожен div містить назву колонки, зображення, і список визначення. Приклад одного такого ddiv:
Всі стилі в даному прикладі дуже прості і немає великого сенсу їх тут викладати.
Важливим пункт в таблиці стилів - це доступність. Ми повинні заховати всі інформаційні панелі таблиці за замовчуванням. Один із способів це зробити -використовувати display: none. Але це повністю сховає наші панелі, і деякі скрін рідери (типу iPAd, мобільні браузери і т.д.) можуть це неправильно інтерпретувати. Тому ми просто "виштовхали" всі тексти за межі видимої області браузера.
Це класична техніка.
Функція jQuery slideDown найкраще працює, коли їй відома висота оригінального елемента, перед його закриттям \ ховання, для плавної анімації. Якщо ми будемо використовувати display: none в таблиці стилів, функція не знатиме необхідної висоти осередків. Але як раз виштовхування, допоможе вирішити цю проблему. Нам необхідно переконатися, що осередок виставлена на повну ширину, щоб функція могла порахувати висоту враховуючи ширину розгорнутої і повністю видимої осередки.
CSS3 селектор псевдо класу: nth-of-type дуже корисний при роботі зі списками визначення. Давайте розфарбуємо наші осередки різними кольорами за допомогою: nth-of-type:
Для тих, хто ще думає про IE додайте ще кілька класів і розфарбуйте осередки з їх допомогою.
1. Після натискання
2. Якщо це активна осередок, то нічого не відбувається
3. Якщо немає.
4. Закрити всі відкриті осередки
5. Звузити стара назва
6. Збільшити нову назву
7. Відкрити новий осередок
8. Відзначити поточну колонку
9. Переконатися, що колонка розгорнута
Кілька цікавих моментів.
Я зазвичай використовую функцію .live () для стеження кліків за елементами dt. Але новий модний спосіб це робити - використовувати .delegate ()
Live стежило б за кліками по всьому документу, в той час як delegate можна обмежити певним регіоном.
Ще одна цікава особливість даного акордеона - при кліці на зображення відкривається повна версія колонки, при повторному натисканні йде перехід по необхідної посиланням. Трюк тут полягає в тому, щоб запобігти дію за замовчуванням при натисканні на зображення (а саме перехід по посиланню) за умови, що дана колонка не є активною (поточної).
Сьогодні ми хотіли б поділитися кількома ідеями стосується ефекту блочного розкриття, яку ви можете використовувати для своїх проектів.
Якщо ви хочете істотно підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки уберегтися від цілого ряду хакерських атак, а й організувати перенаправлення, а також вирішити завдання пов'язані з кешем.
Material Design - це набирає обертів тренд від Google. У даній збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
Ефекти на те й існують щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб дизайнерів за минулий місяць.
Спасибі, ось це дійсно щось вартісне!
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!