註解:

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

關於驗證核取方塊 Widget

Spry 驗證核取方塊 Widget 是 HTML 格式的核取方塊或核取方塊組,會在使用者選取或未選取核取方塊時,顯示有效或無效狀態。例如,您可以在要求使用者進行三次選取的表單中,新增驗證核取方塊 Widget。如果使用者未完成三次選取,Widget 就會傳回訊息,說明未達到最小選取數目。

下列範例顯示各種狀態中的驗證核取方塊 Widget:

各種狀態中的驗證核取方塊 Widget
各種狀態中的驗證核取方塊 Widget

A. 驗證核取方塊 Widget 群組 (最小選取數目狀態) B. 驗證核取方塊 Widget (必要狀態) 

驗證核取方塊 Widget 包含幾種狀態 (例如有效、無效、必要的值等等)。您可以依照所需要的驗證結果,使用「屬性」檢視窗來變更這些狀態的屬性。驗證核取方塊 Widget 可以在不同的時間點進行驗證,例如,當使用者在 Widget 外按一下、進行選取或是嘗試送出表單等時間點。

初始化狀態

頁面載入瀏覽器或使用者重設表單時的 Widget 狀態。

有效狀態

使用者完成選取或是達到正確選取數目,而且表單可以送出時的 Widget 狀態。

必要狀態

使用者未進行必要的選取時的 Widget 狀態。

最小選取數目狀態

當使用者選取核取方塊的數目,少於最少必要選取數目時的 Widget 狀態。

最大選取數目狀態

當使用者選取核取方塊的數目,多於最大允許選取數目時的 Widget 狀態。

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

驗證核取方塊 Widget 的預設 HTML 通常位於表單內,是由圍繞著核取方塊之 <input type="checkbox"> 標籤的容器 <span> 標籤所組成。驗證核取方塊 Widget 的 HTML 也包含位於文件頁首和 Widget 之 HTML 標記後面的 Script 標籤。

如需驗證核取方塊 Widget 運作方式的詳細說明,包括驗證核取方塊 Widget 程式碼的完整分析,請參閱 www.adobe.com/go/learn_dw_sprycheckbox_tw

插入並編輯驗證核取方塊 Widget

插入驗證核取方塊 Widget

  1. 選取「插入>Spry>Spry 驗證核取方塊」。
  2. 完成「Input 標籤輔助功能屬性」對話框並按一下「確定」。

註解:

您也可以使用「插入」面板中的「Spry」類別來插入驗證核取方塊 Widget。

指定驗證時間

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

  1. 在「文件」視窗中選取驗證核取方塊 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取能夠表示您要執行驗證的時間選項。您可以選取所有選項或者僅選取「送出」。

    模糊

    每當使用者在核取方塊外按一下時,即進行驗證。

    變更

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

    送出

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

指定最小與最大選取範圍

根據預設,驗證核取方塊 Widget 是設定為必要項目。不過,如果您在網頁上插入一些核取方塊,就可以指定最小與最大的選取範圍。例如,如果您在單一驗證核取方塊 Widget 的 <span> 標籤中有六個核取方塊,而您希望使用者確實選取至少三個核取方塊,則可以為整個 Widget 設定這樣的偏好設定。

  1. 在「文件」視窗中選取驗證核取方塊 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取「強制執行範圍」選項。
  3. 輸入您要使用者選取的最小或最大 (或兩者) 核取方塊數目。

在設計檢視中顯示 Widget 狀態

  1. 在「文件」視窗中選取驗證核取方塊 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,從「預覽狀態」彈出式選單中選取您要查看的狀態。例如,選取「初始化」即可查看 Widget 的初始化狀態。

自訂驗證核取方塊 Widget 錯誤訊息

根據預設,驗證核取方塊 Widget 的錯誤訊息會以紅色文字呈現,文字周圍環繞著 1 像素的邊框。您可以變更驗證核取方塊 Widget 的 CSS,這樣就能依照您所喜愛的樣式建立 Widget。如需樣式設計工作的進階清單,請參閱 www.adobe.com/go/learn_dw_sprycheckbox_custom_tw

  1. 開啟 SpryValidationCheckbox.css 檔案。

    每當您建立 Spry 驗證核取方塊 Widget 時,Dreamweaver 都會將 SpryValidationCheckbox.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案相當實用,其中包含 Widget 所適用各種樣式的註解資訊,方便您查詢相關資訊。

  2. 請使用下表找出適合的 CSS 規則,然後變更預設屬性,或者新增您自己的文字樣式屬性和值:

    要設計樣式的文字

    相關的 CSS 規則

    要變更的相關屬性

    錯誤訊息文字

    .checkboxRequiredState .checkboxRequiredMsg、.checkboxMinSelectionsState .checkboxMinSelectionsMsg、.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

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

    註解:

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

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

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