что такое табы в интерфейсе
Табы сверху? Развитие нового интерфейса Яндекс.Браузера
Мы продолжаем дорабатывать новый интерфейс Яндекс.Браузера и постепенно двигаемся к варианту, который можно сделать доступным для всех. Делаем мы это внимательно, изучая отзывы пользователей на то, что уже было сделано. Сегодня – новая бета-версия для Windows, получившая название Калипсо и основанная на наиболее удачных решениях из проекта Кусто.
В конце прошлого года мы показали публике (в том числе на Хабре) альфа-версию нового дизайна и попросили помочь с тестированием. Благодаря этому, нашей команде удалось проверить идеи в реальных условиях, разделить их на те, которые понятны людям, и те, которые нуждаются в дальнейшей доработке. Калипсо — это объединение привычных решений из классического интерфейса с хорошими идеями из Кусто. Среди них видеофоны, прозрачный интерфейс, поиск с богатыми ответами, обновленные инфобары и многие другие.
Новая вкладка
Новая вкладка в Калипсо очищена от бесполезных серых панелей, а все доступное пространство отведено под анимированный видеофон. Одновременно с этим мы вернули возможность переключаться между Табло, загрузками, дополнениями и недавно закрытыми сайтами.
Кстати, дизайнеры обновили более половины встроенных фонов и дали возможность пользователям загружать собственные картинки. В этот раз новые фоны должны подгрузиться с сервера, поэтому может потребоваться перезапустить браузер или немного подождать.
Как вы уже могли догадаться, по умолчанию вкладки теперь отображаются сверху. Трудно было устоять после такого количества ваших отзывов. Конечно же, мы не забыли про прозрачность. Сайт просвечивает сквозь интерфейс, как бы намекая, что здесь он главный. Мы лишь слегка приглушили эффект прозрачности в сравнении с Кусто.
Группировка и окрашивание вкладок в цвета сайтов спровоцировали множество вопросов и требуют переосмысления, поэтому в Калипсо они доступны пока только для вкладок снизу.
Да, вы можете выбрать, где их расположить. Соответствующий пункт есть в контекстном меню. Над вкладками сейчас идет интенсивная работа. В следующих версиях их внешний вид и логика работы должны быть унифицированы. Мы также думаем над вариантом с боковыми вкладками. Мы верим, что в будущем расположение вкладок будет зависеть только от вкуса пользователя. Как вам такой макет?
Мы уже говорили, что не планируем прятать домен от посетителей, поэтому сейчас он наглядно представлен рядом с заголовком страницы. В текущей сборке домен будет справа от заголовка, но мы экспериментируем с вариантами, и в следующих обновлениях он может переехать (как на скриншоте).
Что будет, если кликнуть по адресной строке? В Кусто открывалась Изнанка, которая перекрывала собой весь сайт. К сожалению, это приводило к путанице и потере контекста. В Калипсо мы вернулись к истокам и показываем Табло. От тех идей, что лежат в основе Изнанки мы не отказались, но нам нужно время, чтобы придать им новую форму.
Поисковые подсказки в Калипсо, как и в Кусто, не только помогают уточнить запрос, но и предоставляют расширенную информацию. Например, текст из Википедии, картинки или ссылки на подстраницы сайта. Такие подсказки мы называем «Богатыми ответами». Выбрать альтернативную поисковую систему так же просто, как и в классическом интерфейсе.
Попробовать Яндекс.Браузер с интерфейсом Калипсо сейчас можно только в бета-версии для Windows. Для других ОС будет чуть позже. Эта сборка еще далека от финальной. Кое-где нужно поработать над оптимизацией. Да и в локализации есть пока пробелы. Багрепорты на другие найденные ошибки вы можете отправлять через жучка. Мы также будем внимательно следить за отзывами, которые вы можете смело оставлять в комментариях под этим постом.
Табы Tabs
Табы группируют контент и помогают в навигации.
Когда использовать
Используйте табы для второстепенной навигации.
Не используйте табы для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.
Используйте табы для группировки или фильтрации контента.
Не используйте табы для переключения состояний — для этого есть радиокнопка, тогл и переключатель.
Описание работы
Разделяйте табы и контент. Так интерфейс лучше читается.
Иногда табы и контент сложно разделить. Это допустимо. В этом случае расстояние между названиями табов и полосой уменьшите на 5 px.
Делайте кликабельную область большого размера, чтобы в нее проще было попасть курсором.
При наведении курсор превращается в палец, полоса у пункта показывается с прозрачностью 40%.
Выбранный пункт не реагирует на наведение курсора, курсор в палец не превращается.
При клике полоса переезжает к другому пункту с анимацией. Одновременно меняется ее ширина.
Название
Название таба должно однозначно говорить, что увидит пользователь после нажатия на таб.
Называйте табы существительными или прилагательными в значении существительных. Например, «Документы», «Товары», «Сообщения», «Новое».
Не называйте табы глаголами — в названии табов не должно быть действия.
Красьте полоску-маркер в фирменный цвет сервиса. Красный и зеленый — можно. Либо используйте синий по умолчанию.
Используйте один цвет на весь сервис.
Не красьте разные табы в разные цвета.
Не кодируйте цветом «хорошие» и «плохие» пункты.
Работа с клавиатурой
При переходе к меню клавишей Tab первый таб получает фокус — появляется синяя рамка. Стрелками можно перемещать фокус между табами. Если нажать клавишу Enter — произойдет переход:
Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на части и выводить пользователю в определённый момент времени только одну из них.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько определённых частей.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально можно представить по-разному: в виде вкладок, группы кнопок и другими способами. По сути, они просто включают видимость какого-то одного блока с контентом, скрывая при этом другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.
HTML и CSS код таба:
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
В этом разделе разберём как можно создать табы на чистом JavaScript (без использования библиотеки jQuery).
Способ реализации вкладок с использованием JavaScript может потребоваться, когда в них нужно, например показывать динамический контент, получаемый через AJAX.
HTML и CSS код вкладок:
При этом инициализирован будет только первый контейнер с вкладками, имеющий указанный класс.
Для того чтобы на странице инициализировать сразу все вкладки, имеющие этот класс, можно, например, использовать следующий код:
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видеофайла.
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
Описание исходного JavaScript кода
Простые адаптивные вкладки (табы) для сайта на JavaScript и CSS
Дата публикации: 2015-11-03
От автора: в данной статье мы рассмотрим, как сделать макет из нескольких адаптивных вкладок (табов) для сайта на JavaScript и CSS 3, который просто отлично подходит в тех случаях, когда необходимо вместить много связанного контента в маленькой и компактной области.
Часто вкладки можно встретить в блогах в виде виджетов сайдбаров, в которых, обычно, отображаются последние или любимые посты, или категории. Но помимо второстепенной роли вкладкам (табам) также отводят и главную роль на страницах. К счастью создавать вкладки (табы) для сайта не такое и сложное занятие. В этой статье мы рассмотрим все, что необходимо для их создания, даже позаботимся о устаревших браузерах с выключенным JS. Давайте разберем структуру и разметку вкладок.
Структура и разметка
Итак, наша структура включает в себя:
Секцию меню с вкладками. Активная вкладка подсвечивается
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
И сами вкладки, которые или спрятаны, или видны
Вся конструкция помещается в главный DIV, который будет использоваться в JS для нахождения дочерних элементов. Начнем разметку:
Значение для идентификатора можно взять любое, оно пригодится позже в JavaScript. Также обратите внимание на класс no-js, его мы будем удалять перед манипуляциями с JS. Если вы работали с библиотеками с методом обнаружения поддерживаемых свойств, как Modernizr, то вам это будет знакомо. Добавим меню:
Я сразу сделал первую вкладку активной, первый индекс в JavaScript будет 0. Обратите внимание на то, что количество вкладок может изменяться, но обязательно необходимо, чтобы количество табов и ссылок на них было равным. Перейдем к вкладкам: каждая вкладка это отдельный DIV. У первого блока сразу добавлен класс is-active. Конечная разметка выглядит так:
На данном этапе в браузере будет просто куча элементов в одном ряду, но мы это поправим в CSS.
Добавляем стили в CSS
Замечание: я использую flexbox, для автоматической генерации вендорных префиксов autoprefixer с Gulp. В CSS ниже я не писал вендорные префиксы. Если вам нужна готовая версия, она есть на GitHub. Блоки c-tabs как таковых стилей не требуют, так что начнем с меню. Меню у нас состоит из набора ссылок, ниже я добавил немного стилей:
Пройдемся по стилям меню. Основной контейнер это элемент flexbox с классом c-tabs-nav. Каждая ссылка это резиновый элемент с классом c-tabs-nav__link, который растягивается так, чтобы вместить все элементы с небольшими отступами между ссылок. На каждую ссылку вешается событие клика для переключения между вкладок. Также ссылки будут менять свое состояние в зависимости от того, навели на них мышку или кликнули. В демо у каждой ссылки своя иконка и текст в тегах I и span соответственно. На маленьких экранах текст в span скрывается для экономии места. Сделать это можно простым медиа запросом, который мы добавим в конец файла.
Теперь рассмотрим стили для конкретной вкладки:
Ну тут все просто и интуитивно понятно, но все же пройдемся поэтапно. Каждому табу присвоен класс c-tab, все вкладки спрятаны по умолчанию (display: none). Если к элементу добавляется класс is-active, то значение свойства display меняется на block. Класс c-tab__content отвечает за область контента внутри вкладки, функциональной нагрузки он не несет. Хотя через него можно напрямую обращаться ко вкладкам, не трогая основной контейнер.
На данном этапе у вас на экране уже должно быть что-то привлекательное. Но по клику по ссылкам меню ничего не происходит! Без паники, сейчас исправим.
Вдохнем жизнь при помощи JS
Давайте поэтапно распишем, чего мы хотим добиться с помощью JS:
Нам необходимо каким-то образом найти компоненты, чтобы потом их настроить
Нужно как-то инициализировать компоненты
Необходимо проверить, на все ли вкладки навешены обработчики события
Нам нужен метод для перехода к указанной вкладке, который можно вызывать как внутри, так и из разметки
И в конце концов, нужно получить доступ к нашим компонентам, т.е. необходимо добавить их в глобальное пространство имен
Теперь настроим нашу функцию и сделаем ее глобальной:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Обратите внимание, что функция tabs принимает один аргумент option. Добавим пару переменных в кэш, сделав их доступными для следующей нашей функции:
Мы инициализировали пять переменных:
El – содержит элемент, найденный по селектору через option
tabNavigationLinks – коллекция ссылок меню с определенным классом, полученных через option
tabContentContainers – контент вкладок с определенными классами, полученный через option
activeIndex – индекс активной вкладки, по умолчанию равен 0
initCalled – булево значение, по умолчание равно false. Используется для проверки, вызывалась ли функция init, т.к. более одного раза данную функцию вызывать не нужно.
Подумаем дальше. Нам нужна какая-то функция, которая будет пробегаться по всем ссылкам вкладок и вешать на них обработчики событий, а также удалять класс no-js. И, естественно, нужна функция для обработки этих событий. И, наконец, нужна функция, которая будет переключать нас на заданную вкладку по ее индексу, которая будет вызываться из функции обработчика. Забегая наперед, нам нужно сделать так, чтобы функцию инициализации и функцию по переходу на конкретную вкладку можно было вызывать в любом месте. Благодаря нашему JS и переменной initCalled со значением по умолчанию false, мы можем быстро вернуться из любой функции обратно в инициализатор. Ниже представлен код:
Мобильные паттерны навигации
Как делать правильно и удобно
Подумал я о следующем: на чем же больше всего народу ломается в попытке сделать что-то хорошее? Вариантов, конечно же, тонна и маленькая тележка, но один из них самый страшный и ужасный — Навигация.
Начинающие свой путь в гуях и уиксах дизайнеры натыкаются на нее родимую сразу, а читать гайдлайны (где тоже про навигацию отведено где-то около 1/50 всего объема) никогда не было модно. Как и инструкцию от бытовой техники… Ну да Бог с ними, с гайдами, все равно потом прочтете и не один раз.
Какие паттерны бывают?
Как таковых, паттернов навигации не то чтобы вон как много. Давайте их перечислим:
Но прежде чем рассмотреть каждый из них, давайте разберемся с понятием “Погружение”.
Иерархия
Пользователь путешествует по аппу при помощи погружения внутрь (вниз по иерархии). Также этот термин зовут Pushin, drill down. Суть название не меняет ибо в 99.9% случаев в мобильных аппах навигация погружная.
На практике погружение означает следующее: Вася ткнул палец в какую-то ячейку (строчку, кнопку, иконку, картинку), и вдруг он буквально проваливается внутрь этого объекта и оказывается на другой экран. Этот другой экран обычно хранит информацию о верхнем объекте в развернутом виде.
Схематично выглядит это примерно так:
А теперь обратите внимание: слева на страницах “ООО “Рога и копыта” и “Профиль” есть стрелочка-кнопочка “Назад”! Тапнув по ней наш герой “поднимается” на уровень выше.
И самое главное! Кто заметил, что на главной странице “Контрагенты” нет кнопочки-стрелочки “Назад”?
Молодец, дорогой читатель, ее там просто НЕ МОЖЕТ БЫТЬ потому что подняться на уровень выше мы не сможем ибо некуда уже.
Это было просто. Но не все это понимают, к сожалению. Кстати, уровней иерархии может быть бесконечно много, но все же стоит спроектировать систему так, чтобы пользователь не мог гулять на 20 уровней иерархии вглубь аппа. 5–6 уровней вложенности будет за глаза иначе пользователь в какой-то момент гарантированно потеряется и будет страдать.