使用 Spry 可收合面板 Widget

搜尋

上次更新時間 Apr 29, 2021 04:00:02 PM GMT

註解：

在 Dreamweaver CC 和更新版本中，Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget，但無法加入新的 Spry Widget。

關於可收合面板 Widget

可收合面板 Widget 是一種面板，可以將內容儲存在很小的空間中。使用者只要按一下 Widget 的標籤，就能隱藏或顯示可收合面板所儲存的內容。下列範例顯示可收合面板 Widget 在展開和收合時的情形：

A. 展開 B. 收合

可收合面板 Widget 的 HTML 是由外部的 div 標籤所組成，而此標籤包含內容 div 標籤和標籤容器 div 標籤。可收合面板 Widget 的 HTML 也包含位於文件頁首和可收合面板 HTML 標記後面的 Script 標籤。

如需可收合面板 Widget 運作方式的詳細說明，包括可收合面板 Widget 程式碼的完整分析，請參閱 www.adobe.com/go/learn_dw_sprycollapsiblepanel_tw。

插入和編輯可收合面板 Widget

插入可收合面板 Widget

選取「插入＞Spry＞Spry 可收合面板」。

註解：

您也可以使用「插入」面板中的「Spry」類別來插入可收合面板 Widget。

開啟或關閉設計檢視中的可收合面板

請執行下列其中一項作業：

在「設計」檢視中，將滑鼠指標移到面板標籤上方，並按一下標籤右側的眼睛圖示。
在「文件」視窗中選取可收合面板 Widget，然後從「屬性」檢視窗 (「視窗 > 屬性」) 的「顯示」彈出式選單中選取「開啟」或「關閉」。

設定可收合面板 Widget 的預設狀態

您可以設定當網頁載入至瀏覽器時，可收合面板 Widget 的預設狀態 (開啟或關閉)。

在「文件」視窗中選取可收合面板 Widget。

在「屬性」檢視窗 (「視窗＞屬性」) 中，選取「預設狀態」彈出式選單中的「開啟」或「關閉」。

啟用或停用可收合面板 Widget 的動畫

根據預設，如果您啟用可收合面板 Widget 的動畫，當網頁瀏覽者按一下面板標籤時，面板會逐漸且平滑地開啟和關閉。如果您停用動畫，可收合面板就會突然開啟及關閉。

在「文件」視窗中選取可收合面板 Widget。

在「屬性」檢視窗 (「視窗＞屬性」) 中，選取或取消選取「啟用動畫」。

自訂可收合面板 Widget

「屬性」檢視窗可讓您對可收合面板 Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以變更可收合面板 Widget 的 CSS，並依照您所喜愛的樣式建立可收合面板。

如需更改可收合面板 Widget 顏色的快速參考資料，請參閱 David Powers 的 Spry 標籤面板、折疊式控制項和可收合面板樣式設計的快速指南。

如需樣式設計工作的進階清單，請參閱 www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_tw。

下列主題中的所有 CSS 規則都是指 SpryCollapsiblePanel.css 檔案中的預設規則。每當您建立 Spry 可收合面板 Widget 時，Dreamweaver 都會將 SpryCollapsiblePanel.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案也包含 Widget 所適用各種樣式的實用註解資訊。

註解：

您可以輕鬆地在隨附的 CSS 檔案中直接編輯可收合面板 Widget 的規則，也可以使用「CSS 樣式」面板來編輯可收合面板的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。

設計可收合面板 Widget 文字的樣式

您可以設定整個可收合面板 Widget 容器的屬性，或是個別設定 Widget 組件的屬性，藉此設計可收合面板 Widget 文字的樣式。

若要變更可收合面板 Widget 的文字格式，請使用下表找出適合的 CSS 規則，然後新增您自己的文字樣式屬性和值：

要變更的樣式	相關的 CSS 規則	要新增或變更的屬性和值範例
整個可收合面板中的文字	.CollapsiblePanel	font: Arial; font-size:medium;
僅面板標籤中的文字	.CollapsiblePanelTab	font: bold 0.7em sans-serif; (這是預設值)
僅內容面板中的文字	.CollapsiblePanelContent	font: Arial; font-size:medium;

變更可收合面板 Widget 背景顏色

若要變更可收合面板 Widget 不同部分的背景顏色，請使用下表找出適合的 CSS 規則，然後依照您的喜好新增或變更背景顏色的屬性和值：

要變更的顏色	相關的 CSS 規則	要新增或變更的屬性和值範例
面板標籤的背景顏色	.CollapsiblePanelTab	background-color: #DDD; (這是預設值)
內容面板的背景顏色	.CollapsiblePanelContent	background-color: #DDD;
面板開啟時的標籤背景顏色	.CollapsiblePanelOpen .CollapsiblePanelTab	background-color: #EEE; (這是預設值)
開啟的面板標籤在滑鼠指標滑過時的背景顏色	.CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover	background-color: #CCC; (這是預設值)

限制可收合面板寬度

根據預設，可收合面板 Widget 會展開至所有可用空間。不過，您只要設定可收合面板容器的寬度屬性，就可以限制可收合面板 Widget 的寬度。

開啟 SpryCollapsible Panel.css 檔案，找出 .CollapsiblePanel CSS 規則。這項規則定義了可收合面板 Widget 主要容器元素的屬性。

註解：

您也可以選取可收合面板 Widget，然後在「CSS 樣式」面板 (「視窗 > CSS 樣式」) 中找出這項規則。請確認面板已設定為「目前」模式。

為規則新增寬度屬性和值，例如 width: 300px;。