在 Dreamweaver 中使用 jQuery 效果

上次更新時間 2018年12月10日

使用酷炫的 jQuery 效果,設計引人入勝的網站。 Dreamweaver 與 jQuery 整合即可讓您加入滑桿等效果,而不需要撰寫任何程式碼。

新增 jQuery 效果

在 Dreamweaver 的「設計」或「程式碼」檢視中,選取要套用 jQuery 效果的元素。

選取「視窗 > 行為」以開啟「行為」面板。

按一下加號圖示,按一下 Effects,然後按一下所需的效果。

新增 jQuery 效果
新增 jQuery 效果

自訂面板隨即出現,顯示所選效果的設定。

指定設定,例如要套用效果的目標元素以及效果的持續時間。

目標元素可能與一開始所選取的元素相同,或是頁面上不同的元素。 例如,如果您想要使用者按一下元素 A 來隱藏或顯示元素 B,目標元素為 B。

若要加入多個 jQuery 效果,請重複以上的步驟。

當您選擇多種效果時,Dreamweaver 會根據這些效果在「行為」面板中的顯示順序加以套用。 若要變更效果的順序,請使用面板頂端的方向鍵。

Dreamweaver 會將相關的程式碼自動插入文件。 例如,如果您選取了「淡出」效果,便會插入以下的程式碼:

  • 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)"> 地球表單</li>

  • 指令碼標籤及下列程式碼會加入:

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

事件式 jQuery 效果

當您套用 jQuery 效果時,依預設該效果會指派給 onClick 事件。 您可以使用「行為」面板變更效果的觸發事件。

選取必要的頁面元素。

在「視窗 > 行為」面板中,按一下顯示設定事件圖示。

按一下與目前所套用的效果相對應的列。 請注意,第一欄會變更為下拉式清單,提供您可從中選擇的事件清單。

按一下必要的事件。

移除 jQuery 效果

選取必要的頁面元素。

行為」面板會列出目前套用至所選頁面元素的所有效果。

按一下您要刪除的效果,然後按一下「刪除」圖示。