«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Далее на странице...

Что такое табы и как их использование может быть реализовано в JS?

На веб-странице нередко возникает необходимость вывести большое количество информации.

Чтобы эту информацию не отображать всю сразу, её делят на отдельные части, а затем, как правило, при кликах по ссылкам - выводят только одну порцию этих данных.

Итак, табы (вкладки) – это элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько секций.

Это набор ссылок или других HTML элементов, при нажатии на которые - включается видимость какого-либо одного блока с контентом и скрывается отображение другого/их блоков.

Табы используются для экономии места и более удобного представления информации на сайте - по названию таба/вкладки можно определить какое содержимое отобразится на странице, если нажать на неё.



Табы - Смена контента

Исходные код - что мы имеем?

Есть табы (вкладки/ссылки), при клике по которым должна происходить смена контента.

Изначально отображается содержимое только одного "таб-контента". Остальные блоки с аналогичным контентом закомментированы, так как иначе будет нагромождение.

Что нужно сделать?

Написать скрипт/реализовать функционал, согласно которому: при клике по ссылкам - табам, будет происходить смена контента.

Фрагмент HTML-кода

Скачать Архив с исходными данными

<div class="preview">
    <div class="bgc_blue"></div>
    <div class="container">
        <div class="tabcontainer">
            <div class="tabcontent">
                <img src="img/tabs/vegy.jpg" alt="vegy">
                <div class="tabcontent__descr">
                    Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством! 
                </div>
            </div>
            <!-- <div class="tabcontent">
                <img src="img/tabs/elite.jpg" alt="elite">
                <div class="tabcontent__descr">
                    Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!                                     
                </div>
            </div> -->
            <!-- <div class="tabcontent">
                <img src="img/tabs/post.jpg" alt="post">
                <div class="tabcontent__descr">
                    Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!                                     
                </div>
            </div>
            <div class="tabcontent">
                <img src="img/tabs/vegy.jpg" alt="vegy">
                <div class="tabcontent__descr">
                    Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
                </div>
            </div> -->
            <div class="tabheader">
                <h3>Выберите стиль питания</h3>
                <div class="tabheader__items">
                    <div class="tabheader__item tabheader__item_active">Фитнес</div>
                    <div class="tabheader__item">Премиум</div>
                    <div class="tabheader__item">Постное</div>
                    <div class="tabheader__item">Сбалансированное</div>
                </div>
            </div>
        </div>
        <div class="preview__life">Живи полной жизнью!</div>
    </div>
</div>

Исходная страница в Браузере

Далее будет реализована задача Создание табов в JS.

Табы - Пример скрипта

HTML-код

<div class="preview">
    <div class="bgc_blue"></div>
    <div class="container">
        <div class="tabcontainer">
            <div class="tabcontent">
                <img src="img/tabs/vegy.jpg" alt="vegy">
                <div class="tabcontent__descr">
                     Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством! 
                </div>
            </div>
            <div class="tabcontent">
                <img src="img/tabs/elite.jpg" alt="elite">
                <div class="tabcontent__descr">
                    Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!                                     
                </div>
            </div>
            <div class="tabcontent">
                <img src="img/tabs/post.jpg" alt="post">
                <div class="tabcontent__descr">
                    Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!                                     
                </div>
            </div>
            <div class="tabcontent">
                <img src="img/tabs/vegy.jpg" alt="vegy">
                <div class="tabcontent__descr">
                    Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
                </div>
            </div>
            <div class="tabheader">
                <h3>Выберите стиль питания</h3>
                <div class="tabheader__items">
                    <div class="tabheader__item tabheader__item_active">Фитнес</div>
                    <div class="tabheader__item">Премиум</div>
                    <div class="tabheader__item">Постное</div>
                    <div class="tabheader__item">Сбалансированное</div>
                </div>
            </div>
        </div>
        <div class="preview__life">Живи полной жизнью!</div>
    </div>
</div>	

JavaScript-код

'use strict';

window.addEventListener('DOMContentLoaded', () => {
    /* Получаем элементы: 
       1. Все табы/ссылки
       2. Все блоки со сменяемым контентом 
       3. Родительский DIV для всех табов */
   const tabs = document.querySelectorAll('.tabheader__item'),
         tabsContent = document.querySelectorAll('.tabcontent'),
         tabsParrent = document.querySelector('.tabheader__items');
    
   // Функция - Скрывает все Табы
   function hideTabContent(){
      tabsContent.forEach(item => {
         item.style.display = 'none';
      });

      // Удаляется Активный класс у Табов
      tabs.forEach(item => {
         item.classList.remove('tabheader__item_active');
      });
   }

   // Функция отображает содержимое i-го Таба и...
   // ... добавляет Активный класс к i-му Табу
   function showTabContent(i = 0){
      tabsContent[i].style.display = 'block';
      tabs[i].classList.add('tabheader__item_active');
   }

   // Скрываем все Табы и отображаем содержимое 0-го Таба - см. выше i = 0
   hideTabContent();
   showTabContent();

   // Для родителя Табов, для события клика - назначается обработчик. см. Делегирование событий
   tabsParrent.addEventListener('click', (event) => {
      const target = event.target; // Для удобства помещаем в переменную target -> event.target

      // Самый сложный момент - см. комментарии ниже
      if(target && target.classList.contains('tabheader__item')){
         tabs.forEach((item, i) => {
            if(target == item){
               hideTabContent();
               showTabContent(i);
            }
         });
      }
   });

});

Табы - Результат в Браузере

Здесь HTML-код уже раскомментирован. И написан js-скрипт по созданию табов. Скачать архив с исходниками можно выше.

Рассмотрим алгоритм действий. Какие задачи стояли?

1) Нужна функция, которая скрывает содержимое всех табов (все блоки с "таб-контентом").

2) Требуется показать содержимое нужного таба.

3) Назначить обработчик для самих табов (ссылок/вкладок) которые и будут управлять сменой контента.

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

Стоит отметить, что сначала назначается глобальный обработчик для события DOMContentLoaded.

Нововведение стандарта ES6 - Устанавливаем значение по умолчанию для i.

Самый сложный момент - см. стр. №40
  • Перебираем все Табы, чтобы выяснить - на каком Табе произошел клик?

  • target (event.target) - таб на котором произошел клик/событие.

  • item - это i-ый таб. И это самое i затем подставляется в функцию showTabContent(), которая отображает этот i-ый таб.

Инлайн стили и классы - CSS-анимация

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

Кроме этого, не всем нравится "резкое" переключение табов (смена таб-контента). Можно добавить css-анимацию.

Сначала добавляем новые стили в файл style.css.

CSS-код

.show{
	display: block;
}
.hide{
	display: none;
}
.fade{
	animation-name: fade; /* Добавляем Анимацию с именем fade */
	animation-duration: 1.5s; /* Продолжительность Анимации 1.5 секунды */
}
@keyframes fade{ /* Эффект для Анимации с именем fade */
	from{
		opacity: 0.1; /* ... от прозрачности 0,1 */
	}
	to{
		opacity: 1; /* ... до прозрачности 1 */
	}
}

Вносим изменения в js-файл

Оптимизация кода - Добавляем классы

1) Вместо строки №15 item.style.display = 'none'; из JS-кода выше.

Добавляем JS-код

item.classList.add('hide');
item.classList.remove('show');

Теперь чтобы скрыть все Табы - нужно для каждого Таба вместо инлайн-стиля style.display = 'none';: добавить класс hide и удалить класс show.

2) Редактируем строку №27 tabsContent[i].style.display = 'block'; из JS-кода выше.

Новый JS-код

tabsContent[i].classList.add('show');
tabsContent[i].classList.remove('hide');

Теперь чтобы отобразить содержимое i-го Таба - нужно для i-го Таба вместо инлайн-стиля style.display = 'block';: добавить класс show и удалить класс hide.

Что касается замены инлайн-стилей классами - на этом ВСЁ. При этом результат в браузере будет тот же, что и ранее в примере выше (изменился лишь js-код).

Добавляем Анимацию

В нашем случае, чтобы добавить Анимацию нужно: там, где добавляется класс show - добавить класс fade. И, соответственно, при удалении класса show - также удаляется и класс fade.

Итоговый JS-код

'use strict';

window.addEventListener('DOMContentLoaded', () => {
    /* Получаем элементы: 
       1. Все табы/ссылки
       2. Все блоки со сменяемым контентом 
       3. Родительский DIV для всех табов */
   const tabs = document.querySelectorAll('.tabheader__item'),
         tabsContent = document.querySelectorAll('.tabcontent'),
         tabsParrent = document.querySelector('.tabheader__items');
    
   // Функция - Скрывает все Табы
   function hideTabContent(){
      tabsContent.forEach(item => {
         // Добавляем класс hide. Удаляем класс show и Анимацию fade
         item.classList.add('hide');
         item.classList.remove('show', 'fade');
      });

      // Удаляется Активный класс у Табов
      tabs.forEach(item => {
         item.classList.remove('tabheader__item_active');
      });
   }

   // Функция отображает содержимое i-го Таба и...
   // ... добавляет Активный класс к i-му Табу
   function showTabContent(i = 0){
      // Добавляем класс show и Анимацию fade. Удаляем класс hide
      tabsContent[i].classList.add('show', 'fade');
      tabsContent[i].classList.remove('hide');
      tabs[i].classList.add('tabheader__item_active');
   }

   // Скрываем все Табы и отображаем содержимое 0-го Таба - см. выше i = 0 
   hideTabContent();
   showTabContent();

   // Для родителя Табов, для события клика - назначается обработчик. см. Делегирование событий
   tabsParrent.addEventListener('click', (event) => {
      const target = event.target; // Для удобства помещаем в target -> event.target

      // Самый сложный момент - см. комментарии в примере выше...
      if(target && target.classList.contains('tabheader__item')){
         tabs.forEach((item, i) => {
            if(target == item){
               hideTabContent();
               showTabContent(i);
            }
         });
      }
   });

});

Табы - Добавляем Анимацию - Результат в Браузере

Итак, здесь при создании Табов в JS вместо инлайн-стилей были добавлены классы. А также добавлена Анимация при переключении содержимого Табов.



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432
Популярные заметки
Последние заметки