Příručka uživatele Zrušit

Používání efektů jQuery v aplikaci Dreamweaver

 

 

Navrhujte poutavé webové stránky využívající působivé efekty jQuery. Integrace aplikace Dreamweaver s prostředím jQuery vám nabízí přístup k různým efektům (např. přesouvání obrazu) bez nutnosti psaní kódu.

Přidávání efektů jQuery

  1. V rámci zobrazení návrhu nebo kódu dokumentu Dreamweaver vyberte element, u kterého chcete použít efekt jQuery.

  2. Výběrem možností Okna > Chování otevřete panel Chování.

  3. Klikněte na ikonu Plus, poté na možnost Efekty a nakonec klikněte na požadovaný efekt.

    Přidání efektů jQuery
    Přidání efektů jQuery

    Zobrazí se panel pro přizpůsobení s nastavením vybraných efektů.

  4. Podle potřeby upravte nastavení, jako např. cílový element, u kterého chcete použít efekt a délku trvání tohoto efektu.

    Cílový element se může shodovat s prvním vybraným elementem nebo se může jednat o libovolný element na stránce. Pokud například chcete, aby mohl uživatel kliknutím na element A zobrazit nebo skrýt element B, je cílovým elementem element B.

  5. Při přidávání více efektů jQuery opakujte výše uvedené kroky.

    Budete-li chtít vybrat více efektů, aplikace Dreamweaver bude efekty přidávat v pořadí, v jakém jsou uvedeny na panelu Chování. Pořadí efektů můžete měnit pomocí šipek v horní části panelu.

Aplikace Dreamweaver do vašeho dokumentu automaticky vloží odpovídající kód. Pokud například vyberete efekt „Zmizet“, vloží se následující kód:

  • Externí reference na závislé soubory potřebné ke správnému chodu efektu 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>
  • U elementu v rámci tagu „body“ se použije následující kód:
<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>
  • Přidá se tag Script spolu s následujícím kódem:
<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 podle událostí

Po přidání efektu jQuery se podle výchozího nastavení přiřadí k události onClick. Událost pro aktivaci efektu můžete upravit pomocí panelu Chování.

  1. Vyberte požadovaný element stránky.

  2. Na panelu Okna > Chování klikněte na ikonu Zobrazit nastavovací události.

  3. Klikněte na řádek odpovídající aktuálně použitému efektu. Všimněte si, že se první sloupec změní na rozevírací seznam s událostmi, které můžete zvolit.

  4. Klikněte na požadovanou událost.

Odebrání efektů jQuery

  1. Vyberte požadovaný element stránky.

    Na panelu Chování naleznete všechny efekty, které u vybraného elementu stránky aktuálně probíhají.

  2. Klikněte na efekt, který chcete odstranit, a poté na ikonu Odstranit..

Získejte pomoc rychleji a snáze

Nový uživatel?