Lekcja 18: jQuery UI - Wprowadzenie i Widgety

jQuery UI to oficjalna biblioteka interfejsu użytkownika zbudowana na bazie jQuery. Dostarcza zestawu gotowych do użycia, konfigurowalnych widgetów (np. Datepicker, Dialog, Autocomplete, Tabs), interakcji (np. Draggable, Droppable, Resizable, Sortable) oraz zaawansowanych efektów wizualnych. Ułatwia tworzenie bogatych i interaktywnych interfejsów bez konieczności pisania złożonego kodu JavaScript i CSS od zera.

Podstawy jQuery UI

• Zależność od jQuery: jQuery UI wymaga dołączenia biblioteki jQuery (w odpowiedniej wersji) przed jej własnym kodem.
• Modułowość: Można pobrać całą bibliotekę lub tylko wybrane komponenty (widgety, interakcje, efekty), aby zminimalizować rozmiar plików.
• Styling (Theming): jQuery UI posiada rozbudowany system motywów (themes), który pozwala na łatwe dostosowanie wyglądu widgetów. Dostępnych jest wiele gotowych motywów (np. w ThemeRoller), a także możliwość tworzenia własnych.
• API Widgetów: Widgety jQuery UI inicjalizuje się podobnie jak wtyczki jQuery, wywołując metodę o nazwie widgetu na selektorze (np. $("#datepicker").datepicker();). Oferują one bogaty zestaw opcji konfiguracyjnych, metod do interakcji programistycznej oraz zdarzeń do obsługi interakcji użytkownika.

Dołączanie jQuery UI

Najprostszym sposobem jest użycie CDN:

<!-- 1. Dołącz CSS motywu jQuery UI (np. podstawowy motyw "base" lub inny z ThemeRoller) -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- 2. Dołącz jQuery (przed jQuery UI) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 3. Dołącz jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Można również pobrać niestandardowy zestaw komponentów i motyw ze strony jQuery UI i dołączyć pliki lokalnie.

Przykłady Popularnych Widgetów

Datepicker (Selektor Daty)

Umożliwia łatwe wybieranie daty z interaktywnego kalendarza.

<label for="data-urodzenia">Data urodzenia:</label>
<input type="text" id="data-urodzenia" name="data-urodzenia">

<script>
$(function() {
  $("#data-urodzenia").datepicker({
    dateFormat: "dd.mm.yy", // Format daty (np. 24.12.2024)
    changeMonth: true,      // Pozwól na zmianę miesiąca z listy rozwijanej
    changeYear: true,       // Pozwól na zmianę roku z listy rozwijanej
    yearRange: "-100:+0",   // Zakres lat do wyboru (100 lat wstecz od teraz)
    // Polskie nazwy miesięcy i dni (można też dołączyć plik lokalizacji)
    monthNames: ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"],
    dayNamesMin: ["Nd", "Pn", "Wt", "Śr", "Cz", "Pt", "So"]
  });
});
</script>

Dialog (Okno Dialogowe)

Tworzy modalne lub niemodalne okna dialogowe z treścią HTML.

<!-- Treść okna dialogowego (początkowo ukryta) -->
<div id="moje-okno" title="Potwierdzenie" style="display:none;">
  <p>Czy na pewno chcesz wykonać tę akcję?</p>
</div>

<button id="pokaz-dialog">Pokaż Dialog</button>

<script>
$(function() {
  // Inicjalizacja dialogu (ale jeszcze nie otwieranie)
  let $dialog = $("#moje-okno").dialog({
    autoOpen: false, // Nie otwieraj automatycznie
    modal: true,     // Czy okno ma być modalne (blokuje resztę strony)
    width: 400,
    buttons: {
      "Tak, wykonaj": function() {
        console.log("Akcja potwierdzona!");
        $(this).dialog("close"); // Zamknij dialog
      },
      "Anuluj": function() {
        $(this).dialog("close");
      }
    }
  });

  // Otwieranie dialogu po kliknięciu przycisku
  $("#pokaz-dialog").on("click", function() {
    $dialog.dialog("open");
  });
});
</script>

Autocomplete (Autouzupełnianie)

Dodaje funkcję podpowiedzi do pola input na podstawie zdefiniowanego źródła danych.

<label for="jezyk">Ulubiony język programowania:</label>
<input type="text" id="jezyk" name="jezyk">

<script>
$(function() {
  let dostepneJezyki = [
    "JavaScript",
    "Python",
    "Java",
    "C#",
    "PHP",
    "C++",
    "TypeScript",
    "Ruby",
    "Swift",
    "Go"
  ];

  $("#jezyk").autocomplete({
    source: dostepneJezyki,
    minLength: 1 // Minimalna liczba znaków do rozpoczęcia wyszukiwania
  });
});
</script>

Źródłem danych (source) może być tablica stringów, tablica obiektów z właściwościami label i value, funkcja lub URL do skryptu serwerowego zwracającego dane w formacie JSON.

Tabs (Zakładki)

Tworzy interfejs z zakładkami, gdzie kliknięcie na nagłówek zakładki pokazuje odpowiednią treść.

<div id="moje-zakladki">
  <ul>
    <li><a href="#zakladka-1">Pierwsza</a></li>
    <li><a href="#zakladka-2">Druga</a></li>
    <li><a href="ajax/content3.html">Trzecia (AJAX)</a></li> <!-- Treść ładowana przez AJAX -->
  </ul>
  <div id="zakladka-1">
    <p>Treść pierwszej zakładki.</p>
  </div>
  <div id="zakladka-2">
    <p>Treść drugiej zakładki.</p>
  </div>
  <!-- Treść trzeciej zakładki zostanie załadowana do diva przez AJAX -->
</div>

<script>
$(function() {
  $("#moje-zakladki").tabs({
    event: "mouseover", // Zmień zakładkę po najechaniu myszą (domyślnie "click")
    collapsible: true, // Pozwól na zwinięcie wszystkich zakładek
    active: 1          // Która zakładka ma być aktywna na starcie (indeks od 0)
  });
});
</script>

Metody i Zdarzenia Widgetów

Widgety jQuery UI oferują metody do programistycznego sterowania ich zachowaniem oraz zdarzenia do reagowania na akcje użytkownika.

• Wywoływanie Metod: $(selektor).widgetName("nazwaMetody", [argumenty...]);
  Przykład: $("#data-urodzenia").datepicker("setDate", new Date()); (ustawia dzisiejszą datę), $("#moje-okno").dialog("isOpen"); (sprawdza, czy dialog jest otwarty).
• Obsługa Zdarzeń: Zdarzenia definiuje się jako opcje podczas inicjalizacji widgetu. Nazwa opcji odpowiada nazwie zdarzenia.
  Przykład: $("#jezyk").autocomplete({ select: function(event, ui) { console.log("Wybrano: " + ui.item.value); } }); (reaguje na wybranie elementu z listy podpowiedzi).

Dokładne listy dostępnych metod, opcji i zdarzeń znajdują się w dokumentacji każdego widgetu na stronie jQuery UI API.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Draggable & Droppable</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <style>
        #przeciagalny { width: 100px; height: 100px; padding: 0.5em; background-color: #a2cffa; border: 1px solid #3a8bcd; cursor: move; }
        #upuszczalny { width: 150px; height: 150px; padding: 0.5em; background-color: #f0e68c; border: 1px solid #e0c85a; margin-top: 20px; text-align: center; line-height: 140px; }
        .upuszczono-na { background-color: #90ee90 !important; border-color: #5cb85c !important; }
    </style>
</head>
<body>

<h2>Przeciągnij i Upuść</h2>

<div id="przeciagalny">
  <p>Przeciągnij mnie!</p>
</div>

<div id="upuszczalny">
  Upuść tutaj
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
  $("#przeciagalny").draggable({
    revert: "invalid" // Wróć, jeśli upuszczono poza celem
  });

  $("#upuszczalny").droppable({
    accept: "#przeciagalny", // Akceptuj tylko ten element
    classes: {
        "ui-droppable-hover": "upuszczono-na" // Dodaj klasę podczas najechania pasującym elementem
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight") // Dodaj klasę z motywu UI
        .find("p") // Znajdź ewentualny paragraf wewnątrz
        .html("Upuszczono!"); // Zmień tekst
      
      // Ukryj przeciągnięty element
      ui.draggable.hide( "slow", function() {
          // Można coś zrobić po zakończeniu animacji ukrywania
      });
      
      // Wyłącz możliwość upuszczania na tym elemencie po sukcesie
      $(this).droppable("disable");
    }
  });
});
</script>

</body>
</html>