Dreamweaver ドキュメントのデザインビューまたはコードビューで、jQuery 効果を適用するエレメントを選択します。
最終更新日 :
2018年12月10日
洗練された jQuery 効果を使用して魅力的な Web サイトをデザインします。 Dreamweaver を jQuery と統合することで、コードを記述せずに、スライダーなどの効果を使用できます。
jQuery 効果の追加
Windows／ビヘイビアーを選択してビヘイビアーパネルを開きます。
プラスアイコンをクリックし、効果をクリックして、必要な効果をクリックします。
選択した効果が設定されたカスタマイズパネルが表示されます。
効果を適用するターゲットエレメントなどの設定および効果の期間を指定します。
ターゲットエレメントは、最初に選択したエレメントにすることも、ページ上の別のエレメントにすることもできます。 例えば、ユーザーがエレメント 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 効果の削除
必要なページエレメントを選択します。
ビヘイビアーパネルに、選択したページエレメントに現在適用されているすべての効果が一覧表示されます。
削除したい効果をクリックしてから、削除アイコンをクリックします。
