Підключення сторонніх плагінів

Загальні відомості

Плагіни jQuery у більшості випадків підключаються таким чином:

<script src="jquery.js"></script>
<script src="jquery.plugin.js"></script>
<script src="script.js"></script>

(function($){

  $('селектор').назва_плагіна(опції);
  $змінна.назва_плагіна(опції);

  $('input[type="phone"]').mask("+38(099) 999-99-99");
  $('.slider').bxSlider({duration: 3000});
  $('.box').niceScroll();
  $(window).Scrollax();

})(jQuery);

До кожного популярного плагіна є API-документація, в якій описано для чого потрібен плагін, як правильно його використовувати, які налаштування, опції є. Також можна переглянути демки.

Розглянемо декілька плагінів, щоб розібратися як їх використовувати.

Masked Input Plugin

Masked Input Plugin.

Даний плагін дозволяє задати маску вводу для полів вводу.

Завдання.

  1. Створіть форму з декількома полями вводу.
  2. Добавте поле вводу телефону та встановіть маску вводу щоб можна було вводити тільки номери хмельницьких міських АТС.
  3. Добавте поле вводу дати народження і відповідну маску.
  4. Добавте поле вводу суми платежу в грн.

Повзунок NoUiSlider

NoUiSlider Plugin.

Даний плагін не потребує бібліотеки jQuery.

Плагін дозволяє добавити на сторінку повзунки для зручного вводу числових (і не тільки) даних, проміжків.

На англійській мові подібні повзунки називаються слайдерами, що вносить деяку плутанину з наступним типом плагінів у вітчизняних розробників.

Завдання.

  1. Добавте в форму повзунок кількості одиниць товарів.
  2. Добавте в форму повзунок для задання проміжку цін.
  3. Добавте в форму повзунок вибору кольору одиниці товару.
  4. В перший повзунок добавте шкалу.

Слайдер Cycle2

Велика група плагінів - слайдери, анімовані галереї, каруселі (slideshow gallery, carousel).

Один з функціональніших - Cycle2 Slider.

Однією з особливостей цього слайдера - його можна підключити в проект і налаштувати не написавши жодної строки кода.

Як правило, галерея - це набір зображень або блоків однакового розміру, їх зручно робити у вигляді списків.

Галерея може доповнюватися елементами керування: кнопками-стрілками, кнопками індикації слайдів, мініатюрами.

Завдання.

  1. Розгляньте демки цього плагіна.
  2. Перегляньте можливості плагіна в API-документації.
  3. Створіть дві галереї на сайті: одну із зображеннями, другу - з блоками тексту, фонами: <div>
      <img src="..." alt="slide 1">
      <img src="..." alt="slide 2">
      <img src="..." alt="slide 3">
      <img src="..." alt="slide 4">
    </div>

    <ul>
      <li>
        <strong>1. Lorem ipsum</strong>
        <span>Понеділок dolor sit amet, consectetur adipisicing elit...</span>
      </li>
      <li>
        <strong>2. Lorem ipsum</strong>
        <span>Вівторок dolor sit amet, consectetur adipisicing elit...</span>
      </li>
      <li>
        <strong>3. Lorem ipsum</strong>
        <span>Середа dolor sit amet, consectetur adipisicing elit...</span>
      </li>
    </ul>
  4. Першу галерею підключіть за допомогою JS.
  5. Другу галерею підключіть без JS.
  6. Налаштуйте обидві галереї: добавте елементи керування, налаштуйте швидкість переключення слайдів, тривалість перерви між переключеннями, добавте паузу при наведенні миші на галерею.
  7. Дослідіть команди слайдера. Добавте альтернативні кнопки керування: наступний слайд, попередній слайд, пауза, запуск.
  8. Дослідіть події слайдера. Добавте в кожен слайд дата-атрибут з кольором. Добавте обробник подій на переключення слайда і міняйте фон body відповідно до кольору, прописаному в слайді.