使用 Spry 標籤面板 Widget

搜尋

上次更新時間

註解：

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

關於標籤面板 Widget

標籤面板 Widget 是一組面板，可以將內容儲存在很小的空間中。網頁瀏覽者可以按一下他們要存取的面板標籤，隱藏或顯示標籤面板所儲存的內容。瀏覽者只要按下不同的標籤，就能開啟 Widget 的面板。標籤面板 Widget 同時間只能開啟一個內容面板。下列範例顯示標籤面板 Widget 及展開第三個面板的情形：

A. 索引標籤 B. 內容 C. 標籤面板 Widget D. 標籤面板

標籤面板 Widget 的 HTML 程式碼是由外部的 div 標籤所組成，而此標籤包含了所有面板、標籤清單、用來包含內容面板的 div，以及代表每個內容面板的 div。標籤面板 Widget 的 HTML 也包含位於文件頁首和標籤面板 Widget 之 HTML 標記後面的 Script 標籤。

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

插入和編輯標籤面板 Widget

插入標籤面板 Widget

選取「插入＞Spry＞Spry 標籤面板」。

註解：

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

新增面板至標籤面板 Widget

在「文件」視窗中選取標籤面板 Widget。
按一下「屬性」檢視窗 (「視窗＞屬性」) 中的面板加號按鈕。
(選擇性) 如果您要變更標籤名稱，請在「設計」檢視中選取標籤文字並加以變更。

從標籤面板 Widget 刪除面板

在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 的「面板」選單中，選取要刪除的面板名稱，並按一下減號按鈕。

開啟面板以進行編輯

請執行下列其中一項作業：
- 將滑鼠指標移到要以「設計」檢視開啟的面板標籤上方，並按一下標籤右側的眼睛圖示。
- 在「文件」視窗中選取標籤面板 Widget，然後在「屬性」檢視窗 (「視窗 > 屬性」) 的「面板」選單中，按一下要編輯的面板名稱。

變更面板順序

在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 的「面板」選單中，選取您要移動的面板名稱。
按一下向上或向下箭頭，將面板向上或向下移動。

設定預設開啟的面板

您可以設定當網頁在瀏覽器中開啟時，預設要開啟標籤面板 Widget 的哪個面板。

在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 中，從「預設」面板彈出式選單中選取您要預設開啟的面板。

自訂標籤面板 Widget

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

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

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

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

註解：

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

設計標籤面板 Widget 文字

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

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

要變更的文字	相關的 CSS 規則	要新增的屬性和值範例
整個 Widget 中的文字	.TabbedPanels	font: Arial; font-size:medium;
僅面板標籤中的文字	.TabbedPanelsTabGroup 或 .TabbedPanelsTab	font: Arial; font-size:medium;
僅內容面板中的文字	.TabbedPanelsContentGroup 或 .TabbedPanelsContent	font: Arial; font-size:medium;

變更標籤面板 Widget 的背景顏色

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

要變更的顏色	相關的 CSS 規則	要新增或變更的屬性和值範例
面板標籤的背景顏色	.TabbedPanelsTabGroup 或 .TabbedPanelsTab	background-color: #DDD; (這是預設值)
內容面板的背景顏色	.Tabbed PanelsContentGroup 或 .TabbedPanelsContent	background-color: #EEE; (這是預設值)
所選標籤的背景顏色	.TabbedPanelsTabSelected	background-color: #EEE; (這是預設值)
面板標籤在滑鼠指標滑過時的背景顏色	.TabbedPanelsTabHover	background-color: #CCC; (這是預設值)

限制標籤面板寬度

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

開啟 SpryTabbedPanels.css 檔案，找出 .TabbedPanels CSS 規則。這項規則定義了標籤面板 Widget 主要容器元素的屬性。

註解：

您也可以選取標籤面板 Widget，然後在「CSS 樣式」面板 (「視窗 > CSS 樣式」) 中找出這項規則。請確認面板已設定為「目前」模式。
為規則新增寬度屬性和值，例如 width: 300px;。