Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Навигация с выпадающим меню: как сохранить выбранный параметр при загрузке страницы

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Предположим, что мы используем элемент <select> для навигации между страниц и, обычно, когда страница перезагружается, выбор возвращается к значению по умолчанию. Сегодня мы узнаем, как сохранить выбранный параметр так, что выбранная вами страница останется выбранной даже после обработки новой страницы. Чтобы продемонстрировать это, мы будем использовать демо-проект с несколькими статическими страницами. Давайте начнем!

Структура проекта

Структура проекта выглядит вот так — несколько HTML страниц с несколькими ресурсами:

HTML

На каждой HTML странице есть элемент select.

Каждый параметр указывает на статическую страницу. Ссылка на соответствующую страницу хранится в атрибуте data-url.

Данное меню выбора может содержать категории всех записей блога, как пример. Поэтому, так и предположим, что при выборе варианта All, отобразятся все записи блога. Тогда, если мы выберем вариант Animals, отобразятся записи, которые находятся в категории Animals и так далее.

Атрибут data-url может содержать абсолютный url, вместо относительного, вот так:

CSS

По умолчанию, стили которые мы можем применить к элементу select ограничены браузером. Например, для элемента option нет кросс-браузерного метода CSS оформления.

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

styling the select element
Оформленный элемент select (и эмодзи, чтобы было понятно на какой мы странице)

А вот и стили:

Стоит отметить, что для управления элементом select доступно несколько мощных библиотек JavaScript. Вот два примера: Chosen.js и Select2.js.

JavaScript

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

Первый метод

Для первого метода, нужно сделать следующие вещи:

  1. Получаем url соответствующей страницы от выбранного параметра и перенаправляем на эту страницу.
  2. Перебираем все параметры, берём значение их атрибута data-url и проверяем, совпадает ли это значение с URL страницы. Если это так, мы отмечаем соответствующий вариант как выбранный и заканчиваем цикл.

Вот необходимый код:

Как уже обсуждалось выше, в реальном проекте значение атрибута data-url может быть абсолютным. В таком случае мы можем обновить вторую часть нашего кода следующим образом:

Примечание: вместо добавления атрибута selected к соответствующему варианту посредством JavaScript, мы могли бы задать его статически в HTML. Например, на странице Животные мы могли бы добавить атрибут selected к варианту Animals. Однако, такой подход не лучший, поскольку на динамическом сайте все варианты (которые могут содержать категории записей) могут использовать одну и ту же страницу/шаблон (подробнее об этом в следующем уроке по WordPress).

Второй метод

Второй метод очень похож на первый, но использует преимущества локального хранилища.

Для этого метода, нам нужно сделать следующее:

  1. Получить URL-адрес страницы, связанной с выбранным вариантом, сохранить его в локальном хранилище и принудительно перенаправьте на эту страницу.
  2. Пройтись по всем вариантам, взять значение их data-url и проверить на совпадение со значением, сохранённым в локальном хранилище. Если совпадает, отмечаем этот вариант как выбранный и закрываем цикл.

Вот необходимый код:

Примечание: у этого решения есть одно ограничение. Если мы переходим на страницу (напр. страницу Animals) не выбрав данный пункт в выпадающем меню, то данный параметр не будет выбран. Это происходит, потому что в локальном хранилище нет значения url или сохранённое там значение не верно.

Выводы

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

В будущих уроках, мы проверим, как применить рассмотренные здесь методы на сайте WordPress. Там и увидимся!

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.