Stosowanie wbudowanych zachowań JavaScript

Stosowanie wbudowanych zachowań

Zachowania dołączone do programu Dreamweaver zostały napisane tak, aby działały w nowoczesnych przeglądarkach.Zachowania te mogą nieznacznie gorzej współpracować ze starszymi przeglądarkami.

Chociaż akcje programu Dreamweaver zostały napisane w celu maksymalizacji zgodności między przeglądarkami, niektóre przeglądarki w ogóle nie obsługują JavaScript, a wiele osób przeglądających internet ma wyłączony JavaScript w swoich przeglądarkach.Aby uzyskać najlepsze rezultaty na różnych platformach, zapewnij alternatywne interfejsy zamknięte w tagach <noscript>, aby osoby bez JavaScript mogły korzystać z Twojej witryny.

Stosowanie zachowania Call JavaScript

Zachowanie Call JavaScript wykonuje niestandardową funkcję lub linię kodu JavaScript, gdy wystąpi zdarzenie. (Można napisać skrypt samodzielnie lub użyć kodu dostarczonego przez różne dostępne bezpłatnie biblioteki JavaScript w internecie.)

Stosowanie zachowania Zmień właściwość

Użyj zachowania Change Property, aby zmienić wartość jednej z właściwości obiektu (na przykład kolor tła elementu div lub akcję formularza).

Stosowanie zachowania Sprawdź wtyczkę

Użyj zachowania Check Plugin, aby wysyłać odwiedzających na różne strony w zależności od tego, czy mają zainstalowaną określoną wtyczkę.Na przykład możesz chcieć, aby odwiedzający przeszli na jedną stronę, jeśli mają Shockwave, a na inną stronę, jeśli nie mają.

Stosowanie zachowania Przeciągnij element AP

Zachowanie Przeciągnij element AP umożliwia odwiedzającemu przeciągnięcie elementu pozycjonowanego absolutnie (AP).Użyj tego zachowania do tworzenia puzzli, suwaków i innych ruchomych elementów interfejsu.

Możesz określić, w którym kierunku odwiedzający może przeciągać element AP (poziomo, pionowo lub w dowolnym kierunku), cel, do której odwiedzający powinien przeciągnąć element AP, czy element AP ma przyciągnąć się do celu, jeśli element AP znajduje się w określonej liczbie pikseli od celu, co zrobić, gdy element AP dotrze do celu i nie tylko.

Ponieważ zachowanie Przeciągnij element AP musi zostać wywołane, zanim użytkownik będzie mógł przeciągnąć element AP, należy dołączyć Przeciągnij element AP do obiektu body (ze zdarzeniem onLoad).

Zbieranie informacji o przeciąganym elemencie AP

Po dołączeniu zachowania Przeciągnij element AP do obiektu, Dreamweaver wstawia funkcję MM_dragLayer() do sekcji head dokumentu.(Ta funkcja zachowuje starą konwencję nazewnictwa elementów AP [tj. „Warstwa"], dzięki czemu warstwy utworzone w poprzednich wersjach programu Dreamweaver pozostaną edytowalne.)Oprócz rejestrowania elementu AP jako przeciąganego, ta funkcja definiuje trzy właściwości dla każdego przeciąganego elementu AP — MM_LEFTRIGHT, MM_UPDOWN i MM_SNAPPED — których można używać we własnych funkcjach JavaScript do określania względnej pozycji poziomej elementu AP, względnej pozycji pionowej elementu AP oraz tego, czy element AP dotarł do miejsca docelowego upuszczenia.

Na przykład następująca funkcja wyświetla wartość właściwości MM_UPDOWN (bieżące pionowe położenie elementu AP) w polu formularza o nazwie curPosField.(Pola formularza są przydatne do wyświetlania stale aktualizowanych informacji, ponieważ są dynamiczne — to znaczy można zmieniać ich zawartość po zakończeniu ładowania strony.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

Zamiast wyświetlać wartości MM_UPDOWN lub MM_LEFTRIGHT w polu formularza, można wykorzystać te wartości na różne inne sposoby. Na przykład można napisać funkcję, która wyświetla komunikat w polu formularza w zależności od tego, jak blisko wartość jest do strefy docelowej, lub można wywołać inną funkcję, aby pokazać lub ukryć element AP w zależności od wartości.

Odczytywanie właściwości MM_SNAPPED jest szczególnie przydatne, gdy na stronie znajduje się kilka elementów AP, z których wszystkie muszą dotrzeć do swoich celów, zanim użytkownik będzie mógł przejść do następnej strony lub zadania. Na przykład można napisać funkcję, która liczy ile elementów AP ma wartość MM_SNAPPED równą true i wywoływać ją za każdym razem, gdy element AP zostanie upuszczony. Gdy liczba przyciągniętych elementów osiągnie żądaną liczbę, można przekierować użytkownika na następną stronę lub wyświetlić komunikat z gratulacjami.

Stosowanie zachowania Przejdź do adresu URL

Zachowanie Przejdź do adresu URL otwiera nową stronę w bieżącym oknie lub w określonej ramce.To zachowanie jest przydatne do zmiany zawartości dwóch lub więcej ramek jednym kliknięciem.

Stosowanie zachowania menu przeskoku (Jump)

Gdy tworzysz menu przejścia za pomocą Wstaw > Formularz > Menu przejścia, program Dreamweaver tworzy obiekt menu i dołącza do niego zachowanie Menu przejścia (lub Idź do menu przejścia).Zwykle nie ma potrzeby ręcznego dołączania zachowania Menu skoku do obiektu.

Istniejące menu skoku można edytować na dwa sposoby:

• Można edytować i zmieniać kolejność elementów menu, zmieniać pliki, do których ma nastąpić przejście, i zmieniać okno, w którym te pliki się otworzą, klikając dwukrotnie istniejące zachowanie Menu skoku w panelu Zachowania.

• Można edytować elementy w menu tak samo jak elementy w każdym menu, wybierając menu i używając przycisku Wartości listy we właściwościach obiektu.

Stosowanie zachowania Menu przeskoku – Przejdź

Zachowanie Przejdź menu przejścia jest ściśle powiązane z zachowaniem Menu przejścia; opcja Przejdź menu przejścia umożliwia powiązanie przycisku Przejdź z menu przejścia.(Przed użyciem tego zachowania w dokumencie musi już istnieć menu przejścia.)Kliknięcie przycisku Przejdź powoduje otwarcie linku wybranego w menu przejścia.Menu przejścia zwykle nie wymaga przycisku Przejdź; wybranie elementu z menu przejścia zazwyczaj powoduje załadowanie adresu URL bez konieczności podejmowania dalszych działań przez użytkownika.Jeśli jednak odwiedzający wybierze ten sam element, który jest już wybrany w menu przejścia, przejście nie nastąpi.Ogólnie rzecz biorąc, nie ma to znaczenia, ale jeśli menu skoku pojawia się w ramce, a elementy menu skoku prowadzą do stron w innych ramkach, przycisk Przejdź jest często przydatny, aby umożliwić odwiedzającym ponowne wybranie elementu, który jest już wybrany w menu skoku.

Stosowanie zachowania Otwórz okno przeglądarki

Użyj zachowania Otwórz okno przeglądarki, aby otworzyć stronę w nowym oknie. Można określić właściwości nowego okna, w tym jego rozmiar, atrybuty (czy można zmieniać jego rozmiar, czy ma pasek menu i tak dalej) oraz nazwę. Na przykład można użyć tego zachowania, aby otworzyć większy obraz w osobnym oknie, gdy odwiedzający kliknie miniaturę obrazu; za pomocą tego zachowania można sprawić, że nowe okno będzie miało dokładny rozmiar obrazu.

Jeśli nie określisz żadnych atrybutów okna, otworzy się ono w rozmiarze i z atrybutami okna, z którego zostało otwarte. Określenie dowolnego atrybutu okna automatycznie wyłącza wszystkie inne atrybuty, które nie są jawnie włączone. Na przykład, jeśli nie ustawisz żadnych atrybutów okna, może się ono otworzyć w rozmiarze 1024 x 768 pikseli i mieć pasek nawigacji (pokazujący przyciski Wstecz, Dalej, Strona główna i Odśwież), pasek lokalizacji (pokazujący URL), pasek stanu (pokazujący komunikaty statusu na dole) oraz pasek menu (pokazujący menu Plik, Edycja, Widok i inne). Jeśli jawnie ustawisz szerokość na 640, wysokość na 480 i nie ustawisz innych atrybutów, okno otworzy się w rozmiarze 640 x 480 pikseli, bez pasków narzędzi.

Stosowanie zachowania Wyskakujący komunikat

Zachowanie Komunikat podręczny wyświetla alert JavaScript z komunikatem, który określisz. Ponieważ alerty JavaScript mają tylko jeden przycisk (OK), użyj tego zachowania, aby przekazać użytkownikowi informacje, a nie przedstawić wybór.

Można osadzić dowolne prawidłowe wywołanie funkcji JavaScript, właściwość, zmienną globalną lub inne wyrażenie w tekście. Aby osadzić wyrażenie JavaScript, umieść je w nawiasach klamrowych ({}). Aby wyświetlić nawias klamrowy, poprzedź go ukośnikiem wstecznym (\{).

Przykład:

Adres URL tej strony to {window.location}, a dzisiaj mamy {new Date()}.

Stosowanie zachowania Wczytaj wstępnie obrazy

Zachowanie Wstępne wczytywanie obrazów skraca czas wyświetlania przez buforowanie obrazów, które nie są wyświetlane przy pierwszym pojawieniu się strony (na przykład obrazy, które będą zamieniane za pomocą zachowań lub skryptów).

Stosowanie zachowania Ustaw tekst ramki

Zachowanie Ustaw tekst ramki pozwala dynamicznie ustawić tekst ramki, zastępując zawartość i formatowanie ramki określoną zawartością.Zawartość może zawierać dowolny prawidłowy kod HTML. Zachowanie to może być używane do dynamicznego wyświetlania informacji.

Chociaż zachowanie Ustaw tekst ramki zastępuje formatowanie ramki, można wybrać Zachowaj kolor tła, aby zachować atrybuty tła strony i koloru tekstu.

Można osadzić dowolne prawidłowe wywołanie funkcji JavaScript, właściwość, zmienną globalną lub inne wyrażenie w tekście. Aby osadzić wyrażenie JavaScript, umieść je w nawiasach klamrowych ({}). Aby wyświetlić nawias klamrowy, poprzedź go ukośnikiem wstecznym (\{).

Przykład:

Adres URL tej strony to {window.location}, a dzisiaj mamy {new Date()}.

Zastosuj zachowanie Ustaw tekst kontenera

Działanie Set Text Of Container zastępuje zawartość i formatowanie istniejącego kontenera (czyli dowolnego elementu, który może zawierać tekst lub inne elementy) na stronie zawartością, którą określisz. Wybrana zawartość może zawierać dowolny ważny kod źródłowy HTML.

Można osadzić dowolne prawidłowe wywołanie funkcji JavaScript, właściwość, zmienną globalną lub inne wyrażenie w tekście.Aby osadzić wyrażenie JavaScript, umieść je w nawiasach klamrowych ({}). Aby wyświetlić nawias klamrowy, poprzedź go ukośnikiem wstecznym (\{).

Przykład:

Adres URL tej strony to {window.location}, a dziś jest {new Date()}.

Zastosuj działanie Set Text Of Status Bar

Działanie Set Text Of Status Bar wyświetla wiadomość na pasku stanu w lewym dolnym rogu okna przeglądarki. Na przykład można użyć tego działania, aby opisać miejsce docelowe łącza na pasku stanu zamiast wyświetlania skojarzonego z nim adresu URL. Odwiedzający często ignorują lub pomijają wiadomości na pasku stanu (a nie wszystkie przeglądarki zapewniają pełną obsługę ustawiania tekstu paska stanu); jeśli wiadomość jest ważna, rozważ wyświetlenie jej jako wiadomości wyskakującej lub jako tekstu elementu AP.

Można osadzić dowolne prawidłowe wywołanie funkcji JavaScript, właściwość, zmienną globalną lub inne wyrażenie w tekście.Aby osadzić wyrażenie JavaScript, umieść je w nawiasach klamrowych ({}). Aby wyświetlić nawias klamrowy, poprzedź go ukośnikiem wstecznym (\{).

Przykład:

Adres URL tej strony to {window.location}, a dziś jest {new Date()}.

Zastosuj zachowanie Set Text Of Text Field

Działanie Set Text Of Text Field zastępuje zawartość pola tekstowego formularza zawartością, którą określisz.

Można osadzić dowolne prawidłowe wywołanie funkcji JavaScript, właściwość, zmienną globalną lub inne wyrażenie w tekście.Aby osadzić wyrażenie JavaScript, umieść je w nawiasach klamrowych ({}). Aby wyświetlić nawias, poprzedź go ukośnikiem odwrotnym (\{).

Przykład:

Adres URL tej strony to {window.location}, a dziś jest {new Date()}.

Tworzenie nazwanego pola tekstowego

Stosowanie zachowania Ustaw tekst pola tekstowego

Stosowanie zachowania Pokaż-Ukryj elementy

Zachowanie Pokaż-Ukryj elementy wyświetla, ukrywa lub przywraca domyślną widoczność jednego lub wielu elementów strony.To zachowanie jest przydatne do wyświetlania informacji podczas interakcji użytkownika ze stroną.Na przykład, gdy użytkownik przesuwa wskaźnik nad Obraz rośliny, możesz wyświetlić element strony zawierający szczegóły dotyczące sezonu wzrostu i regionu rośliny, ile słońca potrzebuje, jak duża może urosnąć itd.Zachowanie tylko wyświetla lub ukrywa odpowiedni element — w rzeczywistości nie usuwa elementu z przepływu strony, gdy jest ukryty.

To zachowanie zostało wycofane od Dreamweaver CS5.

Stosowanie zachowania Zamień obraz

Zachowanie Zamień obraz zamienia jeden obraz na inny, zmieniając atrybut src tagu <img>.Użyj tego zachowania do tworzenia efektów najechania kursorem na przyciski i innych efektów obrazu (w tym zamiany więcej niż jednego obrazu naraz).Wstawianie obrazu przeniesienia automatycznie dodaje zachowanie Zamień Obraz do strony.

Istnieje również zachowanie Przywróć zamienione obrazy, które przywraca ostatni zestaw zamienionych obrazów do ich poprzednich plików źródłowych.To zachowanie jest automatycznie dodawane za każdym razem, gdy dołączasz zachowanie Zamień Obraz do obiektu; jeśli pozostawisz opcję Przywróć wybraną podczas dołączania Zamień Obraz, nigdy nie powinieneś musieć wybierać zachowania Przywróć zamieniony Obraz ręcznie.

Stosowanie zachowania Przeprowadź walidację formularza

Zachowanie Waliduj formularz sprawdza zawartość określonych pól tekstowych, aby upewnić się, że użytkownik wprowadził odpowiedni typ danych. Dołącz to zachowanie do poszczególnych pól tekstowych ze zdarzeniem onBlur, aby walidować pola podczas wypełniania formularza przez użytkownika, lub dołącz je do formularza ze zdarzeniem onSubmit, aby ocenić kilka pól tekstowych jednocześnie, gdy użytkownik kliknie przycisk Wyślij. Dołączenie tego zachowania do formularza zapobiega przesyłaniu formularzy z nieprawidłowymi danymi.

Więcej podobnych

• Wstawianie lub modyfikowanie dynamicznego menu formularza HTML
• Tworzenie ramek i układów ramek