Табы в браузере что это
Обновлено: 07.07.2024
Трудно себе представить, но когда-то все браузеры были без табов. Ну действительно, кто в году 1997 открывал постоянно больше двух-трёх окон? Internet Explorer 4 с одним-то окном еле ворочался на "железе" того времени, так что зачастую даже мысли такой не возникало.
Но время идёт, всё меняется, и вопрос необходимости что-то менять к концу миллениума уже стоял остро. Решение было предложено разработчиками расширения NetCaptor для Internet Explorer, и это были те самые знакомые всем табы, позволяющие не захламлять консоль и ограничить количество окон браузера одним-двумя. В 1999 году задумка нашла путь в Mozilla Application Suite (предок Firefox и Thunderbird), а в 2000 её взяли на вооружение и разработчики браузера Opera.
Забавно, что в Microsoft спохватилась практически через семь лет - табы появились в "ишаке" лишь с выходом Internet Explorer 7, увидевшего свет аж в конце 2006 года. Кстати, наверное, отсутствие официальной поддержки этой возможности стало одной из причин существенной сдачи "мелкомягкими" позиций на рынке браузеров в последние годы (хотя, конечно, качество седьмой версии тоже сыграло немаловажную роль в миграции пользователей с Internet Explorer на альтернативные программные продукты).
Надо заметить, что спохватились ребята из Редмонда поздно - уж лучше бы придумали что-нибудь новое. Табы сейчас, увы, уже явно устарели. Конечно, то, что в недавно вышедшем Internet Explorer 8 несколько страниц одного и того же сайта открывается в табах одинакового цвета - приятно, но нужны новые решения.
Что же делать? Разработчики пытались запихнуть табы на бок страницы, снабдить их превьюшками, но такие идеи не прижились - видимо, просто потому, что никак не решали проблему с необходимостью структуризации кучи открытых страниц. Нет, речь вовсе не идёт о том, что табы должны исчезнуть. Пускай остаются - но свою главенствующую роль в организации информации в браузере они должны уступить.
Сейчас браузер уже сложно рассматривать как отдельностоящее приложение, это, скорее, "опрационная система в операционной системе", а такое определение, несомненно, предьявляет новые требования к его интерфейсу.
Вот, например, тут описана неплохая идея: сделать из каждого таба грядущего Firefox 3.2 некое подобие эппловской медиатеки iTunes, в которой есть некая библиотека сайтов, разделённая на категории по специализации, история, "умные" результаты поиска, а также статистика. И не спешите говорить, что такое уже есть в Safari - там можно перебирать лишь эскизы сайтов, а здесь - полноценно работать с информацией.
Также авторы идеи предлагают поместить две дополнительные кнопки "назад/вперёд" (чтобы листать RSS-каналы сайта) и возможность полноэкранного режима, в котором на экране остаётся лишь рабочая поверхность браузера. Естественно, такой подход неидеален, но, в какой-то мере, указывает правильный путь развития.
Руководитель подразделения Mozilla по пользовательским интерфейсам, Аза Раскин, в своём блоге показал другой, похожий, но, в то же время, отличающийся концепт нового браузерного интерфейса. Тут табы перенесеныя в левый вертикальный список, дабы таббар не занимал лишнего места по горизонтали, ведь современные мониторы широкоформатны, и излишества очень быстро "съедают" полезное рабочее пространство.
Начинается же левая колонка с пункта "Приложения". В последнее время пользователи всё больше используют веб-приложения, такие, как Gmail или Google Docs, потому держим табы с ними постоянно открытыми. Так почему бы не вынести их в отдельный класс постоянно открытых страниц?
Табы же будут расположены во втором разворачивающемся пункте колонки, а страницы, открытые в них, будут сгруппированы по принадлежности к определённым сайтам. Ниже расположены рабочие столы, ведь, как известно, обычно мы сидим в Интернете с какой-нибудь стандартной целью: либо развлечься, либо поработать, либо поговорить с друзьями. Зачем захламлять сессию смешанным контентом? Лучше разделить её по виртуальным рабочим столам браузера. Ну и наконец, скорее всего, колонка будет автоматически скрываться и появляться при наведении на неё мышки.
Что скажете? Мы считаем, что всё это действительно бы помогло, но разработка нового интерфейса Firefox только начинается и мы будем следить за тем, как она продвигается.
Мы продолжаем дорабатывать новый интерфейс Яндекс.Браузера и постепенно двигаемся к варианту, который можно сделать доступным для всех. Делаем мы это внимательно, изучая отзывы пользователей на то, что уже было сделано. Сегодня – новая бета-версия для Windows, получившая название Калипсо и основанная на наиболее удачных решениях из проекта Кусто.
В конце прошлого года мы показали публике (в том числе на Хабре) альфа-версию нового дизайна и попросили помочь с тестированием. Благодаря этому, нашей команде удалось проверить идеи в реальных условиях, разделить их на те, которые понятны людям, и те, которые нуждаются в дальнейшей доработке. Калипсо — это объединение привычных решений из классического интерфейса с хорошими идеями из Кусто. Среди них видеофоны, прозрачный интерфейс, поиск с богатыми ответами, обновленные инфобары и многие другие.
Новая вкладка
Новая вкладка в Калипсо очищена от бесполезных серых панелей, а все доступное пространство отведено под анимированный видеофон. Одновременно с этим мы вернули возможность переключаться между Табло, загрузками, дополнениями и недавно закрытыми сайтами.
Кстати, дизайнеры обновили более половины встроенных фонов и дали возможность пользователям загружать собственные картинки. В этот раз новые фоны должны подгрузиться с сервера, поэтому может потребоваться перезапустить браузер или немного подождать.
Открытые вкладки
Как вы уже могли догадаться, по умолчанию вкладки теперь отображаются сверху. Трудно было устоять после такого количества ваших отзывов. Конечно же, мы не забыли про прозрачность. Сайт просвечивает сквозь интерфейс, как бы намекая, что здесь он главный. Мы лишь слегка приглушили эффект прозрачности в сравнении с Кусто.
Группировка и окрашивание вкладок в цвета сайтов спровоцировали множество вопросов и требуют переосмысления, поэтому в Калипсо они доступны пока только для вкладок снизу.
Да, вы можете выбрать, где их расположить. Соответствующий пункт есть в контекстном меню. Над вкладками сейчас идет интенсивная работа. В следующих версиях их внешний вид и логика работы должны быть унифицированы. Мы также думаем над вариантом с боковыми вкладками. Мы верим, что в будущем расположение вкладок будет зависеть только от вкуса пользователя. Как вам такой макет?
Умная строка
Мы уже говорили, что не планируем прятать домен от посетителей, поэтому сейчас он наглядно представлен рядом с заголовком страницы. В текущей сборке домен будет справа от заголовка, но мы экспериментируем с вариантами, и в следующих обновлениях он может переехать (как на скриншоте).
Что будет, если кликнуть по адресной строке? В Кусто открывалась Изнанка, которая перекрывала собой весь сайт. К сожалению, это приводило к путанице и потере контекста. В Калипсо мы вернулись к истокам и показываем Табло. От тех идей, что лежат в основе Изнанки мы не отказались, но нам нужно время, чтобы придать им новую форму.
Поисковые подсказки в Калипсо, как и в Кусто, не только помогают уточнить запрос, но и предоставляют расширенную информацию. Например, текст из Википедии, картинки или ссылки на подстраницы сайта. Такие подсказки мы называем «Богатыми ответами». Выбрать альтернативную поисковую систему так же просто, как и в классическом интерфейсе.
Попробовать Яндекс.Браузер с интерфейсом Калипсо сейчас можно только в бета-версии для Windows. Для других ОС будет чуть позже. Эта сборка еще далека от финальной. Кое-где нужно поработать над оптимизацией. Да и в локализации есть пока пробелы. Багрепорты на другие найденные ошибки вы можете отправлять через жучка. Мы также будем внимательно следить за отзывами, которые вы можете смело оставлять в комментариях под этим постом.
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на части и выводить пользователю в определённый момент времени только одну из них.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько определённых частей.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально можно представить по-разному: в виде вкладок, группы кнопок и другими способами. По сути, они просто включают видимость какого-то одного блока с контентом, скрывая при этом другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type="radio" ) и CSS селекторе checked.
HTML и CSS код таба:
В этом варианте радиокнопки связаны с определённым label . Связь элемента label с input выполнена через атрибут for . Это действие необходимо для того, чтобы можно было скрыть элементы input , а управление ими (установку checked ) выполнять через клики по элементам label .
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
Отобразить вкладки можно по-разному. В следующем примере они визуально отображаются как кнопки .
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
В этом разделе разберём как можно создать табы на чистом JavaScript (без использования библиотеки jQuery).
Способ реализации вкладок с использованием JavaScript может потребоваться, когда в них нужно, например показывать динамический контент, получаемый через AJAX.
HTML и CSS код вкладок:
Инициализация табов на странице осуществляется с помощью вызова функции $tabs и передаче ей в качестве аргумента CSS селектора или DOM-элемента, содержащего вкладки:
При этом инициализирован будет только первый контейнер с вкладками, имеющий указанный класс.
Для того чтобы на странице инициализировать сразу все вкладки, имеющие этот класс, можно, например, использовать следующий код:
Кроме этого, если результат вызова функции $tabs сохранить в переменную, то можно использовать методы, которые она представляет.
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видеофайла.
Во элементах .player атрибут data-video-id определяет videoId ролика, а data-width и data-height - ширину и высоту iframe .
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание <iframe> и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
Приостанавливает воспроизведение видео будем посредством метода pauseVideo , а выполнять это после переключения вкладки (используя для этого событие tab.show ):
Описание исходного JavaScript кода
Исходный JavaScript код состоит из функции $tabs . Внутри этой функции имеется переменная _elemTabs и функции _showTab , _switchTabTo . Переменная _elemTabs хранит DOM-элемент, предоставляющий собой контейнер с вкладками. Метод _showTab предназначен для скрытия текущей (активной) вкладки и отображения другой в зависимости от переданной ему ссылки. Метод _switchTabTo используется для переключения вкладки по её порядковому номеру. Установка обработчиков событий для вкладок определяется с помощью addEventListener и выполняется в момент вызова $tabs .
Вне функции доступен только методы showTab и switchTabTo . Первый метод позволяет программно перейти на вкладку через передачу ему ссылки на DOM-элемент (ссылки), а второй - по её порядковому номеру.
Не используйте табы для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.
Используйте табы для группировки или фильтрации контента.
Не используйте табы для переключения состояний — для этого есть радиокнопка, тогл и переключатель.
Описание работы
Разделяйте табы и контент. Так интерфейс лучше читается.
Иногда табы и контент сложно разделить. Это допустимо. В этом случае расстояние между названиями табов и полосой уменьшите на 5 px.
Делайте кликабельную область большого размера, чтобы в нее проще было попасть курсором.
При наведении курсор превращается в палец, полоса у пункта показывается с прозрачностью 40%.
Выбранный пункт не реагирует на наведение курсора, курсор в палец не превращается.
При клике полоса переезжает к другому пункту с анимацией. Одновременно меняется ее ширина.
Название
Название таба должно однозначно говорить, что увидит пользователь после нажатия на таб.
Не называйте табы глаголами — в названии табов не должно быть действия.
Красьте полоску-маркер в фирменный цвет сервиса. Красный и зеленый — можно. Либо используйте синий по умолчанию.
Используйте один цвет на весь сервис.
Не красьте разные табы в разные цвета.
Не кодируйте цветом «хорошие» и «плохие» пункты.
Работа с клавиатурой
При переходе к меню клавишей Tab первый таб получает фокус — появляется синяя рамка. Стрелками можно перемещать фокус между табами. Если нажать клавишу Enter — произойдет переход:
Читайте также: