在 Dreamweaver 的「設計」或「程式碼」檢視中,選取要套用 jQuery 效果的元素。
使用酷炫的 jQuery 效果,設計引人入勝的網站。Dreamweaver 與 jQuery 整合即可讓您加入滑桿等效果,而不需要撰寫任何程式碼。
在 Dreamweaver 的「設計」或「程式碼」檢視中,選取要套用 jQuery 效果的元素。
選取「視窗 > 行為」以開啟「行為」面板。
按一下加號圖示,按一下「效果」,然後按一下所要的效果。
自訂面板隨即出現,顯示所選效果的設定。
指定設定,例如要套用效果的目標元素以及效果的持續時間。
目標元素可能與一開始所選取的元素相同,或是頁面上不同的元素。例如,如果您想要用戶按一下元素 A 來隱藏或顯示元素 B,目標元素為 B。
若要加入多個 jQuery 效果,請重複以上的步驟。
當您選擇多種效果時,Dreamweaver 會根據這些效果在「行為」面板中的顯示順序加以套用。若要變更效果的順序,請使用面板頂端的方向鍵。
Dreamweaver 會將相關的程式碼自動插入文件。例如,如果您選取了「淡出」效果,便會插入以下的程式碼:
<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>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
當您套用 jQuery 效果時,依預設該效果會指派給 onClick 事件。您可以使用「行為」面板變更效果的觸發事件。
選取必要的頁面元素。
在「視窗 > 行為」面板中,按一下顯示設定事件圖示。
按一下與目前所套用的效果相對應的列。請注意,第一欄會變更為下拉式清單,提供您可從中選擇的事件清單。
按一下必要的事件。
選取必要的頁面元素。
「行為」面板會列出目前套用至所選頁面元素的所有效果。
按一下您想要刪除的效果,然後按一下「刪除」圖示。
登入您的帳戶