使用手冊 取消

在 Dreamweaver 中使用 jQuery 效果

 

 

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

新增 jQuery 效果

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

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

  3. 按一下加號圖示,按一下「效果」,然後按一下所要的效果。

    新增 jQuery 效果
    新增 jQuery 效果

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

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

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

  5. 若要加入多個 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>
<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>
<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>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<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>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

事件式 jQuery 效果

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

  1. 選取必要的頁面元素。

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

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

  4. 按一下必要的事件。

移除 jQuery 效果

  1. 選取必要的頁面元素。

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

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

更快、更輕鬆地獲得協助

新的使用者?