<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Плагин для табов для Frontend разработчика

Плагин для табов для Frontend разработчика

Easytabs - это популярный jQuery плагин среди Frontend разработчиков, который прост в использовании и понятен новичкам. Я надеюсь, что после прочтения этой статьи, вы уже сразу можете применить данный плагин табов на своем реальном проекте.

Плагин для табов для Frontend разработчика.

Официальный сайт плагина: https://os.alfajango.com/easytabs/

Подключение Easytabs и Bootstrap

На сайте https://cdnjs.com/ можно найти CDN ссылки на любой плагин или фреймворк. В поле поиска вбиваем название и копируем код в HTML-файл. Между тегами head подключаем Bootstrap для красоты и экономии времени, ссылку скачиваем напрямую с сайта.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Между тегами script в теге body подключим сам плагин easytabs, библиотеку jQuery и плагин hashchange.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-hashchange/1.3/jquery.ba-hashchange.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.easytabs/3.2.0/jquery.easytabs.min.js"></script>

HTML разметка

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

<div id="tab-container">
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#tab-1">Easytabs 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#tab-2">Easytabs 2</a>
  </li>
<li class="nav-item">
    <a class="nav-link" href="#tab-3">Easytabs 3</a>
  </li>
</ul>
<div class="tab-content">
  <p class="mb-0" id="tab-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit tellus, lacinia non maximus non, egestas sit amet mauris. Curabitur erat dui, iaculis ac tempor nec, luctus id mi.</p>
  <p class="mb-0" id="tab-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non arcu eu mi pulvinar sollicitudin. Curabitur sit amet justo mauris.</p>
  <p class="mb-0" id="tab-3">Vestibulum suscipit urna ultrices velit dictum, vel laoreet lorem tincidunt. Donec eget mi gravida est faucibus accumsan.</p>
</div>
</div>

В HTML-коде мы прописали Bootstrap классы чисто для красоты и чтобы не тратить время на написание собственных CSS стилей. Стили заданы только для контейнера. Отодвинем контейнер tab-container от окна браузера маржином и ограничим его ширину наполовину.

#tab-container {
  width: 50%;
  margin: 20px 200px;
  }

Метод easytabs

К нашему контейнеру нужно вызвать метод easytabs.

$('#tab-container').easytabs();

Добавим функцию загрузки DOM дерева и поместим код ниже остальных скриптов.

<script type="text/javascript">
  $(document).ready(function()
  { $('#tab-container').easytabs();
  });
</script>

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

Дополнительные настройки EasyTabs

Настройки можно посмотреть во вкладке Configuration - опция defaultTab.

По умолчанию открывается Easytabs 1, но это можно изменить, добавив код внутри метода easytabs, теперь по умолчанию будет стоять tab-2.

defaultTab: li#tab-2

по аналогии, можно поиграться и с другими настройками плагина EasyTabs.

Код целиком и результат

See the Pen Плагин Easytabs by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.