📘 Урок 12: jQuery UI — что это, как использовать, основные виджеты и эффекты

Цель: познакомиться с jQuery UI — официальной библиотекой виджетов и эффектов для jQuery, научиться подключать и использовать её базовые компоненты.

---

🔹 Что такое jQuery UI?

jQuery UI — расширение для jQuery, включающее:

• Готовые визуальные виджеты (календарь, вкладки, диалоговые окна)

• Анимационные эффекты (плавное появление, переключение)

• Функции drag-and-drop (перетаскивание элементов)

• Интерактивные компоненты (слайдеры, прогресс-бары)

Это официальный и широко используемый набор, позволяющий быстро создавать интерфейсы с минимальным кодом.

---

🔸 Подключение jQuery UI

1. Подключи jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

1. Подключи jQuery UI CSS и JS (CDN):

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

---

🔸 Основные виджеты jQuery UI

1. Datepicker — календарь выбора даты

<input type="text" id="datepicker">
<script>
  $('#datepicker').datepicker();
</script>

---

2. Tabs — вкладки

<div id="tabs">
  <ul>
    <li><a href="#tab-1">Вкладка 1</a></li>
    <li><a href="#tab-2">Вкладка 2</a></li>
  </ul>
  <div id="tab-1">Контент первой вкладки</div>
  <div id="tab-2">Контент второй вкладки</div>
</div>

<script>
  $('#tabs').tabs();
</script>

---

3. Dialog — модальное окно

<div id="dialog" title="Пример окна" style="display:none;">
  <p>Это содержимое диалогового окна</p>
</div>

<button id="openDialog">Открыть окно</button>

<script>
  $('#dialog').dialog({ autoOpen: false });
  $('#openDialog').click(function() {
    $('#dialog').dialog('open');
  });
</script>

---

4. Slider — ползунок

<div id="slider"></div>
<script>
  $('#slider').slider({
    min: 0,
    max: 100,
    value: 50,
    slide: function(event, ui) {
      console.log('Значение: ' + ui.value);
    }
  });
</script>

---

5. Progressbar — индикатор загрузки

<div id="progressbar"></div>
<script>
  $('#progressbar').progressbar({ value: 70 });
</script>

---

🔸 Эффекты jQuery UI

jQuery UI добавляет много эффектов к jQuery, например:

• effect('bounce') — прыжок

• effect('shake') — тряска

• effect('explode') — разлёт по частям

• effect('slide') — сдвиг

• effect('fade') — плавное появление/исчезновение

Пример:

$('#box').effect('bounce', { times: 3 }, 300);

---

🔸 Drag & Drop

Перетаскиваемый элемент

$('#drag').draggable();

Зона для сброса

$('#drop').droppable({
  drop: function(event, ui) {
    alert('Элемент сброшен!');
  }
});

---

🔸 Настройка тем и стилей

jQuery UI поддерживает темы. Можно выбрать готовую тему или создать свою на https://jqueryui.com/themeroller/ .

---

📋 Практические задания

1. Добавь к форме календарь выбора даты.

2. Сделай вкладки с контентом для сайта.

3. Реализуй модальное окно с информацией.

4. Создай ползунок для выбора значения.

5. Сделай перетаскиваемый элемент и зону сброса.

---

❗ Частые ошибки

❌ Не подключен jQuery UI CSS

Виджеты отображаются без стилей.

---

❌ Конфликт версий jQuery и jQuery UI

Используй совместимые версии.

---

📌 Заключение

jQuery UI — мощный и удобный инструмент для создания интерактивных компонентов и эффектов. Он ускоряет разработку и позволяет создавать приятные интерфейсы с минимумом кода.