Продолжаем разработку плагина «wp-post-autocomplete». В сегодняшней статье мы подключим стили, js файл и библиотеку autocomplete от фреймворка jQuerty (который по умолчанию идет с движок WP).
JavaScript
Данная статья — это продолжение статьи о табах на jQuery и flexbox. Сегодня мы модифицируем наш скрипт, и реализуем его в виде jQuery плагина немного усовершенствовав.
И первое что мы сделаем, это разнесем логику скрипта на два файла:
- Стили. Они останутся не измены, мы их просто перенесем из html документа в файл «jquery.tab-light.css».
- JavaScript. Его код перенесем в файл «jquery.tab-light.js»
Так же, не забудьте подключить выше описанные файлы в ваш html документ.
Второе. Назовем наш плагин «tabLight» (т. е. простой). Данное название мы будет использовать в JS коде.
Здравствуйте! В сегодняшнем уроке, рассмотрим реализацию простого кода кнопки «вверх» на Html, jquery и css.
Как и всегда, приступаем к рассмотрению HTML кода. Сегодня он будет довольно примитивный:
<div class="to-top" data-btn="toTop"> ➡ </div>
где:
to-top — класс, используя который мы будем стилизировать нашу кнопку
data-btn="toTop" — дата-атрибут, используя который мы будем отслеживать события скрола и клика по кнопке (да-да, мы можем это сделать и по классу «to-top», я же остановился на дата-атрибуте)
В этой статье рассмотрим разработку простейшего скрипта степпера. Степпер — такой скрипт, который переключает экраны/слайды по нажатию на кнопки вперед или назад. Определения так себе, но думаю по примеру будет понятнее что это такое и для чего оно нужно.
Лично мне, приходилось раза два или три использовать примерную реализацию данного скрипта в своих работах. И подумал я, почему бы не написать нормальную заготовку для будущих подобных задач, и выложить ее в качестве статьи блога.
Подключаем библиотеки
Нам понадобится:
- bootstrap. Нам он просто облегчит подключение шрифтов и визуализацию кнопок
- font-awesome. От него мы получим три иконки (стрелка назад, вверх и вперед)
- animate.css, для простенькой анимации (вам никто не мешает использовать чистый css для этого)
- 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>
грубо говоря, наш код состоит из трех частей:
- Обертки для табов, с названием одной группы. Это задано в дата-свойстве «data-tabs».
- В наших табах (или вкладках). Где у каждой вкладки есть свое название, определенное в свойстве «data-tab-item». Название данного свойства должно совпадать с одним из названий свойств «data-tab-content» в блоках хранящих содержимое вкладок (табов).
- Содержимое табов, обернутое в класс «tab-contents». Каждое содержимое таба имеет свойство «data-tab-content», и должно совпадать с одним из свойств вкладок «data-tab-item». Данные свойства служат для сопоставления того, какой таб, какое содержимое должен отображать.