在 Dreamweaver 的「設計」或「程式碼」檢視中,選取要套用 jQuery 效果的元素。
使用酷炫的 jQuery 效果,設計引人入勝的網站。 Dreamweaver 與 jQuery 整合即可讓您加入滑桿等效果,而不需要撰寫任何程式碼。
新增 jQuery 效果
選取「視窗 > 行為」以開啟「行為」面板。
按一下加號圖示,按一下 Effects,然後按一下所需的效果。
自訂面板隨即出現,顯示所選效果的設定。
指定設定,例如要套用效果的目標元素以及效果的持續時間。
目標元素可能與一開始所選取的元素相同,或是頁面上不同的元素。 例如,如果您想要使用者按一下元素 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 效果
選取必要的頁面元素。
「行為」面板會列出目前套用至所選頁面元素的所有效果。
按一下您要刪除的效果,然後按一下「刪除」圖示。