<MyRusakov.ru />

Создание нейросетей на Python

Создание нейросетей на Python

Этот курс научит Вас созданию нейросетей на Python. Курс рассчитан на начинающих. Вся информация идёт от простого к сложному очень маленькими шажками. При этом глубокое знание математики не требуется. Поскольку в курсе Вы будете получать эти знания по мере необходимости.

Из курса Вы узнаете всю необходимую теорию и терминологию. Научитесь создавать нейросети самых разных архитектур и обучать их. Также Вы создадите собственный фреймворк. Что очень важно проделать для грамотного использования того же PyTorch. Затем Вы изучите и сам PyTorch.

Помимо уроков к курсу идут упражнения для закрепления материала.

Ещё Вы получите Бонусы, дополняющие основной курс: "Распознавание изображений", "Анализ настроения по тексту отзыва", "Программирование на Python с Нуля до Гуру".

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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