マニュアルキャンセル

Dreamweaver での jQuery 効果の使用

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

洗練された jQuery 効果を使用して魅力的な Web サイトをデザインします。Dreamweaver を jQuery と統合することで、コードを記述せずに、スライダーなどの効果を使用できます。

jQuery 効果の追加

Dreamweaver ドキュメントのデザインビューまたはコードビューで、jQuery 効果を適用するエレメントを選択します。
Windows／ビヘイビアーを選択してビヘイビアーパネルを開きます。
プラスアイコンをクリックし、「効果」をクリックして、必要な効果をクリックします。

jQuery 効果の追加

選択した効果が設定されたカスタマイズパネルが表示されます。
効果を適用するターゲットエレメントなどの設定および効果の期間を指定します。

ターゲットエレメントは、最初に選択したエレメントにすることも、ページ上の別のエレメントにすることもできます。例えば、ユーザーがエレメント A をクリックするとエレメント B が非表示または表示されるようにする場合、ターゲットエレメントは B です。
複数の jQuery 効果を追加するには、上記の手順を繰り返します。

複数の効果を選択した場合、ビヘイビアーパネルに表示される順序で効果が適用されます。効果の順序を変更するには、パネルの上部にある矢印キーを使用します。

関連するコードがドキュメントに自動的に挿入されます。例えば、「フェード」効果を選択した場合、次のコードが挿入されます。

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>

body タグのエレメントに次のコードが適用されます：

<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>

script タグとともに次のコードが追加されます。

<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

イベントベースの jQuery 効果

jQuery 効果を適用すると、初期設定では onClick イベントに割り当てられます。効果のトリガーイベントは、ビヘイビアーパネルで変更できます。

必要なページエレメントを選択します。
Windows／ビヘイビアーを選択し、「イベント設定の表示」アイコンをクリックします。
現在適用されている効果に対応する行をクリックします。最初の列が、選択できるイベントの一覧を含むドロップダウンリストに変化します。
必要なイベントをクリックします。

jQuery 効果の削除

必要なページエレメントを選択します。

ビヘイビアーパネルに、選択したページエレメントに現在適用されているすべての効果が一覧表示されます。
削除する効果をクリックし、削除アイオンをクリックします。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る