最適化和HTML5表單的外觀架構

Forms(適用性表單和HTML5表單)使用 jQuery, 骨幹.js 和 Underscore.js 用於外觀和指令碼的庫。 表單也使用 jQuery UI 介面工具集 表單中所有互動式元素（例如欄位和按鈕）的架構。 此架構可讓表單開發人員在Forms中使用一組豐富的可用jQuery Widget和外掛程式。 您也可以實作表單特定邏輯，同時從使用者（例如leadDigits/trailDigits限制）擷取資料或實作圖片子句。 表單開發人員可建立並使用自訂的特色，以改善資料擷取體驗，並讓其更方便使用。

本文適用於對jQuery和jQuery Widget有充分了解的開發人員。 它提供外觀架構的洞察力，並可讓開發人員為表單欄位建立替代外觀。

外觀框架依賴各種選項、事件（觸發器）和函式來捕獲用戶與表單的交互，並響應模型更改以通知最終用戶。 此外：

  • 框架提供一組用於欄位外觀的選項。 這些選項為機碼值組，分為兩個類別：常用選項和欄位類型特定選項。
  • 在合約中，外觀會觸發一組事件，例如進入和退出。
  • 實施一組函式時需要外觀。 有些函式是常見的，有些則是欄位類型函式專用的。

常見選項

以下是設定的全域選項。 這些選項適用於每個欄位。

屬性 說明
名稱 用於在指令碼表達式中指定此對象或事件的標識符。 例如，此屬性指定主機應用程式的名稱。
值 欄位的實際值。
displayValue 隨即顯示欄位的此值。
screenReaderText 螢幕Reader使用此值提供欄位的相關資訊旁白。 表單會提供值，您可以覆寫值。
tabIndex 欄位在表單的索引標籤序列中的位置。 僅當要更改表單的預設頁簽順序時，才覆蓋tabIndex。
角色 元素的角色，例如標題或表。
高度 介面工具集的高度。 以像素指定。
寬度 介面工具集的寬度。 以像素指定。
存取 用於訪問容器對象（如子表單）的內容的控制項。
paraStyles Widget的XFA元素的para屬性。
dr 文字的方向。 可能的值為ltr（從左到右）和rtl（從右到左）。

除了這些選項外，框架還提供了一些其他選項，這些選項會根據欄位類型而有所不同。 欄位特定選項的詳細資訊列於下方。

與表單架構互動

若要與表單架構互動，Widget會觸發某些事件，讓表單指令碼可運作。 如果介面工具集未擲回這些事件，則在該欄位表單中撰寫的某些指令碼將無法運作。

由介面工具集觸發的事件

Event 說明
XFA_ENTER_EVENT 每當欄位聚焦時，就會觸發此事件。 它可讓「enter」指令碼在欄位上執行。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT 每當使用者離開欄位時，就會觸發此事件。 它可讓引擎設定欄位的值，並執行其「退出」指令碼。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT 觸發此事件是為了讓引擎執行寫入欄位的「變更」指令碼。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT 只要按一下欄位，就會觸發此事件。 它可讓引擎執行寫入欄位的「點按」指令碼。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

由介面工具集實作的API

外觀框架調用了在自定義Widget中實現的Widget的一些功能。 介面工具集必須實作下列函式：

函數 說明
重點：function() 專注於現場。
按一下：function() 將焦點放在欄位上，並呼叫XFA_CLICK_EVENT。

markError:function(errorMessage, errorType)

錯誤消息：字串 代表錯誤
errorType:字串("warning"/"error")

附註:僅適用於HTML5表單。

 傳送錯誤訊息和錯誤類型至介面工具集。 介面工具集會顯示錯誤。

clearError:function()

附註:僅適用於HTML5表單。

 若欄位中的錯誤已修正，則呼叫。 介面工具集會隱藏錯誤。

欄位類型的特定選項

所有自訂Widget都應符合上述規格。 若要使用不同欄位的功能，介面工具集必須符合該特定欄位的准則。

文本編輯：文字欄位

選項 說明
多線 如果欄位支援輸入新行字元，則為true，否則為false。
maxChars 可在欄位中輸入的字元數上限。

limitLengthToVisibleArea

附註:僅適用於HTML5表單

 指定當文本寬度超過介面工具集的寬度時的文本欄位行為。

ChoiceList:DropDownList, ListBox

選項 說明
值
 所選值的陣列。
項目
 要顯示為選項的對象陣列。 每個物件都包含兩個屬性 —
儲存：要保存的值，顯示：值。

可編輯

附註:僅適用於HTML5表單。

 如果值為true，則會在介面工具集中啟用自訂文字輸入。
displayValue
 要顯示的值陣列。
多選
 如果允許多個選取，則為true，否則為false。

API

函數 說明

addItem: function(itemValues)
itemValues:包含顯示和儲存值的物件
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}

 將項目新增至清單。
deleteItem:函式(nIndex)
索引：要從清單中刪除的項的索引


 從清單中刪除選項。
clearItems: function() 清除清單中的所有選項。

數值編輯：數值欄位，小數欄位

選項 說明
dataType 代表欄位資料類型的字串（整數/小數）。
leadDigits 小數位數中允許的最大前導位數。
fracDigits 小數位數中允許的最大小數位數。
零 字串表示在欄位的地區中為零。
小數 字串表示欄位地區中小數的字串。

CheckButton:RadioButton, CheckBox

選項 說明
values

值陣列（開/關/中性）。

它是checkButton不同狀態的值陣列。 值[0]是狀態為ON時的值，值[1]是狀態為OFF時的值，
values[2]是狀態為NEUTRAL時的值。 值陣列的長度等於state選項的值。
國家

允許的狀態數。

兩個適用於最適化表單（開啟、關閉），三個適用於HTML5個表單（開啟、關閉、中性）。
狀態

元素的目前狀態。

兩個適用於最適化表單（開啟、關閉），三個適用於HTML5個表單（開啟、關閉、中性）。

DateTimeEdit:（日期欄位）

選項 說明
天 該欄位本地化的天數名稱。
個月 該欄位的本地化月份名稱。
零 數字0的本地化文本。
clearText 清除按鈕的本地化文字。

本頁內容