註解:

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

關於標籤面板 Widget

標籤面板 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

  1. 選取「插入>Spry>Spry 標籤面板」。

註解:

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

新增面板至標籤面板 Widget

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

從標籤面板 Widget 刪除面板

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

開啟面板以進行編輯

  1. 請執行下列其中一項作業:
    • 將滑鼠指標移到要以「設計」檢視開啟的面板標籤上方,並按一下標籤右側的眼睛圖示。

    • 在「文件」視窗中選取標籤面板 Widget,然後在「屬性」檢視窗 (「視窗 > 屬性」) 的「面板」選單中,按一下要編輯的面板名稱。

變更面板順序

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

設定預設開啟的面板

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

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

自訂標籤面板 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 文字的樣式。

  1. 若要變更標籤面板 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 的背景顏色

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

    要變更的顏色

    相關的 CSS 規則

    要新增或變更的屬性和值範例

    面板標籤的背景顏色

    .TabbedPanelsTabGroup 或 .TabbedPanelsTab

    background-color: #DDD; (這是預設值)

    內容面板的背景顏色

    .Tabbed PanelsContentGroup 或 .TabbedPanelsContent

    background-color: #EEE; (這是預設值)

    所選標籤的背景顏色

    .TabbedPanelsTabSelected

    background-color: #EEE; (這是預設值)

    面板標籤在滑鼠指標滑過時的背景顏色

    .TabbedPanelsTabHover

    background-color: #CCC; (這是預設值)

限制標籤面板寬度

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

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

    註解:

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

  2. 為規則新增寬度屬性和值,例如 width: 300px;

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策