註解:

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

關於可收合面板 Widget

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

A. 展開 B. 收合
A. 展開 B. 收合 

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

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

插入和編輯可收合面板 Widget

插入可收合面板 Widget

  1. 選取「插入>Spry>Spry 可收合面板」。

註解:

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

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

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

    • 在「文件」視窗中選取可收合面板 Widget,然後從「屬性」檢視窗 (「視窗 > 屬性」) 的「顯示」彈出式選單中選取「開啟」或「關閉」。

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

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

  1. 在「文件」視窗中選取可收合面板 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取「預設狀態」彈出式選單中的「開啟」或「關閉」。

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

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

  1. 在「文件」視窗中選取可收合面板 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取或取消選取「啟用動畫」。

自訂可收合面板 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 文字的樣式。

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

    要變更的樣式

    相關的 CSS 規則

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

    整個可收合面板中的文字

    .CollapsiblePanel

    font: Arial; font-size:medium;

    僅面板標籤中的文字

    .CollapsiblePanelTab

    font: bold 0.7em sans-serif; (這是預設值)

    僅內容面板中的文字

    .CollapsiblePanelContent

    font: Arial; font-size:medium;

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

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

    要變更的顏色

    相關的 CSS 規則

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

    面板標籤的背景顏色

    .CollapsiblePanelTab

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

    內容面板的背景顏色

    .CollapsiblePanelContent

    background-color: #DDD;

    面板開啟時的標籤背景顏色

    .CollapsiblePanelOpen .CollapsiblePanelTab

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

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

    .CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover

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

限制可收合面板寬度

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

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

    註解:

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

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

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

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