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

表單（最適化表單和HTML5表單）使用jQuery、Backbone.js和Undershore.js程式庫來呈現外觀和指令碼。 表單中的所有互動元素（例如欄位和按鈕）也使用jQuery UI​Widgets​架構。 此架構可讓表單開發人員在表單中使用一組豐富的可用jQuery Widget和外掛程式。 您也可以在擷取來自使用者（例如leadDigits/trailDigits限制或實作圖片子句）的資料時，實作表格特定邏輯。 表單開發人員可建立並使用自訂的附加功能，以改善資料擷取體驗，並讓它更方便使用。

本文是為對jQuery和jQuery Widget有充分認識的開發人員而設計。 它提供外觀架構的洞察力，讓開發人員可為表單欄位建立替代外觀。

外觀框架依賴各種選項、事件（觸發器）和函式來擷取使用者與表單的互動，並回應模型變更以通知使用者。 此外：

  • 框架提供一組欄位外觀的選項。 這些選項是鍵值配對，並分為兩類：常用選項和欄位類型特定選項。
  • 外觀是合約的一部分，會觸發一組事件，例如進入和退出。
  • 實施一組函式時需要外觀。 有些函式是常用的，而有些函式是特定於欄位類型函式。

常用選項

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

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

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

與表單框架的交互

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

由Widget觸發的事件

事件 說明
XFA_ENTER_EVENT 每當欄位處於焦點時，就會觸發此事件。 它允許在欄位上運行"enter"指令碼。 觸發事件的語法為
(widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT 每當使用者離開欄位時，就會觸發此事件。 它可讓引擎設定欄位的值，並執行其「退出」指令碼。 觸發事件的語法為
(widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT 觸發此事件可讓引擎執行寫入欄位的「變更」指令碼。 觸發事件的語法為
(widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT 只要按一下欄位，就會觸發此事件。 它可讓引擎執行寫入欄位的「點按」指令碼。 觸發事件的語法為
(widget)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

由Widget實作的API

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

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

markError:function(errorMessage, errorType)

errorMessage:字串代表error
errorType:字串("warning"/"error")

注意:僅適用於HTML5表單。

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

clearError:函式()

注意:僅適用於HTML5表單。

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

欄位類型的特定選項

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

文字編輯：文字欄位

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

limitLengthToVisibleArea

注意:僅適用於HTML5表單

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

ChoiceList:DropDownList, ListBox

選項 說明
值
 選定值的陣列。
項目
 要顯示為選項的對象陣列。 每個對象包含兩個屬性-
保存：要保存的值，顯示：值以顯示。

可編輯

注意:僅適用於HTML5表單。

 如果值為true，則在Widget中啟用自訂文字輸入。
displayValue
 要顯示的值陣列。
multiselect
 如果允許多個選擇，則返回true，否則返回false。

API

函數 說明

addItem: function(itemValues)
itemValues:包含顯示和保存值
{sDisplayVal的對象：<displayValue>, sSaveVal:<save value>}

 新增項目至清單。
deleteItem:函式(nIndex)
nIndex:要從清單


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

數值編輯：NumericField、DecimalField

選項 說明
dataType 代表欄位資料類型的字串（整數／小數）。
leadDigits 小數數字中允許的最大前導位數。
fracDigits 小數數字中允許的最大小數位數。
零 欄位區域設定中零的字串表示。
小數點 欄位區域設定中小數的字串表示。

CheckButton:RadioButton, CheckBox

選項 說明
values

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

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

允許的狀態數。

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

元素的當前狀態。

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

DateTimeEdit:(DateField)

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

本頁內容