使用 Spry 折疊式 Widget

註解:

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

關於折疊式 Widget

折疊式 Widget 是一組可收合的面板,能以很小的空間儲存大量的內容。網頁瀏覽者可以按一下面板標籤,隱藏或顯示折疊式結構所儲存的內容。瀏覽者只要按下不同的標籤,就能展開或收合折疊式面板。折疊式結構同時間只能開啟並顯示一個內容面板。下列範例顯示折疊式 Widget 及展開第一個面板的情形:

折疊式 Widget

A. 折疊式面板索引標籤 B. 折疊式面板內容 C. 折疊式面板 (開啟) 

折疊式 Widget 的預設 HTML 是由外部的 div 標籤所組成,而此標籤包含了所有面板、代表每個面板的 div 標籤,以及每個面板標籤內的頁首 div 和內容 div。折疊式 Widget 可以包含任意數量的個別面板。折疊式 Widget 的 HTML 也包含位於文件頁首和折疊式 HTML 標記後面的 Script 標籤。

如需折疊式 Widget 運作方式的詳細說明,包括折疊式 Widget 程式碼的完整分析,請參閱 www.adobe.com/go/learn_dw_spryaccordion_tw

如需折疊式 Widget 的教學課程,請參閱 www.adobe.com/go/vid0167_tw

插入和編輯折疊式 Widget

插入折疊式 Widget

  1. 選取「插入>Spry>Spry 折疊式」。
註解:

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

新增面板至折疊式 Widget

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

從折疊式 Widget 刪除面板

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

開啟面板以進行編輯

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

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

變更面板順序

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

自訂折疊式 Widget

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

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

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

下列主題中的所有 CSS 規則都是指 SpryAccordion.css 檔案中的預設規則。每當您建立 Spry 折疊式 Widget 時,Dreamweaver 都會將 SpryAccordion.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案也包含 Widget 所適用各種樣式的註解資訊,方便您查詢相關資訊。

註解:

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

設計折疊式 Widget 文字的樣式

您可以設定整個折疊式 Widget 容器的屬性,或是個別設定 Widget 組件的屬性,藉此設計折疊式 Widget 文字的樣式。

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

    要變更的文字

    相關的 CSS 規則

    要新增的屬性和值範例

    整個折疊式中的文字 (包括標籤和內容面板)

    .Accordion 或 .AccordionPanel

    font: Arial; font-size:medium;

    僅折疊式面板標籤中的文字

    .AccordionPanelTab

    font: Arial; font-size:medium;

    僅折疊式內容面板中的文字

    .AccordionPanelContent

    font: Arial; font-size:medium;

變更折疊式 Widget 背景顏色

  1. 若要變更折疊式 Widget 不同部分的背景顏色,請使用下表找出適合的 CSS 規則,然後新增或變更背景顏色屬性和值:

    要變更的 Widget 部分

    相關的 CSS 規則

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

    折疊式面板標籤的背景顏色

    .AccordionPanelTab

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

    折疊式內容面板的背景顏色

    .AccordionPanelContent

    background-color: #CCCCCC;

    開啟的折疊式面板的背景顏色

    .AccordionPanelOpen .AccordionPanelTab

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

    游標停留在上面時的面板標籤背景顏色

    .AccordionPanelTabHover

    color: #555555; (這是預設值)

    游標停留在上面時開啟的面板標籤的背景顏色

    .AccordionPanelOpen .AccordionPanelTabHover

    color: #555555; (這是預設值)

限制折疊式結構寬度

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

  1. 開啟 SpryAccordion.css 檔案,找出 .Accordion CSS 規則。這項規則定義了折疊式 Widget 主要容器元素的屬性。
    註解:

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

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

登入您的帳戶