Umieść kursor na stronie w tym miejscu, w którym chcesz wstawić widget.
Last updated on
|
Also Applies to Adobe Dreamweaver
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. Za pomocą takiego widgetu jQuery można na przykład utworzyć elementy formularza (takie jak pola wyboru i pola tekstowe) przystosowane do wyświetlania na urządzeniach mobilnych.
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. Kolejne widgety będą dodawane do tego samego znacznika Script.
Więcej informacji na temat widgetów jQuery zawiera strona http://jqueryui.com/demos/
Uwaga:
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 skorzystasz z dowolnych widgetów mobilnych jQuery, musisz najpierw zdefiniować stronę jQuery Mobile, wybierając polecenie Wstaw > jQuery Mobile > Strona.
Zostanie wyświetlone okno dialogowe Pliki jQuery Mobile.
Okno dialogowe Pliki jQuery Mobile. -
Zmodyfikuj ustawienia domyślne w oknie dialogowym plików jQuery Mobile (lub pozostaw ścieżki domyślne), a następnie kliknij przycisk OK.
-
Zostanie wyświetlone okno dialogowe Strona. Wpisz nazwę w polu ID i zaznacz pola wyboru Nagłówek i Stopka lub wyłącz je, jeśli nie chcesz dodawać sekcji nagłówka i stopki na stronie mobilnej.
Okno dialogowe Strona -
Na stronie otwartej w programie Dreamweaver zastąp tekst Nagłówek, Treść i Stopka odpowiednim tekstem, obrazami i innymi elementami tworzonej strony mobilnej.
Uwaga:Pamiętaj, że tekst powinien być krótki, a obrazy niewielkie — odpowiednie do wyświetlania na małych ekranach urządzeń mobilnych.
-
Stosownie do potrzeb dodaj kolejne widgety jQuery Mobile.
-
Wyświetl podgląd strony na urządzeniu.
Więcej informacji: Podgląd stron WWW programu Dreamweaver na wielu urządzeniach.
-
Zapisz stronę jQuery Mobile oraz wszystkie pliki powiązane.
Więcej zasobów tego rodzaju
Zaloguj się na swoje konto