Вкладки Часть 2 Глубокие ссылки

Вкладки - Часть 2 - Глубокие ссылки

В предыдущем руководстве я показал, как мы можем использовать пользовательский интерфейс jQuery для добавления виджета вкладок на HTML-страницу. Что мы добавим сейчас, так это глубокие ссылки для отдельных вкладок..

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

В пользу нас говорит тот факт, что виджет jQuery Tabs Widget написан достаточно хорошо, поэтому, если URL-адрес страницы содержит? Tab = # ID, виджет сам будет искать панель, id которой является идентификатором. Если такая панель существует — она ​​отобразится автоматически. Таким образом, нам не нужно будет вызывать методы для его активации..

Итак, наша задача — добавить аргумент GET "tab" в URL-адрес страницы. Значение должно быть "#", за которым следует идентификатор панели. В общем, получается селектор CSS ID..

Автоматическое обнаружение с помощью rel

Первый способ добиться этого — использовать атрибут rel с синтаксисом, который может читать адрес jQuery. Изменение сводится к простому обновлению нашей разметки:

div id = "вкладки">
ul>
li> a href = "# first" rel = "address: /tabs.html? tab = # first"> First / a> / li>
li> a href = "# second" rel = "address: /tabs.html? tab = # second"> Second / a> / li>
li> a href = "# third" rel = "address: /tabs.html? tab = # third"> Third / a> / li>
/ ul>
… / div>

Если значение атрибута rel ссылки начинается с «address:», тогда jQuery Address будет следить за тем, чтобы адресная строка нашего браузера была обновлена ​​до значения, которое мы ввели впоследствии. В нашем случае он должен содержать «tabs.html». Это потому, что мы предварительно установили базовый URL-адрес, с которым работает jQuery Address, в качестве корневого адреса нашей страницы. Он не включает адрес страницы вкладок. Затем нам нужно добавить вопросительный знак, разделяющий аргументы GET в адресе. Наконец, нам нужно указать пару свойство-значение для аргумента GET, который мы хотим добавить..

Проблемы с использованием rel

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

Читать также:  Начало работы в PHP

Другая причина заключается в том, что с активной вкладкой ссылки на вкладки становятся активными, и с помощью стрелок влево и вправо мы можем изменить активную вкладку. Это часть специальных возможностей вкладок пользовательского интерфейса jQuery. Однако при изменении активной вкладки таким образом мы не нажимаем на ссылку. Соответственно, jQuery Address не обновляет значение адреса браузера..

Кроме того, мне лично не нравится писать имя страницы (tabs.html).

По этой причине я бы предпочел выполнять обновление исключительно с помощью JavaScript..

Обнаружение смены вкладки

Что нам нужно сделать, так это как-то определить, когда вкладки меняются, и обновить адрес браузера в этот момент. Мы можем обнаружить изменение вкладок, используя события виджета jQuery UI Tabs. Если вы выполните поиск в Интернете, вы легко найдете полную документацию по виджету jQuery UI Tabs Widget. В разделе событий вы увидите acivate — событие, которое запускается при активации новой вкладки. Это именно то, что нам нужно.

Обработчики для виджетов пользовательского интерфейса jQuery устанавливаются как свойства объекта инициализации:

$ (‘# tabs’). tabs ({activate: function (e, ui) {// добавить состояние глубинных ссылок}});

Из документации мы видим, что при вызове функции передаются два параметра — event и ui. Первый содержит основную информацию о самом событии активации. Второй содержит информацию о самом виджете. Он включает в себя, кто был ранее активной вкладкой, кто является новой активной вкладкой и т. Д..

В качестве значения свойства мы передаем функцию. Помните, что в JavaScript функции — это просто объектный тип. Нам нужно добавить наш код, чтобы позаботиться о правильном обновлении адреса браузера..

Читать также:  Бандлеры

В принципе, должен работать следующий код:

$ (‘# tabs’). tabs ({activate: function (e, ui) {$ .address.parameter (‘tab’, ‘#’ + ui.newPanel.attr (‘id’));}});

Установить аргумент GET вручную

Что мы делаем, так это то, что при активации новой вкладки мы устанавливаем параметр (аргумент GET) с ключом «tab» и значением «#tabID». Где tabID — это идентификатор новой панели, к которой мы получили доступ через аргумент ui..

Проблема в том, что адрес jQuery неправильно определяет значение аргументов GET, содержащих "#". В результате код ломается. Если эта ошибка будет исправлена ​​в будущем, наш код будет работать правильно. Однако до тех пор мы должны найти другое решение..

Мы можем попробовать передать только значение идентификатора панели, без этого "#". Затем возникает конфликт с вкладками пользовательского интерфейса jQuery, которые не могут правильно выполнить селектор без "#".

При попытке заменить селектор на div # ID вкладки jQuery UI работают правильно, но адрес jQuery снова прерывается из-за наличия символа «#», хотя и не в начале параметра.

Нам нужно написать еще немного кода:

$ (‘# tabs’). tabs ({activate: function (e, ui) {var currAddress = $ .address.value (); var tab = ‘#’ + ui.newPanel.attr (‘id’); var newAddress = »;
если (currAddress.match (/ \? /)) {параметры var = $ .address.parameterNames (); если ($ .inArray (‘вкладка’, параметры) == -1) {новый адрес + = ‘вкладка =’ + вкладка; } еще {newAddress = currAddress.replace (/ tab = # [^] + /, ‘tab =’ + tab); }} еще {newAddress = currAddress + ‘? tab =’ + tab; }
$ .address.value (новый адрес); }});

Активируйте вкладку

Сначала мы записываем текущий адрес в переменную currAddress для облегчения доступа в дальнейшем..

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

Создаем пустую переменную newAddress, в которой позже напишем, как должен выглядеть новый адрес.

Проверяем, содержит ли текущий адрес «?» (Если уже есть аргументы GET). Через некоторое время я объясню, что мы будем делать, если есть, давайте на мгновение перейдем к другому. Если нет аргументов GET — наша жизнь упрощается и мы просто добавляем? Tab = # tabID к текущему адресу.

Читать также:  Создание домашней страницы часть 4

Однако, если у нас есть аргументы GET, мы сначала получаем список их ключей, используя $ .address.parameterNames (). Затем мы проверяем, включают ли наши аргументы GET наши. Потом надо его переписать. Или проверьте, отличаются ли эти аргументы GET, и нам нужно добавить свои.

Как бы просто это ни звучало, результат $ .inArray () довольно скользкий. Функция принимает искомый элемент в качестве первого аргумента и массив элементов для поиска в качестве второго аргумента. Функция возвращает либо индекс элемента (если он найден) с 0-левым индексированием, либо «-1», если элемент отсутствует. Хотя я это знаю, при написании учебника я лично допустил ошибку, ожидая логического значения в результате функции. Поскольку элемент был первым в массиве (индекс 0), условие не было выполнено, так как 0 считается равным false, что противоречило "правильному" результату для меня..

Если аргумент GET "tab" отсутствует в текущих аргументах GET, мы просто добавляем tab = # tabID к адресу. В противном случае, используя регулярное выражение, мы заменяем значение аргумента идентификатором новой вкладки..

Объяснение регулярного выражения

Вот некоторые пояснения к регулярному выражению:

  1. Мы начинаем обнаружение с простого текста tab = #.
  2. Затем в квадратных скобках мы перечисляем символы, которые, как мы предполагаем, могут содержаться
  3. Если первый символ в квадратных скобках — ^ (как в нашем случае), значение скобок меняется на противоположное, так что они находят все символы, кроме перечисленных.
  4. Рассматриваемые "перечисленные" символы просты, так как они отделяют следующий аргумент GET.
  5. Знак + после квадратных скобок означает, что перечисленные символы должны встречаться как минимум 1 или более раз..

Естественно, с IE есть проблемы с функциональностью. Скоро мы их исправим.

А пока вы можете увидеть демонстрацию по адресу https://magadanski.com/demo/tabs-2-deep-linking/tabs.html.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?