Umieść kursor na stronie w tym miejscu, w którym chcesz wstawić widget.
Ostatnia aktualizacja
30 kwi 2026
Informacje o dodawaniu funkcji aplikacyjnych do projektów WWW w programie Dreamweaver za pomocą widgetów jQuery interfejsu użytkownika i elementów mobilnych. Elementy takie jak harmonijki, zakładki, suwaki i pola autouzupełniania można wstawiać bez potrzeby pisania kodu.
Widgety to niewielkie aplikacje internetowe pisane w takich językach, jak DHTML i JavaScript. Można je wstawiać i wykonywać na stronach WWW. Widgety mogą między innymi ułatwić odtworzenie na stronach WWW komfortu pracy znanego z klasycznych rozwiązań stacjonarnych.
Widgety interfejsu użytkownika jQuery, takie jak harmonijka, zakładki, wybór daty, suwak i autouzupełnianie, pomagają przybliżyć wygląd strony WWW do wyglądu aplikacji stacjonarnych.
Na przykład widget Zakładki można wykorzystać do stworzenia efektu przypominającego karty w oknach dialogowych.
Ponadto program Dreamweaver zawiera kolekcję widgetów jQuery Mobile, które umożliwiają tworzenie elementów formularzy i innych funkcji często używanych w aplikacjach mobilnych. Na przykład można użyć widgetu jQuery Mobile, aby dodać elementy formularza przyjazne urządzeniom mobilnym, takie jak obszary tekstowe i pola wyboru.
Wstawianie widgetu jQuery
Podczas wstawiania widgetu jQuery do kodu automatycznie dodawane są następujące pozycje:
- Odniesienia do wszystkich plików zależnych.
- Znacznik Script zawierający funkcje API jQuery do obsługi widgetu. Dodatkowe widgety są dodawane do tego samego tagu skryptu.
Więcej informacji o widgetach jQuery podano w http://jqueryui.com/demos/
Spostrzeżenie
W przypadku efektów jQuery odniesienie zewnętrzne do pliku jquery-1.8.24.min.js nie jest dodawane, ponieważ plik ten jest automatycznie dołączany podczas tworzenia efektu.
Wybierz polecenie Wstaw > Interfejs użytkownika jQuery. Wybierz widget, który chcesz wstawić.
W panelu Wstaw widgety można znaleźć w sekcji Interfejs użytkownika jQuery.
Po wybraniu widgetu jQuery jego właściwości zostaną wyświetlone w panelu Właściwości.
Podgląd widgetów jQuery można wyświetlać w widoku aktywnym albo w przeglądarce, która obsługuje widgety jQuery.
Modyfikowanie widgetów jQuery
Zaznacz widget, który chcesz zmodyfikować.
Zmień właściwości widgetu w panelu Właściwości.
Na przykład aby dodać kolejną zakładkę do widgetu Zakładki, zaznacz ten widget i kliknij opcję „+” w panelu Właściwości.
Wstawianie widgetów jQuery Mobile
Zanim będzie można użyć dowolnego widgetu jQuery mobile, należy najpierw zdefiniować stronę jQuery Mobile, wybierając Wstaw > jQuery Mobile > Strona.
Zostanie otwarte okno dialogowe Pliki jQuery Mobile.
Zmień ustawienia domyślne w oknie dialogowym plików jQuery Mobile lub pozostaw je ustawione na ścieżki domyślne, a następnie kliknij OK.
W oknie dialogowym Strona, które się otworzy, wpisz nazwę w polu ID i wybierz lub odznacz pola wyboru obok opcji Nagłówek i Stopka w zależności od tego, czy chcesz mieć sekcje nagłówka i stopki na stronie mobilnej.
Na stronie, która otworzy się w programie Dreamweaver, zastąp tekst Nagłówek, Zawartość i Stopka tekstem, obrazami i innymi elementami, które chcesz mieć na swojej stronie mobilnej.
Spostrzeżenie
Zachowaj krótki tekst i małe obrazy do wyświetlania na małych ekranach mobilnych.
Dodaj inne widgety jQuery Mobile zgodnie z potrzebami.
Wyświetl podgląd strony na urządzeniu.
Więcej informacji podano w Podgląd stron internetowych Dreamweaver na wielu urządzeniach.
Zapisz stronę jQuery Mobile i wszystkie powiązane pliki.
Motywy jQuery Mobile nie są stosowane w nowszych wersjach jQuery
Problem
Motywy jQuery Mobile, w tym próbki i panele, nie są stosowane podczas używania nowszych wersji jQuery, takich jak jQuery 3.7.1. W rezultacie motywy jQuery mogą nie renderować się poprawnie lub nie zachowywać się zgodnie z oczekiwaniami.
Przyczyna
jQuery Mobile zostało wycofane i nie jest już aktywnie utrzymywane. Nie obsługuje wersji jQuery 3.x, co prowadzi do problemów z kompatybilnością z nowszymi wydaniami.
Rozwiązanie/obejście
Aby nadal korzystać z funkcji jQuery Mobile (motywy, próbki i panele), użyj kompatybilnej, starszej wersji jQuery.
Zalecana wersja: jQuery 1.11.1 (lub inne obsługiwane wersje 1.x)
Przykład
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Dodaj obsługiwaną wersję jQuery. Na przykład 1.11.1.
Upewnij się, że biblioteka jQuery Mobile jest ładowana po skrypcie jQuery.
Przeładuj stronę i sprawdź, czy motywy, próbki i panel są renderowane poprawnie.
Spostrzeżenie
Ponieważ jQuery Mobile jest przestarzałe i nie jest już aktualizowane, w przypadku istniejących projektów jQuery Mobile należy nadal używać zgodnej starszej wersji jQuery.
Więcej materiałów tego typu
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
