在 Dreamweaver CC 和更新版本中,Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget,但無法加入新的 Spry Widget。
Spry 效果總覽
「Spry 效果」為視覺增強功能,可以套用至使用 JavaScript 的 HTML 網頁上幾乎任何元素。 這些效果通常用來反白標示資訊、建立動畫轉換,或是在指定時間變更頁面元素的視覺效果。您不需要額外的自訂標籤,就能將效果套用至 HTML 元素。
若要將效果套用至元素,此效果目前必須是選取狀態,否則就必須具有 ID。例如,假設您要套用反白標示到目前並未選取的 div 標籤,此 div 必須具備有效的 ID 值。如果元素尚無有效的 ID 值,則必須新增一個至 HTML 程式碼。
效果可以變更元素的不透明度、縮放、位置和樣式屬性,如背景顏色等。您可以組合兩種或以上的屬性,以建立有趣的視覺效果。
由於這些效果都是以 Spry 為基礎,當使用者以某種效果在元素上按一下時,只有該元素會動態更新,不會重新整理整個 HTML 頁面。
Spry 包含下列效果:
出現/淡出
使元素出現或淡出。
標示
變更元素的背景顏色。
百葉窗
模擬拉上或拉下百葉窗的動作,以隱藏或顯示元素。
滑動
將元素向上或向下移動。
放大/縮小
放大或縮小元素尺寸。
震動
模擬從左到右震動元素的動作。
擠壓
使元素從頁面左上角消失。
當您使用效果時,可以在「程式碼」檢視中,看到檔案新增了多行程式碼。其中有一行用以識別 SpryEffects.js 檔案,這是納入效果時的必要檔案。請勿將此行自程式碼移除,否則效果將失去作用。
如需 Spry 架構中可用 Spry 效果的完整總覽,請造訪 www.adobe.com/go/learn_dw_spryeffects_tw。
套用出現/淡出效果
您可以搭配 applet、body、iframe、object、tr、tbody 或 th 以外的任何 HTML 元素使用這個效果。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 出現/淡出」。
-
從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
-
在「作用期間」方塊中,定義效果出現時所花費的時間 (以毫秒為單位)。
-
選取您要套用的效果:「淡出」或「出現」。
-
在「淡出自」方塊中,定義效果出現時的不透明度百分比。
-
在「淡出至」方塊中,定義您要淡出至何種不透明度百分比。
-
如果您希望效果是可以回復的,請選取「切換效果」,只要連續按下滑鼠就能從淡出到出現,再從出現到淡出。
套用百葉窗效果
您只可以搭配下列這些 HTML 元素使用這個效果:address、dd、div、dl、dt、form、h1、h2、h3、h4、h5、h6、p、ol、ul、li、applet、center、dir、menu 或 pre。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 百葉窗」。
-
從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
-
在「作用期間」方塊中,定義效果出現時所花費的時間 (以毫秒為單位)。
-
選取您要套用的效果:「拉上百葉窗」或「拉下百葉窗」。
-
在「拉上百葉窗自/拉下百葉窗自」方塊中,以百分比或像素數目定義百葉窗捲動的起始點。這些值都是從元素上方計算而得。
-
在「拉上百葉窗至/拉下百葉窗至」欄位中,以百分比或像素數目定義百葉窗捲動的結束點。這些值都是從元素上方計算而得。
-
如果您希望效果是可以回復的,只要連續按下滑鼠就能向上和向下捲動,請選取「切換效果」。
套用放大/縮小效果
您可以搭配下列這些 HTML 元素使用這個效果:address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、menu 或 pre。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從彈出式選單中選取「效果 > 放大/縮小」。
-
從目標彈出式元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
-
在「作用期間」欄位中,定義效果出現時所花費的時間 (以毫秒為單位)。
-
選取您要套用的效果:「放大」或「縮小」。
-
在「放大/縮小自」方塊中,定義效果開始時的元素大小。這是大小百分比或像素值。
-
在「放大/縮小至」方塊中,定義效果結束時的元素大小。這是大小百分比或像素值。
-
如果您為「放大/縮小自」或「放大/縮小至」方塊選擇像素,則欄位寬/高就會顯現出來。元素會根據您所選取的選項依比例放大或縮小。
-
選取您是否要讓元素放大或縮小至頁面左上方或頁面中心。
-
如果您希望效果是可以回復的,只要連續按下滑鼠就能放大和縮小,請選取「切換效果」。
套用標示效果
您可以搭配 applet、body、frame、frameset 或 noframes 以外的任何 HTML 元素使用這個效果。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 標示」。
-
從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
-
在「作用期間」方塊中,定義效果的持續時間 (以毫秒為單位)。
-
選取反白標示的起始顏色。
-
選取反白標示的結束顏色。這個顏色的持續時間就是您在「作用期間」所定義的時間。
-
選取反白標示結束後的元素顏色。
-
如果您希望效果是可以回復的,只要連續按下滑鼠就能循環顯示反白標示的顏色,請選取「切換效果」。
套用震動效果
您可以搭配下列這些 HTML 元素使用這個效果:address、blockquote、dd、div、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、iframe、img、object、p、ol、ul、li、applet、dir、hr、menu、pre 或 table。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下「加號 (+)」按鈕,並從選單中選取「效果 > 震動」。
-
從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
套用滑動效果
要讓滑動效果能夠正常運作,必須用具有唯一 ID 的容器標籤圍繞目標元素。用來圍繞目標元素的容器標籤必須是 blockquote、dd、form、div 或 center 標籤。
目標元素標籤必須是下列其中一項:blockquote、dd、div、form、center、table、span、input、textarea、select 或 image。
-
(選擇性) 選取您想要套用效果的內容的容器標籤。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 滑動」。
-
從目標元素選單中選取容器標籤的 ID。如果您已選取容器,請選擇「<目前選取範圍>」。
-
在「作用期間」欄位中,定義效果出現時所花費的時間 (以毫秒為單位)。
-
選取您要套用的效果:「向上滑動」或「向下滑動」。
-
在「向上滑動自」方塊中,以百分比或像素數目定義滑動的起始點。
-
在「向上滑動至」方塊中,以百分比或正的像素數量定義滑動的結束點。
-
如果您希望效果是可以回復的,只要連續按下滑鼠就能向上和向下滑動,請選取「切換效果」。
套用擠壓效果
您只可以搭配下列這些 HTML 元素使用這個效果:address、dd、div、dl、dt、form、img、p、ol、ul、applet、center、dir、menu 或 pre。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從選單中選取「效果 > 擠壓」。
-
從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
附加額外效果
您可以使多個效果行為與相同元素相關聯,以產生有趣的結果。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下加號 (+) 按鈕,並從「效果」選單中選取效果。
-
從目標元素選單中選取元素 ID。如果您已經選取元素,則選擇「目前選取範圍」。
刪除效果
您可以移除元素的一個或多個效果行為。
-
(選擇性) 選取您要套用效果的內容或版面元素。
-
在「行為」面板 (「視窗 > 行為」) 中,按一下您要自行為清單中刪除的效果。
-
請執行下列其中一項作業:
在子面板標題列 (-) 中按一下「移除事件」按鈕。
在行為上按一下右鍵 (Windows) 或 Control+按一下 (Macintosh),然後選取「刪除行為」。