Аккордеон (элемент интерфейса)

Виджет аккордеон

Графический элемент аккордеон представляет собой вертикально сложенный список элементов, таких как текстовые метки или эскизы. Каждый элемент может быть «развёрнут» или «раскрыт», чтобы показать содержание, связанное с этим элементом.

Термин связан с одноимённым музыкальным инструментом, в котором секции мехов разворачиваются при растягивании.

Общий пример аккордеона — это операция «Показать/Скрыть» в отдельном регионе, который может быть раскрыт, чтобы показать содержимое нескольких разделов в списке.

Аккордеон похож по смыслу на интерфейс с вкладками, на список пунктов, где ровно один элемент развернут в панели (то есть элементы списка ярлыков ссылаются на отдельные панели).

С точки зрения разработчика

Аккордеон представляет собой несколько кнопок или ярлыков, расположенных друг над другом. Когда кнопка активна, то пространство под кнопкой используется для отображения отдельных окон. Разделы, как правило, ограничены по ширине размером текстового поля. При открытии секции она сдвигает текстовые метки, расположенные ниже, на высоту раскрываемого окна. Только один раздел аккордеона может быть активным в любой момент времени. Активный раздел может иметь полосы прокрутки.

Назначение

• Объединяет окна, которые должны иметь какое-то отношение друг к другу.
• Одно окно в любой момент времени доступно: для уменьшения информационной перегрузки только одно окно раскрыто.
• Недоступные окна свёрнуты, чтобы сделать выбор быстрее. Чат-программа Google talk переписывает оконные метки для отображения важных состояний, например: «кто-то пишет».
• Все окна расположены стопкой друг над другом.

С точки зрения пользователя

Несколько окон накладываются друг на друга. Все они скрыты, только их заголовки видны. Если одно из них нажато, чтобы сделать его активным, оно раскрывается. Другие окна в аккордеоне располагаются по верхнему или нижнему краю.

Примеры

Типичный пример использования аккордеона — это операция Показать/Скрыть какой-либо регион, но в отличие от других элементов интерфейса, аккордеон собирает несколько таких скрываемых разделов в один список.

SlideVerse — пример аккордеона, используемого для предоставления доступа к веб-содержимому.

Просмотр списка в Google Reader также использует аккордеон.

Ссылки

• виджет аккордеон на jQuery
• Жару
• Учебник по mootools (где эффект называется раздвижная полка) на MONFX
• Примеры аккордеона на JavaScript
• Аккордеон — демонстрационный скрипт