在 Dreamweaver CC 和更新版本中,Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget,但無法加入新的 Spry Widget。
關於工具提示 Widget
當使用者將滑鼠停留在網頁中特定元素的上方時,「Spry 工具提示」Widget 就會顯示額外資訊。當使用者的滑鼠不再停留在該物件上時,此額外內容就會消失。您也可以設定工具提示保持開啟一段較長的時間,讓使用者能夠與工具提示中的內容互動。
「工具提示」Widget 包含以下 3 個元素:
工具提示容器。這個元素包含了您想要在使用者啟動工具提示時顯示的訊息或內容。
可以啟動工具提示的頁面元素。
建構函式 Script。建構函式 Script 為 JavaScript,會通知 Spry 建立工具提示功能。
當您插入「工具提示」Widget 時,Dreamweaver 會利用 div 標籤建立工具提示,並以 span 標籤圍繞「觸發」元素 (可以啟動工具提示的頁面元素)。Dreamweaver 預設會使用這些標籤,不過,任何放在頁面內文中的標籤都可以成為工具提示與觸發元素所使用的標籤。
使用「工具提示」Widget 時請留意以下要點:
已經開啟的工具提示會在下一個工具提示開啟前關閉。
當使用者的滑鼠停留在觸發區域上方時,工具提示會持續顯示。
對於您可以使用的觸發物件和工具提示內容,並沒有任何限制 (然而,建議您使用區塊層級元素,以避免跨瀏覽器顯示時可能發生的問題)。
根據預設,工具提示會出現在游標右邊,並顯示在其下方 20 像素的位置。您可以使用「屬性」檢視窗中的水平與垂直位移選項,設定自訂的顯示位置。
目前無法在瀏覽器載入頁面時開啟工具提示。
「工具提示」Widget 不需要使用太多的 CSS。Spry 會使用 JavaScript 來顯示、隱藏和定位工具提示。您能夠透過標準的 CSS 技巧,為工具提示提供各種樣式,以符合頁面所需。預設 CSS 檔中所包含的唯一一個規則為 Internet Explorer 6 問題的解決方式,這項規則可讓工具提示出現在表單元素或 Flash 物件的上方。
如需「Spry 工具提示」Widget 運作方式的詳細說明,包括 Widget 程式碼的完整分析,請參閱:www.adobe.com/go/learn_dw_sprytooltip_tw。
如需「Spry 工具提示」Widget 的影片教學課程,請參閱 www.adobe.com/go/lrvid4046_dw_tw。
插入工具提示 Widget
-
選取「插入 > Spry > Spry 工具提示」。
您也可以使用「插入」面板中的「Spry」類別來插入「工具提示」Widget。
這個動作會插入一個新的「工具提示」Widget,其中包含工具提示內容的容器以及可觸發工具提示的預留位置句子。
您也能夠選取頁面上現有的元素 (例如,一個影像),然後插入工具提示。如果您這麼做,所選取的元素就可以觸發新的工具提示。選取範圍必須是完整的標籤元素 (例如 img 標籤或是 p 標籤),Dreamweaver 才能夠在該選取範圍沒有 ID 時加以指派。
編輯工具提示 Widget 選項
您能夠設定可用來自訂「工具提示」Widget 行為的選項。
將滑鼠停留或留置在頁面上工具提示內容中的插入點。
按一下「工具提示」Widget 的藍色索引標籤進行選取。
依照需求,在「工具提示」Widget「屬性」檢視窗中設定選項。
名稱
工具提示容器的名稱。此容器包含工具提示的內容。根據預設,Dreamweaver 會使用 div 標籤作為容器。
觸發
頁面中的元素,可用來啟動工具提示。根據預設,Dreamweaver 會插入以 span 標籤圍繞的預留位置句子,以作為觸發元素;但您可以選取頁面上任何具有唯一 ID 的元素作為觸發元素。
跟隨滑鼠
若選取此選項,當滑鼠停留在觸發元素上時,工具提示便會跟隨滑鼠移動。
滑鼠滑出時隱藏
若選取此選項,即使滑鼠滑出觸發元素,只要滑鼠還停留在工具提示上方,工具提示便會持續開啟。如果工具提示中有連結或其他互動元素,保持開啟工具提示便相當有用。若未選取此選項,當滑鼠滑出觸發區域時,工具提示元素就會關閉。
水平位移
計算工具提示相對於滑鼠游標的水平位置。位移值的單位是像素,而預設位移是 20 像素。
垂直位移
計算工具提示相對於滑鼠游標的垂直位置。位移值的單位是像素,而預設位移是 20 像素。
顯示延遲
在進入觸發元素的範圍後要延遲多少毫秒再顯示工具提示。預設值為 0。
隱藏延遲
在離開觸發元素的範圍後要延遲多少毫秒再隱藏工具提示。預設值為 0。
效果
您想要在工具提示出現時使用的效果類型。「百葉窗」會模擬窗戶的百葉窗拉上和拉下的方式,來顯示和隱藏工具提示。「淡出」可使工具提示淡入和淡出。預設值是「無」。