JavaScript

Урок 3. Подключение стилей и JS скриптов к плагину автокомлпита постов
Урок 3. Подключение стилей и JS скриптов к плагину автокомлпита постов

Продолжаем разработку плагина «wp-post-autocomplete». В сегодняшней статье мы подключим стили, js файл и библиотеку autocomplete от фреймворка jQuerty (который по умолчанию идет с движок WP).

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

Как сделать простые табы плагином на jQuery
Как сделать простые табы плагином на jQuery

Данная статья — это продолжение статьи о табах на jQuery и flexbox. Сегодня мы модифицируем наш скрипт, и реализуем его в виде jQuery плагина немного усовершенствовав.
И первое что мы сделаем, это разнесем логику скрипта на два файла:

  1. Стили. Они останутся не измены, мы их просто перенесем из html документа в файл «jquery.tab-light.css».
  2. JavaScript. Его код перенесем в файл «jquery.tab-light.js»

Так же, не забудьте подключить выше описанные файлы в ваш html документ.

Второе. Назовем наш плагин «tabLight» (т. е. простой). Данное название мы будет использовать в JS коде.

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

Как сделать кнопку «наверх» / to-top с плавной прокруткой
Как сделать кнопку «наверх» / to-top с плавной прокруткой

Здравствуйте! В сегодняшнем уроке, рассмотрим реализацию простого кода кнопки «вверх» на Html, jquery и css.

Как и всегда, приступаем к рассмотрению HTML кода. Сегодня он будет довольно примитивный:


<div class="to-top" data-btn="toTop">
	&#10145;
</div>

где:
to-top — класс, используя который мы будем стилизировать нашу кнопку
data-btn="toTop" — дата-атрибут, используя который мы будем отслеживать события скрола и клика по кнопке (да-да, мы можем это сделать и по классу «to-top», я же остановился на дата-атрибуте)

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

Как написать самый простой скрипт степпера
Как написать самый простой скрипт степпера

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

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

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

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

  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>

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

Как сделать табы на flexbox и jQuery
Как сделать табы на flexbox и jQuery

В этом уроке рассмотрим, как самостоятельно реализовать дружественные СЕО табы на 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». Данные свойства служат для сопоставления того, какой таб, какое содержимое должен отображать.

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