<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

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

Подписавшись по 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):

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