Табы в браузере что это
Мы продолжаем дорабатывать новый интерфейс Яндекс.Браузера и постепенно двигаемся к варианту, который можно сделать доступным для всех. Делаем мы это внимательно, изучая отзывы пользователей на то, что уже было сделано. Сегодня – новая бета-версия для Windows, получившая название Калипсо и основанная на наиболее удачных решениях из проекта Кусто.
В конце прошлого года мы показали публике (в том числе на Хабре) альфа-версию нового дизайна и попросили помочь с тестированием. Благодаря этому, нашей команде удалось проверить идеи в реальных условиях, разделить их на те, которые понятны людям, и те, которые нуждаются в дальнейшей доработке. Калипсо — это объединение привычных решений из классического интерфейса с хорошими идеями из Кусто. Среди них видеофоны, прозрачный интерфейс, поиск с богатыми ответами, обновленные инфобары и многие другие.
Новая вкладка
Новая вкладка в Калипсо очищена от бесполезных серых панелей, а все доступное пространство отведено под анимированный видеофон. Одновременно с этим мы вернули возможность переключаться между Табло, загрузками, дополнениями и недавно закрытыми сайтами.
Кстати, дизайнеры обновили более половины встроенных фонов и дали возможность пользователям загружать собственные картинки. В этот раз новые фоны должны подгрузиться с сервера, поэтому может потребоваться перезапустить браузер или немного подождать.
Открытые вкладки
Как вы уже могли догадаться, по умолчанию вкладки теперь отображаются сверху. Трудно было устоять после такого количества ваших отзывов. Конечно же, мы не забыли про прозрачность. Сайт просвечивает сквозь интерфейс, как бы намекая, что здесь он главный. Мы лишь слегка приглушили эффект прозрачности в сравнении с Кусто.
Группировка и окрашивание вкладок в цвета сайтов спровоцировали множество вопросов и требуют переосмысления, поэтому в Калипсо они доступны пока только для вкладок снизу.
Да, вы можете выбрать, где их расположить. Соответствующий пункт есть в контекстном меню. Над вкладками сейчас идет интенсивная работа. В следующих версиях их внешний вид и логика работы должны быть унифицированы. Мы также думаем над вариантом с боковыми вкладками. Мы верим, что в будущем расположение вкладок будет зависеть только от вкуса пользователя. Как вам такой макет?
Умная строка
Мы уже говорили, что не планируем прятать домен от посетителей, поэтому сейчас он наглядно представлен рядом с заголовком страницы. В текущей сборке домен будет справа от заголовка, но мы экспериментируем с вариантами, и в следующих обновлениях он может переехать (как на скриншоте).
Что будет, если кликнуть по адресной строке? В Кусто открывалась Изнанка, которая перекрывала собой весь сайт. К сожалению, это приводило к путанице и потере контекста. В Калипсо мы вернулись к истокам и показываем Табло. От тех идей, что лежат в основе Изнанки мы не отказались, но нам нужно время, чтобы придать им новую форму.
Поисковые подсказки в Калипсо, как и в Кусто, не только помогают уточнить запрос, но и предоставляют расширенную информацию. Например, текст из Википедии, картинки или ссылки на подстраницы сайта. Такие подсказки мы называем «Богатыми ответами». Выбрать альтернативную поисковую систему так же просто, как и в классическом интерфейсе.
Попробовать Яндекс.Браузер с интерфейсом Калипсо сейчас можно только в бета-версии для Windows. Для других ОС будет чуть позже. Эта сборка еще далека от финальной. Кое-где нужно поработать над оптимизацией. Да и в локализации есть пока пробелы. Багрепорты на другие найденные ошибки вы можете отправлять через жучка. Мы также будем внимательно следить за отзывами, которые вы можете смело оставлять в комментариях под этим постом.
При разработке приложений «фронтендеры» редко обращают внимание на то, как пользователь будет использовать предоставляемые браузером функции клавиш. Я не являюсь исключением, но в один день мне была дана задача касаемо UX и переходов с помощью нажатия «Tab» и «Shift + Tab».
Суть задачи прозрачна и чиста: есть интерфейс, макет которого отображен ниже. Концептуально 1 страница может содержать 2 различные формы и требованием было условие, чтобы «бегание „Tab`ами“ не переходило с 1 формы на другую».
Все было бы хорошо, если бы браузер умел «нативно» блокировать фокус в формах. Пример представлен на рисунке ниже, где оранжевым «border`ом» помечен текущий элемент, а серым — предыдущий.

Как видите, «нативное» поведение не удовлетворяет требованиям. Итак, давайте решим эту проблему. Решение не является сложным, так что рассмотрим его.
Было бы идеально если бы существовали некие “ворота”, которые не допускали бы «выпрыгивание» фокуса из последнего(при «Tab») или первого (при «Shift + Tab») элемента с «tabindex» или поддерживающего фокус по-умолчанию. Итак, суть проста: наши «ворота» – это спрятанные «input-элементы», которые при событии «onFocus» получают событие «event» в виде аргумента и возвращают фокус на элемент, с которого он пришел. Иллюстрация ниже.
Получение предыдущего элемента осуществимо с использованием свойства «relatedTarget» объекта «event». Визуализация решения ниже.

А вот и сам код. Стоит отметить, что здесь отсутствует «ES6+» синтаксис, так как в основе лежит идея поддержки кода различными браузерами без подключения различных «транспайлеров» типа Babel.
Здесь нет ничего сложного: создается «input», устанавливаются стили, которые «спрячут» наши «ворота». Здесь не используется «display: none», так как браузер не фокусирует «Tab`ами» такие элементы. Вследствие такого поведения требуется сделать элемент прозрачным и вынести за пределы окна браузера.
Для возврата фокуса на предыдущий элемент используется getTabOutHandler. Это «HOC». Первым его аргументом является наш контейнер(то, вокруг чего мы устанавливаем «ворота»), а вторым он ожидает массив «ворот», которые мы создали с помощью getGateInput. Данная функция возвращает обработчик события, который работает по описанному выше принципу.
Для того, чтобы фокус мог зайти в контейнер нам надо открывать и закрывать «ворота». Это мы будем делать путем установки атрибута «tabindex». (-1 – не фокусировать «Tab`ами», 0 – фокусировать согласно потоку)
Для управления воротами установим обработчик, который будет «слушать» нажатие «Tab`а»(код 9) и если сфокусированный элемент(activeElement) находится внутри контейнера, то закрыть «ворота», иначе – открыть.
Итого
Был рассмотрен способ блокировки фокуса в форме, который заключается в возврате фокуса на предыдущий сфокусированный элемент. Для «отлавливания» фокуса мы использовали скрытые «input-элементы», фокусировка которых регулировалась с помощью «tabindex`а». Представленный выше код является частью библиотеки «tab-out-catcher», который я написал для решения своей задачи. Примеры использования можно посмотреть здесь. Так же есть решение для React приложений.
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на отдельные части, а затем выводить в определённый момент времени только одну порцию этих данных.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько секций.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально обычно оформляют в виде вкладок или группы кнопок. При нажатии ни них они включают видимость одного какого-то блока с контентом и скрывают другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type="radio" ) и CSS селекторе checked.
HTML и CSS код таба:
В этом варианте радиокнопки связаны с определённым label . Связь элемента label с input выполнена через атрибут for . Это действие необходимо для того, чтобы можно было скрыть элементы input , а управление ими (установку checked ) выполнять через клики по элементам label .
Стилизация выбранного элемента label в этом примере выполнена с использованием селектора input[type="radio"]:checked+label . Этот селектор выбирает элемент label , который расположен сразу же после элемента input[type="radio"] , находящимся в состоянии checked .
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
Отобразить вкладки можно по-разному. В следующем примере они визуально отображаются как кнопки .
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
Сейчас разберём как можно создать табы на чистом JavaScript (без использования jQuery и каких-либо других библиотек).
Способ реализации на JavaScript может потребоваться для решения задач, которые просто невозможно решить на CSS. Например, когда нужно загружать контент динамически (через AJAX) в момент открытия вкладки.
JavaScript (с использованием классов):
Инициализация табов на странице осуществляется посредством создания нового объекта типа ItcTabs и передаче ему в качестве аргумента CSS-селектор или DOM-элемент которой необходимо инициализировать как табы.
Если в качестве аргумента указать селектор класса, то в качестве табов будет инициализирован только первый элемент.
Для того чтобы на странице инициализировать несколько вкладок, можно использовать следующий код:
Кроме этого, результат вызова new ItcTabs() можно сохранить в переменную, а затем использовать её для программного переключения вкладок.
Краткое описание исходного кода JavaScript
Исходный JavaScript построен на основе класса ItcTabs .
- this._elTabs - это DOM-элемент, содержимое которого нужно инициализировать в качестве табов;
- this._elButtons - элементы, которые представляют собой вкладки;
- this._elPanes - элементы, содержащие контент, который необходимо переключать с помощью вкладок.
Установка обработчика для события click осуществляется в методе _events() . Данный метод вызывается в конструкторе.
Для отображения определённого контента в зависимости от нажатой вкладки выполняется с помощью метода show() . Элемент, на который нажали передаём в качестве аргумента:
Метод showByIndex(index) предназначен для перехода на вкладку по её индексу.
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видео.
В элементах .player атрибут data-video-id определяет videoId ролика, а data-width и data-height - ширину и высоту iframe .
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
Tabs – это js-компонент фреймворка Bootstrap, предназначенный для добавления на страницу вкладок.
Табы состоят из 2 частей: самих вкладок и контента.
Вкладки используются, когда контент нужно показывать не сразу весь целиком, а определёнными порциями. Переключение между этими порциями осуществляется посредством вкладок.
Создание вкладок на фреймворке Bootstrap
Создание вкладок в Bootstrap 4 начинается с создания самих вкладок .
Для этого необходимо создать список ul с классами nav и nav-tabs . После этого в ul нужно поместить определённое количество элементов li с классом nav-item . Их количество должно соответствовать количеству вкладок, которые мы хотим создать.
Затем в каждый элемент li необходимо вложить ссылку с классом nav-link , атрибутом data-toggle="tab" и href . В href следует указать ссылку на блок, который она будет показывать (связан с ней). Содержимое элемента a будет являться названием вкладки. Кроме этого, к одной из ссылок следует добавить класс active . Этот класс будет определять вкладку, которая должна быть выделенной (активной) по умолчанию.
После создания самих вкладок необходимо создать блоки с контентом , которые будут переключаться с помощью них.
Для этого нужно создать элемент с классом tab-content . Он будет являться контейнером. В нём необходимо создать блоки div с классом tab-pane и атрибутом id . Значение id должно определять вкладку, связанную с этим блоком. К блоку, содержимое которого необходимо отображать по умолчанию, необходимо добавить классы show и active . При желании к блокам также можно добавить класс fade . Это подключит к ним анимацию и сделает их переключение более плавным.
После этого в каждый из этих блоков следует поместить определённый контент, который нужно будет отображать при активности той или иной вкладки.
В Bootstrap 3 HTML-разметка и вид вкладок немного отличается от 4 версии. Пример, приведённый выше, в Bootstrap 3 будет выглядеть следующим образом:
В этих примерах активирование компонента Tabs (логики на JavaScript, применительно к этим элементам) выполнялось с помощью атрибута data-toggle="tab" .
А определение того, какая вкладка какой контент должна показывать устанавливалась посредством атрибута href для самой вкладки и id для блока с контентом.
Включение табов c помощью JavaScript
Активировать табы можно не только посредством атрибута data-toggle="tab" , но и с помощью написания кода на JavaScript.
В этом случае добавлять к ссылкам атрибут data-toggle="tab" не нужно.
Отображение вкладки в этом случае будет выполняется посредством вызова метода tab('show') . Этот метод нужно будет вызывать для соответствующей вкладки (ссылки) каждый раз, когда пользователь нажмёт на неё.
Это, например, можно реализовать посредством добавления следующего скрипта на страницу:
При необходимости метод tab('show') вы можете использовать также, когда вам необходимо программно переключить вкладку.
События компонента Tabs
При открытии и переключении вкладок данный компонент генерирует определённые виды событий.
Всего их 4 и генерируются они в следующем порядке (при переключении вкладок):
- hide.bs.tab – перед скрытием текущей активной вкладки, которая через некоторое время будет не активной;
- show.bs.tab – перед отображением вкладки, которая через некоторое время будет активной;
- hidden.bs.tab – после скрытия предыдущей активной вкладки (т.е. той, которая была в событии hide.bs.tab );
- shown.bs.tab – после отображения новой активной вкладки, которая сейчас будет отображаться пользователю.
Если ни одна из вкладок (tab) ещё не была активной, то события hide.bs.tab и hidden.bs.tab генерироваться не будут.
Эти события нужно использовать, когда вам нужно выполнить некоторые действия при их наступлении.
Пример, в котором показано работа с событиями компонента Tabs:
Дополнительные материалы
В этом разделе представлена следующая информация:
Табы, вкладки которых имеют выпадающее меню
В Bootstrap к вкладкам при необходимости можно добавить выпадающее меню. Кроме этого, если некоторые вкладки нужно сделать не активными, то к ним можно добавить класс disabled .
Добавление aria-атрибутов в разметку
Если вы хотите сделать сайт более доступным для людей с ограниченными возможностями, то данную разметку следует дополнить aria-атрибутами .
Эти атрибуты предназначены для специальных приложений, например экранных дикторов, с помощью которых пользователи прослушивают страницы.
Для этого к вкладкам необходимо добавить role="tablist" , role="tab" , role="tabpanel" и дополнительные aria-атрибуты с помощью которых передать пользователям специальных приложений структуру, функциональность и текущее состояния табов.
Комментарии:
Здравствуйте, Александр. Подскажите, вкладки реализованы на bootstrap3. Мне необходимо, чтобы вкладки фиксировались при прокрутке наверху в мобильной версии, что было реализовано следующим скриптом. Проблема в том, что при переключении вкладок наверху содержимое отображается не с начала, а того места где закончился просмотр предыдущей вкладки. Как сделать чтобы при клике на вкладку инфо отражалось бы полностью.
1. Существует ли в природе расширение к Firefox, позволяющее перетаскивать табы с одного окна на другое? Ну или хотя бы выделить группу табов и отделить их в отдельное окно.
2. Есть ли такая возможность в других браузерах?
В третьем фоксе таскаются, но только основной URL
В случае если были изменения во фреймах либо AJAX-ом, они при перетаскивании теряются.
Не, такая фигня мне даром не нужна, URL'ы я могу и ручками скопировать. Надо чтобы целиком таскались, без потерь.
>2. Есть ли такая возможность в других браузерах?
В Опере давным-давно. кажется, вместе с detach tab и появилась. я так сессии сохраняю, когда много табов накопится: отдетачил один, перетащил в новое окно со старого остальные, сохранил сессию, новое окно убил. быстро, сердито, удобно.
>Есть ли такая возможность в других браузерах?
Есть, в Опере. Ещё там есть боковая панель окон, где можно осуществлять над ними групповые операции и фильтровать нужные поиском.
Ещё слышал, что в сафари есть, да ещё с красивой анимацией, но как я не пытался перетащить вкладку в виндовой версии, у меня не получалось.
Насчёт оперы. У меня 9.20 (под Debian Etch). Detach tab в контекстном меню вкладки — это какая-то бяка, она создаёт неполноценное окно, без меню и вкладок, и это вроде не лечится (при попытке из этого окна открыть ссылку в новой владке вместо этого создаётся ещё одно неполноценное окно).
Боковую панель окон не нашёл.
Всё, разбрался, оказывается просто между окнами можно табы таскать без всякой боковой панели. Хотя с боковой панелью было бы удобнее, ну да ладно :)
А насчёт файрфокса глухо?
В 2.0.0.13 таскаются, но в окне из которого утащены при этом не исчезают.
Shift+F4 или щелчок по серой полоске слева окна вызывает боковую панель. Секция окон на ней по умолчанию скрыта. В настройках внешнего вида (Shift+F12) на вкладке панелей нужно поставить галочку, чтобы её показать.
>Detach tab в контекстном меню вкладки — это какая-то бяка, она создаёт неполноценное окно, без меню и вкладок
Это вкладка, оторванная от родительского окна (кстати, в 9.5 это поведение изменили. ). Не забываем, что Опера — MDI-приложение, чтобы всё понимать и пользоваться всеми возможностями нужно:
1. Отключить в настройках крестик закрытия на каждой вкладке.
2. Включить меню окон.
3. (Опционально)Разрешить окно без вкладок.
Это всё спрятано на последней вкладке основных настроек (Ctrl+F12).
Ещё вопросик, а нельзя ли избавиться от меню сверху? Места просто жалко, его бы свернуть в кнопочку и добавить её на панель вкладок. И кнопки для закрытия/сворачивания вкладок оттуда тоже куда-нибудь переместить, а то они, в отличии от остальных кнопок, не таскаются.
>а нельзя ли избавиться от меню сверху
Personal Menu (с третьим работает, во втором не смотрел, но должно).
>а нельзя ли избавиться от меню сверху?
выбирай на вкус. лично я использую «Toggle Menu bar on/off AND dropdown the main menu». тыц по кнопке прячет/показывает + dwopdown с менюхой, чтобы не показывать постоянно.
А можно сохранить сессию, в которой будут только вкладки текущего окна, а не все открытые окна? Чтобы сохранить состояние окна и закрыть его до лучших времён? У меня тут висит окно с 20-ю вкладками, которое мне честно говоря ещё пару недель не понадобится, но история его вкладок нужна, так что сделать папку с закладками не катит.
Или единственный путь — сохраниться, поубивать все остальные окна, сохранить сессию с одним неубитым окном и открыть ранее сохранённую сессию со всеми окнами? Как-то это криво вроде, хотя тоже способ.
Там при сохранении сеанса можно поставить галочку на против Only save active window.
Читайте также: