表單(最適化表單和HTML5表單)使用jQuery、Backbone.js和Undershore.js程式庫來呈現外觀和指令碼。 表單中的所有互動元素(例如欄位和按鈕)也使用jQuery UIWidgets架構。 此架構可讓表單開發人員在表單中使用一組豐富的可用jQuery Widget和外掛程式。 您也可以在擷取來自使用者(例如leadDigits/trailDigits限制或實作圖片子句)的資料時,實作表格特定邏輯。 表單開發人員可建立並使用自訂的附加功能,以改善資料擷取體驗,並讓它更方便使用。
本文是為對jQuery和jQuery Widget有充分認識的開發人員而設計。 它提供外觀架構的洞察力,讓開發人員可為表單欄位建立替代外觀。
外觀框架依賴各種選項、事件(觸發器)和函式來擷取使用者與表單的互動,並回應模型變更以通知使用者。 此外:
以下是設定全局選項。 這些選項適用於每個欄位。
屬性 | 說明 |
---|---|
名稱 | 用於在指令碼表達式中指定此對象或事件的標識符。 例如,此屬性指定主機應用程式的名稱。 |
值 | 欄位的實際值。 |
displayValue | 此時會顯示欄位的此值。 |
screenReaderText | 螢幕閱讀程式會使用此值來說明欄位的相關資訊。 表單提供值,您可以覆寫值。 |
tabIndex | 欄位在表單的制表符序列中的位置。 僅當要更改表單的預設頁籤順序時,才覆蓋tabIndex。 |
角色 | 元素的角色,例如標題或表格。 |
高度 | 介面工具集的高度。 它以像素指定。 |
寬度 | 介面工具集的寬度。 它以像素指定。 |
存取 | 用於訪問容器對象(如子表單)內容的控制項。 |
paraStyles | XFA元素對介面工具集的para屬性。 |
dir | 文字的方向。 可能的值為ltr(從左到右)和rtl(從右到左)。 |
除了這些選項外,框架還提供了一些其他選項,這些選項會因欄位類型而異。 欄位特定選項的詳細資訊列於下方。
若要與表單架構互動,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中實現的Widget的一些功能。 介面工具集必須實作下列功能:
函數 | 說明 |
---|---|
焦點:函式() | 專注於現場。 |
按一下:函式() | 將焦點放在欄位上,並呼叫XFA_CLICK_EVENT。 |
markError:function(errorMessage, errorType) 注意:僅適用於HTML5表單。 |
傳送錯誤訊息和錯誤類型至介面工具集。 介面工具集會顯示錯誤。 |
clearError:函式() 注意:僅適用於HTML5表單。 |
如果欄位中的錯誤已修正,則呼叫。 介面工具集會隱藏錯誤。 |
所有自訂Widget都應符合上述規格。 若要使用不同欄位的功能,介面工具集必須符合該特定欄位的准則。
選項 | 說明 |
---|---|
多行 | 如果欄位支援輸入新行字元,則返回true;否則返回false。 |
maxChars | 可在欄位中輸入的字元數上限。 |
limitLengthToVisibleArea 注意:僅適用於HTML5表單 |
指定文字寬度超過介面工具集寬度時的文字欄位行為。 |
選項 | 說明 |
---|---|
值 |
選定值的陣列。 |
項目 |
要顯示為選項的對象陣列。 每個對象包含兩個屬性- 保存:要保存的值,顯示:值以顯示。 |
可編輯 注意:僅適用於HTML5表單。 |
如果值為true,則在Widget中啟用自訂文字輸入。 |
displayValue |
要顯示的值陣列。 |
multiselect |
如果允許多個選擇,則返回true,否則返回false。 |
函數 | 說明 |
---|---|
addItem: function(itemValues) |
新增項目至清單。 |
deleteItem:函式(nIndex) nIndex:要從清單 中刪除的項的索引 |
從清單中刪除選項。 |
clearItems: function() |
清除清單中的所有選項。 |
選項 | 說明 |
---|---|
dataType | 代表欄位資料類型的字串(整數/小數)。 |
leadDigits | 小數數字中允許的最大前導位數。 |
fracDigits | 小數數字中允許的最大小數位數。 |
零 | 欄位區域設定中零的字串表示。 |
小數點 | 欄位區域設定中小數的字串表示。 |
選項 | 說明 |
---|---|
values | 值陣列(開/關/中性)。 它是checkButton不同狀態的值陣列。 值[0]是狀態為ON時的值,值[1]是狀態為OFF時的值, |
州 | 允許的狀態數。 兩個用於最適化表單(開啟、關閉),三個用於HTML5表單(開啟、關閉、中性)。 |
狀態 | 元素的當前狀態。 兩個用於最適化表單(開啟、關閉),三個用於HTML5表單(開啟、關閉、中性)。 |
選項 | 說明 |
---|---|
天 | 該欄位的本地化天數名稱。 |
個月 | 該欄位的本地化月份名稱。 |
零 | 數字0的本地化文本。 |
clearText | 清除按鈕的本地化文字。 |