Podręcznik użytkownika Anuluj

Używanie efektów jQuery w programie Dreamweaver

 

 

Ekscytujące efekty jQuery umożliwiają projektowanie ciekawych serwisów WWW. Integracja programu Dreamweaver z biblioteką jQuery umożliwia stosowanie efektów takich jak suwaki bez potrzeby programowania kodu.

Dodawanie efektów jQuery

  1. Wyświetl dokument programu Dreamweaver w widoku Projekt lub Kod i zaznacz element, do którego chcesz zastosować efekt jQuery.

  2. Wybierz polecenie Okna > Zachowania, aby otworzyć panel Zachowania.

  3. Kliknij ikonę Plus, wybierz opcję Efekty, a następnie kliknij odpowiedni efekt.

    Dodawanie efektów jQuery
    Dodawanie efektów jQuery

    Zostanie wyświetlony panel dostosowań z ustawieniami dla wybranego efektu.

  4. Określ ustawienia takie jak element docelowy, do którego stosowany jest obiekt, oraz czas trwania efektu.

    Elementem docelowym może być początkowo zaznaczony element albo inny element na stronie. Na przykład jeśli po kliknięciu elementu A ma być ukrywany lub pokazywany element B, to B będzie elementem docelowym.

  5. Aby dodać wiele efektów jQuery, powtórz opisane powyżej kroki.

    W przypadku wybrania wielu efektów program Dreamweaver zastosuje je w takiej kolejności, w jakiej są wyświetlone w panelu Zachowania. Aby zmienić kolejność efektów, skorzystaj ze strzałek w górnej części panelu.

Program Dreamweaver automatycznie wstawi odpowiedni kod do dokumentu. Na przykład jeśli wybrano efekt „Zanik”, wstawiony zostanie następujący kod:

  • Odwołania do zewnętrznych plików zależnych niezbędnych do działania efektów jQuery:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
  • Następujący kod zostanie zastosowany do elementu wewnątrz znacznika Body:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
  • Dodany zostanie znacznik Script i następujący kod:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Efekty jQuery oparte na zdarzeniach

Efekt jQuery zastosowany na stronie jest domyślnie przypisywany do zdarzenia onClick („po kliknięciu”). Zdarzenie wyzwalające efekt można zmienić za pomocą panelu Zachowania.

  1. Zaznacz odpowiedni element strony.

  2. W panelu Okna > Zachowania kliknij ikonę Pokaż zdarzenia ustawione.

  3. Kliknij wiersz odpowiadający zastosowanemu obecnie efektowi. Pierwsza kolumna zmieni się w rozwijaną listę, z której można wybrać różne zdarzenia.

  4. Kliknij odpowiednie zdarzenie.

Usuwanie efektów jQuery

  1. Zaznacz odpowiedni element strony.

    Panel Zachowania zawiera listę wszystkich efektów zastosowanych obecnie do zaznaczonego elementu strony.

  2. Kliknij efekt, który chcesz usunąć, a następnie kliknij ikonę Usuń.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?