Używanie widgetów jQuery interfejsu użytkownika i elementów mobilnych w programie Dreamweaver

Szukaj
Adobe Dreamweaver Podręcznik użytkownika

Na tej stronie

Ma zastosowanie wobec: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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.

  1. Umieść kursor na stronie w tym miejscu, w którym chcesz wstawić widget.

  2. 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

  1. Zaznacz widget, który chcesz zmodyfikować.

  2. 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

  1. 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.
    Okno dialogowe Pliki jQuery Mobile.

  2. Zmodyfikuj ustawienia domyślne w oknie dialogowym plików jQuery Mobile (lub pozostaw ścieżki domyślne), a następnie kliknij przycisk OK.

  3. 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
    Okno dialogowe Strona

  4. 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.

  5. Stosownie do potrzeb dodaj kolejne widgety jQuery Mobile.

  6. Wyświetl podgląd strony na urządzeniu.

    Więcej informacji: Podgląd stron WWW programu Dreamweaver na wielu urządzeniach.

  7. Zapisz stronę jQuery Mobile oraz wszystkie pliki powiązane.