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

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

by
Difficulty:IntermediateLength:MediumLanguages:

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.

Accordion Markup

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

JQuery UI Accordion

jQuery UI Home Page

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

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

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

Working 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).

Firebug

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

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

Advertisement
Advertisement
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.