Скрипт jquery для аккордеона

Аккордеон

Материал из JQuery

Плагин Accordion позволяет превратить выбранные элементы страницы в виджеты, которые обычно называют аккордеонами. Допустим, вам необходимо превратить в такой виджет элемент с идентификатором accordion для этого необходимо, чтобы внутри он имел следующую структуру:

Если вы хотите использовать в качестве заголовков другие элементы (к примеру, ссылки с классом header (т.е. без h3)), то лучше указать для этого соответствующие селекторы в свойстве header (для ссылок с классом header — "a.header").

Чтобы открыть нужную (с нужным номером) вкладку программно, используйте метод .accordion( "activate" , index ).

Нужная вкладка может быть открыта по принципу якоря (он работает только при включенном свойстве navigation): если вам необходимо сделать ссылку на страницу с аккордеоном, чтобы при этом оказалась открыта нужная вкладка (допустим вторая), необходимо, чтобы элемент a лежащий внутри заголовка этой вкладки, имел уникальный параметр href (допустим "#panel2". Решетка в начале обязательна). В таком случае, ссылка на страницу с нужной открытой вкладкой будет такой httр//site.ru#panel2.

Замечание: если вы хотите чтобы в вашем аккордеоне могли быть открыты сразу несколько вкладок одновременно, то не следует использовать плагин Accordion, лучше найти специально предназначенный для этого плагин или организовать его самостоятельно.

Источник

w3.org.ua

уроки front-end и back-end

Рубрики

jQuery. Пишем аккордеон с применением эффектов

Итак, мы будем писать простой аккордеон на jQuery. Для этого я сделаю небольшой экскурс в теорию.

Небольшое введение в эффекты

Самые простые эффекты в jQuery это hide() — show() и slideUp() и slideDown() .

Итак, hide(time) – скрывает элемент, к которому применяется за время, указанное в качестве параметра (время указывается в миллисекундах). Как работает эффект? За указанное время начинает уменьшаться высота и ширина элемента, значения padding и margin . Когда данные значения уменьшаются до нуля – к элементу применяется свойство display: none .

Эффект show() – работает аналогично, только в обратную сторону. Также, существует эффект анимации toggle() – который либо скрывает, либо показывает элемент с учетом его текущего состояния. Смотрим пример:

Эффекты slideUp() и slideDown() работают аналогично, только изменяется высота элемента. После того, как высота становится равна нулю – применяется свойство display: none .

Время эффектов указывается в миллисекундах. Так 3000 – это три секунды.

Также существует эффект slideToggle() , который переключает состояние элемента.

Смотрим примеры и код:

Строим аккордеон

Теперь строим аккордеон. Пусть у нас будет общий блок #accordeon внутри которого и будет размещаться наш код. Внутри данный блок будет содержать блок с заголовком ( .acc-head ) и блок с текстом( .acc-body ), который в начальном состоянии скрыт.

Источник

Accordion

Displays collapsible content panels for presenting information in a limited amount of space.

Examples

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

Want to learn more about the accordion widget? Check out the API documentation.

Interactions

Widgets

Effects

Utilities

Books

Copyright 2021 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

Источник

Как именно создать пользовательский jQuery аккордеон

Russian (Pусский) 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.

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

JQuery UI Accordion

Теперь, когда мы завершили с разметкой и стилевым оформлением, очень просто реализовать аккордеон jQuery UI. Для начала нам необходимо подключить скрипты jQuery и jQuery UI.

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

Вот и все, мы получили работающий аккордеон.

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

Имя класса ui-accordion-selected автоматически добавляется к текущему разделу аккордеона.

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

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

Чтобы это осуществить я добавлю немного кода PHP. Вы могли бы выполнить это и при помощи любого другого языка программирования.

Идея состоит в том, чтобы передать переменную в URL, и если ее значение совпадает со значением, указанным в определенном разделе, то мы добавляем к этому разделу класс current (* текущий). Намного понятнее должно быть в коде, так что взгляните:

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

Также нам необходимо удалить скрипт для добавления аккордеона 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, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest; разработка Firebug в виде отдельного дополнения прекращена, а его функциональность вошла в основной состав Firefox DevTools).

В примере с jQuery UI размер всех файлов JavaScript составляет около 73 kb. В примере с пользовательским виджетом, включая дополнительную возможность прокрутки окна, размер всех файлов JavaScript составляет около 57 kb. Что ж, может показаться, что это незначительное улучшение, однако представьте, что у вас сайт с очень высоким траффиком. За счет этого можно было бы сэкономить кучу байтов.

Теперь оставьте руководство и пишите собственный код jQuery.

Источник

Как создать вертикальный аккордеон для сайта

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

Процесс создания аккордеона

Процесс разработки вертикального аккордеона будет состоять из:

• создания HTML разметки;
• описания его внешнего вида с помощью CSS;
• написания логики на JavaScript.

Дизайн аккордеона (скриншот):

HTML код аккордеона и его описание

Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show . Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

CSS код аккордеона

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content , т.е. содержимого .

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none ). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show , который необходимо добавить к его родительскому элементу (accordion-item).

JavaScript код аккордеона

Сценарий (логика) аккордеона:

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

Инициализация элемента как аккордеон выполняется следующим образом:

Аккордеон, заголовки которого отделены друг от друга

Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:

CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):

Аккордеон с анимацией появления

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Стили аккордеона, включающие в себя анимацию (для отображения содержимого):

Вертикальное меню аккордеон

Пример настройки аккордеона в качестве вертикального меню.

Дополнительно в JavaScript сценарий добавим небольшой фрагмент кода, который будет показывать сколько подпунктов имеет каждый пункт в этом меню.

CSS и JavaScript:

Многоуровневое вертикальное меню аккордеон

Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.

HTML, CSS и JavaScript код многоуровневого меню:

Источник