註解:

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

關於驗證選項按鈕群組 Widget

「驗證選項按鈕群組」Widget 是一組選項按鈕,可為選取範圍提供驗證支援。此 Widget 會從群組中強制選取 1 個選項按鈕。

下列範例顯示各種狀態中的「驗證選項按鈕群組」Widget:

各種狀態中的驗證選項按鈕群組 Widget
各種狀態中的驗證選項按鈕群組 Widget

A. 「驗證選項按鈕群組」Widget 錯誤訊息 B. 「驗證選項按鈕群組」Widget 群組 

「驗證選項按鈕群組」Widget 除了初始狀態之外,還包含另外 3 種狀態:有效、無效以及必要的值。您可以透過編輯對應的 CSS 檔案 (SpryValidationRadio.css),依照所需的驗證結果變更這些狀態的屬性。「驗證選項按鈕群組」Widget 可以在不同的時間點進行驗證:當使用者在 Widget 外按一下、進行選取或是嘗試送出表單等時間點。

初始化狀態

當瀏覽器載入頁面或使用者重設表單時。

有效狀態

當使用者做出選取且表單可以送出時。

必要狀態

當使用者沒有做出必要的選取時。

無效狀態

當使用者選取其值不被接受的選項按鈕時。

每當「驗證選項按鈕群組」Widget 因使用者互動而進入上述任何一個狀態時,Spry 架構邏輯就會在執行階段,將特定的 CSS 類別套用至 Widget 的 HTML 容器。例如,如果使用者嘗試送出表單,但未進行任何選取,Spry 就會套用類別至 Widget,使其顯示錯誤訊息:「請進行選取」。用來控制樣式並顯示錯誤訊息狀態的規則,存在於 Widget 的 檔案中,即 SpryValidationRadio.css。

「驗證選項按鈕群組」Widget 的預設 HTML 程式碼 (通常位於表單中) 是由一個容器 span 標籤所構成,這個標籤圍繞著選項按鈕群組的 input type="radio" 標籤。「驗證選項按鈕群組」Widget 的 HTML 程式碼也包含位於文件頁首和 Widget 之 HTML 程式碼後面的 Script 標籤。

如需驗證選項按鈕群組 Widget 運作方式的詳細說明,包括驗證選項按鈕群組 Widget 程式碼的完整分析,請參閱:www.adobe.com/go/learn_dw_spryradio_tw

插入並編輯驗證選項按鈕群組 Widget

插入驗證選項按鈕群組 Widget

  1. 選取「插入 > Spry > Spry 驗證選項按鈕群組」。
  2. 在「名稱」文字方塊中,輸入選項按鈕群組的名稱。
  3. 按一下加 (+) 或減 (-) 按鈕,就可以在群組中增加或減少選項按鈕。
  4. 在「標籤」欄中,按一下每個選項按鈕的名稱,使其成為可編輯欄位,並為每個選項按鈕指定唯一名稱。
  5. 在「值」欄中,按一下每個選項按鈕的值,使其成為可編輯欄位,並為每個選項按鈕指定唯一值。
  6. (選擇性) 按一下選項按鈕或其值來選取特定列,然後按一下向上鍵或向下鍵將該列向上或向下移動。
  7. 選取選項按鈕群組的版面類型。

    斷行

    使用斷行符號 (br 標籤),將各個選項按鈕置放在不同行中。

    表格

    使用個別表格列 (tr 標籤),將各個選項按鈕置放在不同行中。

  8. 按一下「確定」。

註解:

您也可以使用「插入」面板中的「Spry」類別來插入「選項按鈕群組」Widget。

指定驗證時間

您可以指定驗證的時間,例如,當使用者在 Widget 外按一下、進行選取或是嘗試送出表單等時間點。

  1. 請按一下藍色索引標籤,以在「文件」視窗中選取「驗證選項按鈕群組」Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取能夠表示您要執行驗證的時間選項。您可以選取所有選項或者僅選取「送出」。

    模糊

    每當使用者在選項按鈕群組外按一下時,即進行驗證。

    變更

    當使用者選取項目時,即進行驗證。

    送出

    當使用者嘗試送出表單時,即進行驗證。預設是選取「送出」選項,而且無法取消選取。

在設計檢視中顯示 Widget 狀態

  1. 請按一下藍色索引標籤,以在「文件」視窗中選取「驗證選項按鈕群組」Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,從「預覽狀態」彈出式選單中選取您要查看的狀態。例如,選取「初始化」即可查看 Widget 的初始化狀態。

變更選項按鈕的必要狀態

根據預設,「驗證選項按鈕群組」Widget 會要求使用者在送出表單之前進行選取。然而,您能夠將選項設定為可供使用者選擇性選取的項目。

  1. 請按一下藍色索引標籤,以在「文件」視窗中選取「驗證選項按鈕群組」Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,取消選取「必要」選項。

指定空值或無效值

您能夠為選項按鈕指定空值或無效值,如果使用者選取了任何一個與這些值關聯的選項按鈕時,便會登錄為空或無效。如果使用者選取具有空值的選項按鈕,瀏覽器會傳回錯誤訊息:「請進行選取」。如果使用者選取具有無效值的選項按鈕,瀏覽器會傳回錯誤訊息:「請選取有效的值」。

具有空值選項按鈕的「選項按鈕群組」Widget。
具有空值選項按鈕的「選項按鈕群組」Widget。

  1. 在「選項按鈕群組」Widget 中選取您想要用於空值或無效值的選項按鈕。在為 Widget 指定空值或無效值之前,必須先將這些值指定給對應的選項按鈕。
  2. 在「選項按鈕屬性」檢視窗 (「視窗 > 屬性) 中,將選項按鈕指定給核取值。若要建立具有空值的選項按鈕,請在「核取的值」文字方塊中輸入 none。若要建立具有無效值的選項按鈕,請在「核取的值」文字方塊中輸入 invalid
  3. 在「驗證選項按鈕群組」Widget 的藍色索引標籤上按一下,以選取整個 Widget。
  4. 在「屬性」檢視窗中,指定為空值或無效值。若要建立能夠顯示空值錯誤訊息「請進行選取」的 Widget,請在「空值」文字方塊中輸入 none。若要建立能夠顯示空值錯誤訊息「請選取有效的值」的 Widget,請在「無效值」文字方塊中輸入 invalid

    請務必記住,您必須為選項按鈕本身與「選項按鈕群組」Widget 指派 none 值或 invalid 值,錯誤訊息才能正常顯示。

自訂選項按鈕群組 Widget

「屬性」檢視窗可讓您對「驗證選項按鈕群組」Widget 進行簡單的編輯,但不支援自訂的樣式設計工作。您可以變更「驗證選項按鈕群組」Widget 的 CSS,這樣就能依照您所喜愛的樣式建立 Widget。如需樣式設計工作的進階清單,請參閱:www.adobe.com/go/learn_dw_spryradio_custom_tw

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

註解:

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

設計驗證選項按鈕群組 Widget 的樣式 (一般說明)

  1. 開啟 SpryValidationRadio.css 檔案。

  2. 找到 Widget 中想要變更之部分的 CSS 規則。例如,若要變更「選項按鈕群組」Widget 的背景顏色,請編輯 SpryValidationRadio.css 檔案中的 radioRequiredState 規則。

  3. 對 CSS 規則進行所需的變更並儲存檔案。

SpryValidationRadio.css 檔案中包含大量的註解,這些註解會解釋程式碼與某些規則的目的。如需進一步的資訊,請參閱檔案中的註解。

設計驗證選項按鈕群組 Widget 錯誤訊息文字

根據預設,「驗證選項按鈕群組」Widget 的錯誤訊息會以紅色文字呈現,文字周圍環繞著 1 像素的實心邊框。

  1. 若要變更「驗證選項按鈕群組」Widget 錯誤訊息的文字樣式,請使用下表找出適合的 CSS 規則,然後變更預設屬性,或者新增您自己的文字樣式屬性和值。

    要設計樣式的文字

    相關的 CSS 規則

    要變更的相關屬性

    錯誤訊息文字

    .radioRequiredState .radioRequiredMsg、.radioInvalidState .radioInvalidMsg

    color: #CC3333; border: 1px solid #CC3333;

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

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