jQuery

В этой статье рассмотрим разработку простейшего скрипта степпера. Степпер — такой скрипт, который переключает экраны/слайды по нажатию на кнопки вперед или назад. Определения так себе, но думаю по примеру будет понятнее что это такое и для чего оно нужно.

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

Подключаем библиотеки

Нам понадобится:

1. bootstrap. Нам он просто облегчит подключение шрифтов и визуализацию кнопок
2. font-awesome. От него мы получим три иконки (стрелка назад, вверх и вперед)
3. animate.css, для простенькой анимации (вам никто не мешает использовать чистый css для этого)
4. jquery, да-да, пора от него отказываться и отлавливать события на чистом JS. Но пока что лень)

А выглядит это так:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

читать полностью...

В этом уроке рассмотрим, как самостоятельно реализовать дружественные СЕО табы на flex и jQuery.
Наш код будет разделен на три части.

HTML код

Первое. HTML код без которого никуда:

<div class="tabs" data-tabs="name">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Вкладка 1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Вкладка 2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Вкладка 3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Содержимое вкладки 1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Содержимое вкладки 2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Содержимое вкладки 3
		</div>
	</div>
</div>

грубо говоря, наш код состоит из трех частей:

1. Обертки для табов, с названием одной группы. Это задано в дата-свойстве «data-tabs».
2. В наших табах (или вкладках). Где у каждой вкладки есть свое название, определенное в свойстве «data-tab-item». Название данного свойства должно совпадать с одним из названий свойств «data-tab-content» в блоках хранящих содержимое вкладок (табов).
3. Содержимое табов, обернутое в класс «tab-contents». Каждое содержимое таба имеет свойство «data-tab-content», и должно совпадать с одним из свойств вкладок «data-tab-item». Данные свойства служат для сопоставления того, какой таб, какое содержимое должен отображать.

читать полностью...