spry菜單欄(二)


自定義選項卡式面板構件

盡管使用屬性檢查器可以簡化對選項卡式面板構件的編輯,但是屬性檢查器並不支持自定義的樣式設置任務。您可以修改選項卡式面板構件的 CSS 規則,並創建根據自己的喜好設置樣式的構件。有關樣式任務的更高級列表,請訪問 www.adobe.com/go/learn_dw_sprytabbedpanels_custom_cn。

下列主題中的所有 CSS 規則都是指 SpryTabbedPanels.css 文件中的默認規則。每當您創建 Spry 選項卡式面板構件時,Dreamweaver 都會將 SpryTabbedPanels.css 文件保存到您的站點的 SpryAssets 文件夾中。此文件中還包括有關適用於該構件的各種樣式的有用的注釋信息。

盡管可以直接在相關聯的 CSS 文件中方便地編輯選項卡式面板構件的規則,您還可以使用“CSS 樣式”面板來編輯選項卡式面板構件的 CSS。“CSS 樣式”面板對於查找分配給構件不同部分的 CSS 類非常有用,在使用面板的“當前”模式時尤其如此。

設置選項卡式面板構件文本的樣式

,通過設置整個選項卡式面板構件容器的屬性或分別設置構件的各個組件的設置,可以設置選項卡式面板構件的文本樣式。

 要更改選項卡式面板構件的文本樣式,請使用下表來查找相應的 CSS 規則,然后添加自己的文本樣式屬性和值:

要更改的文本

相關 CSS 規則

要添加的屬性和值的示例

整個構件中的文本

.TabbedPanels

font: Arial; font-size:medium;

僅限面板選項卡中的文本

.TabbedPanelsTabGroup 或 .TabbedPanelsTab

font: Arial; font-size:medium;

僅限內容面板中的文本

.TabbedPanelsContentGroup 或 .TabbedPanelsContent

font: Arial; font-size:medium;

更改選項卡式面板構件的背景顏色

 要更改選項卡面板構件不同部分的背景顏色,請使用下表來查找相應的 CSS 規則,然后根據自己的喜好添加或更改背景顏色的屬性和值:

要更改的顏色

相關 CSS 規則

要添加或更改的屬性和值的示例

面板選項卡的背景顏色

.TabbedPanelsTabGroup 或 .TabbedPanelsTab

background-color: #DDD;(這是默認值。)

內容面板的背景顏色

.Tabbed PanelsContentGroup 或 .TabbedPanelsContent

background-color: #EEE;(這是默認值。)

選定選項卡的背景顏色

.TabbedPanelsTabSelected

background-color: #EEE;(這是默認值。)

當鼠標指針移過面板選項卡上方時,選項卡的背景顏色

.TabbedPanelsTabHover

background-color: #CCC;(這是默認值。)

限制選項卡式面板的寬度

默認情況下,選項卡式面板構件會展開以填充可用空間。但是,您可以通過設置折疊式容器 width 屬性來限制選項卡式面板構件的寬度。

  1. 打開 SpryTabbedPanels.css 文件查找 .TabbedPanels CSS 規則。此規則可為選項卡式面板構件的主容器元素定義屬性。

查找規則的另一種方法是:選擇選項卡式面板構件,然后在“CSS 樣式”面板(“窗口”>“CSS 樣式”)中進行查找。請確保該面板設置為“當前”模式。

  1. 向該規則中添加一個 width 屬性和值,例如width: 300px;

關於驗證文本域構件

Spry 驗證文本域構件是一個文本域,該域用於在站點訪問者輸入文本時顯示文本的狀態(有效或無效)。例如,您可以向訪問者鍵入電子郵件地址的表單中添加驗證文本 域構件。如果訪問者無法在電子郵件地址中鍵入“@”符號和句點,驗證文本域構件會返回一條消息,聲明用戶輸入的信息無效。

下例顯示一個處於各種狀態的驗證文本域構件:

A. 文本域構件(提示已激活) B. 文本域構件(有效狀態)C. 文本域構件(無效狀態)

D. 文本域構件(必需狀態)

驗證文本域構件具有許多狀態(例如,有效、無效和必需值等)。您可以根據所需的驗證結果,使用屬性檢查器來修改這些狀態的屬性。驗證文本域構件可以在不同的時間點進行驗證,例如當訪問者在構件外部單擊時、鍵入內容時或嘗試提交表單時。

初始狀態

在瀏覽器中加載頁面或用戶重置表單時構件的狀態。

焦點狀態

當用戶在構件中放置插入點時構件的狀態。

有效狀態

當用戶正確地輸入信息且表單可以提交時構件的狀態。

無效狀態

當用戶所輸入文本的格式無效時構件的狀態。(例如,用 06 而不是用 2006 表示年份。)

必需狀態

當用戶在文本域中沒有輸入必需文本時構件的狀態。

最小字符數狀態

當用戶輸入的字符數少於文本域所要求的最小字符數時構件的狀態。

最大字符數狀態

當用戶輸入的字符數多於文本域所允許的最大字符數時構件的狀態。

最小值狀態

當用戶輸入的值小於文本域所需的值時構件的狀態。(適用於整數、實數和數據類型驗證。)

最大值狀態

當用戶輸入的值大於文本域所允許的最大值時構件的狀態。(適用於整數、實數和數據類型驗證。)

每當驗證文本域構件以用戶交互方式進入其中一種狀態時,Spry 框架邏輯會在運行時向該構件的 HTML 容器應用特定的 CSS 類。例如,如果用戶嘗試提交表單,但尚未在必填文本域中輸入文本,Spry 會向該構件應用一個類,使它顯示“需要提供一個值”錯誤消息。用來控制錯誤消息的樣式和顯示狀態的規則包含在構件隨附的 CSS 文件 (SpryValidationTextField.css) 中。

驗證文本域構件的默認 HTML 通常位於表單內部,其中包含一個容器 <span> 標簽,該標簽將文本域的 <input> 標簽括起來。在驗證文本域構件的 HTML 中,在文檔頭中和驗證文本域構件的 HTML 標記之后還包括腳本標簽。

插入驗證文本域構件

  1. 選擇“插入”>“Spry”>“Spry 驗證文本域”。

2. 完成“輸入標簽輔助功能屬性”對話框,然后單擊“確定”。

指定驗證類型和格式

可以為驗證文本域構件指定不同的驗證類型。例如,如果文本域將接收信用卡號,則可以指定信用卡驗證類型。

1. 在“文檔”窗口中選擇一個驗證文本域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中,從“類型”菜單中選擇一個驗證類型。

3. 如果適用的話,請從“格式”彈出菜單中選擇一種格式。

大多數驗證類型都會使文本域要求采用標准格式。例如,如果您向文本域應用整數驗證類型,那么,除非用戶在該文本域中輸入數字,否則,該文本域構件將無法通過驗證。但是,某些驗證類型允許您選擇文本域將接受的格式種類。下表顯示可通過屬性檢查器使用的驗證類型和格式:

驗證類型

格式

無需特殊格式。

整數

文本域僅接受數字。

電子郵件

文本域接受包含 @ 和句點 (.) 的電子郵件地址, 而且 @ 和句點的前面和后面都必須至少有一個字母。

日期

格式可變。可以從屬性檢查器的“格式”彈出菜單中進行選擇。

時間

格式可變。可以從屬性檢查器的“格式”彈出菜單中進行選擇。(“tt”表示 am/pm 格式,“t”表示 a/p 格式。)

信用卡

格式可變。可以從屬性檢查器的“格式”彈出菜單中進行選擇。可以選擇接受所有信用卡,或者指定特定種類的信用卡(MasterCard、Visa 等). 文本域不接受包含空格的信用卡號,例如 4321 3456 4567 4567。

郵政編碼

格式可變。可以從屬性檢查器的“格式”彈出菜單中進行選擇。

電話號碼

文本域接受美國和加拿大格式(即,(000) 000-0000)或自定義格式的電話號碼。如果您選擇自定義格式,請在“模式”文本框中輸入格式,例如,000.00(00)。

社會安全號碼

文本域接受 000-00-0000 格式的社會安全號碼。

貨幣

文本域接受 1,000,000.00 或 1.000.000,00 格式的貨幣。

實數/科學記數法

驗證各種數字:數字(例如 1)、浮點值(例如,12.123)、以科學記數法表示的浮點值(例如,1.212e+12、1.221e-12,其中 e 用作 10 的冪。)

IP 地址

格式可變。可以從屬性檢查器的“格式”彈出菜單中進行選擇。

URL

文本域接受 http://xxx.xxx.xxx 或 ftp://xxx.xxx.xxx 格式的 URL。

自定義

可用於指定自定義驗證類型和格式。在屬性檢查器中輸入格式模式(並根據需要輸入提示)。

指定驗證發生的時間

您可以設置驗證發生的時間,包括站點訪問者在構件外部單擊時、鍵入內容時或嘗試提交表單時。

  1. 在“文檔”窗口中選擇一個驗證文本域構件。
  2. 在屬性檢查器(“窗口”>“屬性”)中,選擇用來指示您希望驗證何時發生的選項。可以選擇所有的選項,也可以一個都不選。

模糊

當用戶在文本域的外部單擊時驗證。

更改

當用戶更改文本域中的文本時驗證。

提交

當用戶嘗試提交表單時驗證。

指定最小字符數和最大字符數

此選項僅適用於“無”、“整數”、“電子郵件地址”和“URL”驗證類型。

  1. 在“文檔”窗口中選擇一個驗證文本域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中的“最小字符數”或“最大字符數”框中輸入一個數字。例如,如果您在“最小字符數”框中輸入 3,那么,只有當用戶輸入三個或更多個字符時,該構件才通過驗證。

指定最小值和最大值

此選項僅適用於“整數”、“時間”、“貨幣”和“實數/科學記數法”驗證類型。

  1. 在“文檔”窗口中選擇一個驗證文本域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中的“最小值”或“最大值”框中輸入一個數字。例如,如果您在“最小值”框中輸入 3,那么,只有當用戶在文本域中輸入 3 或者更大的值(4、5、6 等)時,該構件才通過驗證。

在設計視圖中顯示構件狀態

  1. 在“文檔”窗口中選擇一個驗證文本域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中,從“預覽狀態”彈出菜單中選擇要查看的狀態。例如,如果要查看處於“有效”狀態的構件,請選擇“有效”。

更改文本域的所需狀態

默認情況下,用 Dreamweaver 插入的所有驗證文本域構件都要求用戶在將構件發布到 Web 頁之前輸入內容。但是,您可以將填寫文本域設置為對於用戶是可選的。

  1. 在“文檔”窗口中選擇一個驗證文本域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中,根據自己的喜好選擇或取消選擇“必需”選項。

創建文本域的提示

由於文本域有很多不同格式,因此,提示用戶需要輸入哪種格式會比較有幫助。例如,驗證類型設置為“電話號碼”的文本域將只接受 (000) 000-0000 形式的電話號碼。可以輸入這些示例號碼作為提示,以便用戶在瀏覽器中加載頁面時,文本域中將顯示正確的格式。

  1. 在“文檔”窗口中選擇一個驗證文本域構件。
  2. 在屬性檢查器(“窗口”>“屬性”)中的“提示”文本框中輸入提示。

禁止無效字符

您可以禁止用戶在驗證文本域構件中輸入無效字符。例如,如果對具有“整數”驗證類型的構件集選擇此選項,那么,當用戶嘗試鍵入字母時,文本域中將不顯示任何內容。

  1. 在“文檔”窗口中選擇一個驗證文本域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中,選擇“強制模式”選項。

自定義驗證文本域構件

盡管使用屬性檢查器可以簡化對驗證文本域構件的編輯,但是屬性檢查器並不支持自定義的樣式設置任務。您可以修改驗證文本域構件的 CSS,以便根據自己的喜好創建帶有樣式的構件。有關樣式任務的更高級列表,請訪問 www.adobe.com/go/learn_dw_sprytextfield_custom_cn。

下列主題中的所有 CSS 規則都是指 SpryValidationTextField.css 文件中的默認規則。每當您創建 Spry 驗證文本域構件時,Dreamweaver 都會將 SpryValidationTextField.css 文件保存到您的站點的 SpryAssets 文件夾中。查閱此文件會有所幫助,因為其中包含一些有關適用於該構件的各種樣式的注釋信息。

盡管可以直接在相關聯的 CSS 文件中方便地編輯驗證文本域構件的規則,您還可以使用“CSS 樣式”面板來編輯驗證文本域構件的 CSS。“CSS 樣式”面板對於查找分配給構件不同部分的 CSS 類非常有用,在使用面板的“當前”模式時尤其如此。

設置驗證文本域構件錯誤消息文本的樣式

默認情況下,驗證文本域構件的錯誤消息會以紅色顯示,文本周圍有 1 個像素寬的邊框。

 要更改驗證文本域構件錯誤消息的文本樣式,請使用下表來查找相應的 CSS 規則,然后更改默認屬性或者添加自己的文本樣式屬性和值:

要更改的文本

相關 CSS 規則

要更改的相關屬性

錯誤消息文本

.textfieldRequiredState .textfieldRequiredMsg、

.textfieldInvalidFormatState .textfieldInvalidFormatMsg、

.textfieldMinValueState .textfieldMinValueMsg、

.textfieldMaxValueState .textfieldMaxValueMsg、

.textfieldMinCharsState .textfieldMinCharsMsg

或 .textfieldMaxCharsState .textfieldMaxCharsMsg

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

更改驗證文本域構件的背景顏色

 要更改處於各種狀態的驗證文本域構件的背景顏色,請使用下表來查找相應的 CSS 規則,然后更改默認的背景顏色值:

要更改的顏色

相關 CSS 規則

要更改的相關屬性

處於“有效”狀態的構件的背景顏色

.textfieldValidState input 或 input.textfieldValidState

background-color: #B8F5B1;

處於“無效”狀態的構件的背景顏色

input.textfieldRequiredState、.textfieldRequiredState input、input.textfieldInvalidFormatState、.textfieldInvalidFormatState input、input.textfieldMinValueState、.textfieldMinValueState input、input.textfieldMaxValueState、.textfieldMaxValueState input、input.textfieldMinCharsState、.textfieldMinCharsState input、input.textfieldMaxCharsState 或 .textfieldMaxCharsState input

background-color: #FF9F9F;

處於“焦點”狀態的構件的背景顏色

.textfieldFocusState input 或 input.textfieldFocusState

background-color: #FFFFCC;

關於驗證文本區域構件

Spry 驗證文本區域構件是一個文本區域,該區域在用戶輸入幾個文本句子時顯示文本的狀態(有效或無效)。如果文本區域是必填域,而用戶沒有輸入任何文本,該構件將返回一條消息,聲明必須輸入值。

下例顯示處於各種狀態的驗證文本區域構件:

A. 剩余字符計數器 B. 具有焦點的文本區域構件(最大字符數狀態)C. 具有焦點的文本區域構件(有效狀態)

D. 文本區域構件(必需狀態) E. 鍵入字符計數器

驗證文本區域構件具有許多狀態(例如,有效、無效、必需值等)。您可以根據所需的驗證結果,使用屬性檢查器來修改這些狀態的屬性。驗證文本區域構件可以在不同的時間點進行驗證,例如當用戶在構件外部單擊時、鍵入內容時或嘗試提交表單時。

初始狀態

在瀏覽器中加載頁面或用戶重置表單時構件的狀態。

焦點狀態

當用戶在構件中放置插入點時構件的狀態。

有效狀態

當用戶正確地輸入信息且表單可以提交時構件的狀態。

必需狀態

當用戶沒有輸入任何文本時構件的狀態。

最小字符數狀態

當用戶輸入的字符數小於文本區域所要求的最小字符數時,構件的狀態。

最大字符數狀態

當用戶輸入的字符數大於文本區域允許的最大字符數時構件的狀態。

每當驗證文本區域構件以用戶交互方式進入其中一種狀態時,Spry 框架邏輯會在運行時向該構件的 HTML 容器應用特定的 CSS 類。例如,如果用戶嘗試提交表單,但尚未在文本區域中輸入文本,則 Spry 會向該構件應用一個類,使它顯示“需要提供一個值”錯誤消息。用來控制錯誤消息的樣式和顯示狀態的規則包含在構件隨附的 CSS 文件 (SpryValidationTextArea.css) 中。

驗證文本區域構件的默認 HTML 通常位於表單內部,其中包含一個容器 <span> 標簽,該標簽將文本區域的 <textarea> 標簽括起來。在驗證文本區域構件的 HTML 中,在文檔頭中和驗證文本區域構件的 HTML 標記之后還包括腳本標簽。

添加字符計數器

您可以添加字符計數器,以便當用戶在文本區域中輸入文本時知道自己已經輸入了多少字符或者還剩多少字符。默認情況下,當您添加字符計數器時,計數器會出現在構件右下角的外部。

  1. 在“文檔”窗口中選擇一個驗證文本區域構件。
  2. 在屬性檢查器(“窗口”>“屬性”)中,選擇“字符計數”或“其余字符”選項。

注: 只有當您選擇了所允許的最大字符數時,“剩下的字符數”選項才可用。

在設計視圖中顯示構件狀態

  1. 在“文檔”窗口中選擇一個驗證文本區域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中,從“預覽狀態”彈出菜單中選擇要查看的狀態。例如,如果要查看處於“有效”狀態的構件,請選擇“有效”。

更改文本區域的所需狀態

默認情況下,用 Dreamweaver 插入的所有驗證文本區域構件都要求用戶在將構件發布到 Web 頁之前輸入內容。但是,您可以將驗證文本區域設置為可選的。

  1. 在“文檔”窗口中選擇一個驗證文本區域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中,根據自己的喜好選擇或取消選擇“必需”選項。

創建文本區域的提示

您可以向文本區域中添加提示(例如,“請在此處鍵入描述”),以便讓用戶知道他們應當在文本區域中輸入哪種信息。當用戶在瀏覽器中加載頁面時,文本區域中將顯示您添加的提示文本。

  1. 在“文檔”窗口中選擇一個驗證文本區域構件。

2. 在屬性檢查器(“窗口”>“屬性”)中的“提示”文本框中輸入提示。

禁止額外字符

您可以防止用戶在驗證文本區域構件中輸入的文本超過所允許的最大字符數。例如,如果您為某個構件集選擇此選項,以接受不超過 20 個字符的文本,則用戶將無法在文本區域中鍵入 20 個以上的字符。

  1. 在“文檔”窗口中選擇一個驗證文本區域構件。
  2. 在屬性檢查器(“窗口”>“屬性”)中,選擇“禁止額外字符”選項。

自定義驗證文本區域構件

盡管使用屬性檢查器可以簡化對驗證文本區域構件的編輯,但是屬性檢查器並不支持自定義的樣式設置任務。您可以修改驗證文本區域構件的 CSS,以便根據自己的喜好創建帶有樣式的構件。有關樣式任務的更高級列表,請訪問 www.adobe.com/go/learn_dw_sprytextarea_custom_cn。

下列主題中的所有 CSS 規則都是指 SpryValidationTextArea.css 文件中的默認規則。每當您創建 Spry 驗證文本區域構件時,Dreamweaver 都會將 SpryValidationTextArea.css 文件保存到您的站點的 SpryAssets 文件夾中。查閱此文件會有所幫助,因為其中包含一些有關適用於該構件的各種樣式的注釋信息。

盡管可以直接在相關聯的 CSS 文件中方便地編輯驗證文本區域構件的規則,您還可以使用“CSS 樣式”面板來編輯驗證文本區域構件的 CSS。“CSS 樣式”面板對於查找分配給構件不同部分的 CSS 類非常有用,在使用面板的“當前”模式時尤其如此。

設置驗證文本區域構件錯誤消息文本的樣式

默認情況下,驗證文本區域構件的錯誤消息會以紅色顯示,文本周圍有 1 個像素寬的邊框。

 要更改驗證文本區域構件錯誤消息的文本樣式,請使用下表來查找相應的 CSS 規則,然后更改默認屬性或者添加自己的文本樣式屬性和值:

要更改的文本

相關 CSS 規則

要更改的相關屬性

錯誤消息文本

.textareaRequiredState .textareaRequiredMsg、.textareaMinCharsState .textareaMinCharsMsg 或 .textareaMaxCharsState .textareaMaxCharsMsg

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

更改驗證文本區域構件的背景顏色

 要更改處於各種狀態的驗證文本區域構件的背景顏色,請使用下表來查找相應的 CSS 規則,然后更改默認的背景顏色值:

要更改的背景顏色

相關 CSS 規則

要更改的相關屬性

處於“有效”狀態的構件的背景顏色

.textareaValidState textarea 或 textarea.textareaValidState

background-color: #B8F5B1;

處於“無效”狀態的構件的背景顏色

textarea.textareaRequiredState、.textareaRequiredState textarea、textarea.textareaMinCharsState、.textareaMinCharsState textarea、textarea.textareaMaxCharsState 或 .textareaMaxCharsState textarea

background-color: #FF9F9F;

處於“焦點”狀態的構件的背景顏色

.textareaFocusState textarea 或 textarea.textareaFocusState

background-color: #FFFFCC;

於驗證選擇構件

Spry 驗證選擇構件是一個下拉菜單,該菜單在用戶進行選擇時會顯示構件的狀態(有效或無效)。例如,您可以插入一個包含狀態列表的驗證選擇構件,這些狀態按不同 的部分組合並用水平線分隔。如果用戶意外選擇了某條分界線(而不是某個狀態),驗證選擇構件會向用戶返回一條消息,聲明他們的選擇無效。

下例顯示一個處於展開狀態的驗證選擇構件,以及該構件在各種狀態下的折疊形式:

A. 具有焦點的驗證選擇構件 B. 選擇構件(有效狀態) C. 選擇構件(必需狀態) D. 選擇構件(無效狀態)

驗證選擇構件具有許多狀態(例如,有效、無效、必需值等)。您可以根據所需的驗證結果,使用屬性檢查器來修改這些狀態的屬性。驗證選擇構件可以在不同的時間點進行驗證,例如當用戶在構件外部單擊時、進行選擇時或嘗試提交表單時。

初始狀態

在瀏覽器中加載頁面或用戶重置表單時構件的狀態。

焦點狀態

當用戶單擊構件時構件的狀態。

有效狀態

當用戶選擇了有效項目且表單可以提交時構件的狀態。

無效狀態

當用戶選擇了無效項目時構件的狀態。

必需狀態

當用戶沒有選擇有效項目時構件的狀態。

每當驗證選擇構件以用戶交互方式進入其中一種狀態時,Spry 框架邏輯會在運行時向該構件的 HTML 容器應用特定的 CSS 類。例如,如果用戶嘗試提交表單,但是未從菜單中選擇項目,Spry 會向該構件應用一個類,使它顯示“請選擇一個項目”錯誤消息。用來控制錯誤消息的樣式和顯示狀態的規則包含在構件隨附的 CSS 文件 (SpryValidationSelect.css) 中。

驗證選擇構件的默認 HTML 通常位於表單內部,其中包含一個容器 <span> 標簽,該標簽將文本區域的 <select> 標簽括起來。在驗證選擇構件的 HTML 中,在文檔頭中和驗證選擇構件的 HTML 標記之后還包括腳本標簽。

插入驗證選擇構件

  1. 選擇“插入”>“Spry”>“Spry 驗證選擇”。
  2. 完成“輸入標簽輔助功能屬性”對話框,然后單擊“確定”。
  3. 在“代碼”視圖中,添加包含菜單項和值的選項標簽。Dreamweaver 不會自動添加標簽。有關詳細信息,請參閱以上主題。

指定驗證發生的時間

您可以設置驗證發生的時間(包括用戶在構件外部單擊時、鍵入內容時或嘗試提交表單時)。

  1. 在“文檔”窗口中選擇一個驗證選擇構件。
  2. 在屬性檢查器(“窗口”>“屬性”)中,選擇用來指示您希望驗證何時發生的選項。可以選擇所有的選項,也可以一個都不選。

模糊

當用戶在構件的外部單擊時驗證。

更改

在用戶進行選擇時驗證。

提交

當用戶嘗試提交表單時驗證。

在設計視圖中顯示構件狀態

  1. 在“文檔”窗口中選擇一個驗證選擇構件。

2. 在屬性檢查器(“窗口”>“屬性”)中,從“預覽狀態”彈出菜單中選擇要查看的狀態。例如,如果要查看處於“有效”狀態的構件,請選擇“有效”。

禁止或允許空值

默認情況下,用 Dreamweaver 插入的所有驗證選擇構件都要求用戶在將構件發布到 Web 頁之前,選擇具有相關值的菜單項。但是,您可以禁用此選項。

  1. 在“文檔”窗口中選擇一個驗證選擇構件。
  2. 在屬性檢查器(“窗口”>“屬性”)中,根據自己的喜好選擇或取消選擇“不允許空值”選項。

指定無效的值

您可以指定一個值,當用戶選擇與該值相關的菜單項時,該值將注冊為無效。例如,如果您指定 -1 是無效值,並將該值賦給某個選項標簽,則當用戶選擇該菜單項時,該構件將返回一條錯誤消息。

<option value="-1"> ------------------- </option>
  1. 在“文檔”窗口中選擇一個驗證選擇構件。
  2. 在屬性檢查器(“窗口”>“屬性”)中,在“無效值”框中輸入一個要用作無效值的數字。

自定義驗證選擇構件

盡管使用屬性檢查器可以簡化對驗證選擇構件的編輯,但是屬性檢查器並不支持自定義的樣式設置任務。您可以修改驗證選擇構件的 CSS,以便根據自己的喜好創建帶有樣式的構件。有關樣式任務的更高級列表,請訪問 www.adobe.com/go/learn_dw_spryselect_custom_cn。

下列主題中的所有 CSS 規則都是指 SpryValidationSelect.css 文件中的默認規則。每當您創建 Spry 驗證選擇構件時,Dreamweaver 都會將 SpryValidationSelect.css 文件保存到您的站點的 SpryAssets 文件夾中。查閱此文件會有所幫助,因為其中包含一些有關適用於該構件的各種樣式的注釋信息。

盡管可以直接在相關聯的 CSS 文件中方便地編輯驗證選擇構件的規則,您還可以使用“CSS 樣式”面板來編輯驗證選擇構件的 CSS。“CSS 樣式”面板對於查找分配給構件不同部分的 CSS 類非常有用,在使用面板的“當前”模式時尤其如此。

設置驗證選擇構件錯誤消息文本的樣式

默認情況下,驗證選擇構件的錯誤消息會以紅色顯示,文本周圍有 1 個像素寬的邊框。

 要更改驗證選擇構件錯誤消息的文本樣式,請使用下表來查找相應的 CSS 規則,然后更改默認屬性或者添加自己的文本樣式屬性和值:

要設置樣式的文本

相關 CSS 規則

要更改的相關屬性

錯誤消息文本

.selectRequiredState .selectRequiredMsg 或 .selectInvalidState .selectInvalidMsg

color: #


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM