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) |
外觀框架調用了在自定義Widget中實現的Widget的一些功能。 介面工具集必須實作下列函式:
函數 | 說明 |
---|---|
重點:function() | 專注於現場。 |
按一下:function() | 將焦點放在欄位上,並呼叫XFA_CLICK_EVENT。 |
markError:function(errorMessage, errorType) 附註:僅適用於HTML5表單。 |
傳送錯誤訊息和錯誤類型至介面工具集。 介面工具集會顯示錯誤。 |
clearError:function() 附註:僅適用於HTML5表單。 |
若欄位中的錯誤已修正,則呼叫。 介面工具集會隱藏錯誤。 |
所有自訂Widget都應符合上述規格。 若要使用不同欄位的功能,介面工具集必須符合該特定欄位的准則。
選項 | 說明 |
---|---|
多線 | 如果欄位支援輸入新行字元,則為true,否則為false。 |
maxChars | 可在欄位中輸入的字元數上限。 |
limitLengthToVisibleArea 附註:僅適用於HTML5表單 |
指定當文本寬度超過介面工具集的寬度時的文本欄位行為。 |
選項 | 說明 |
---|---|
值 |
所選值的陣列。 |
項目 |
要顯示為選項的對象陣列。 每個物件都包含兩個屬性 — 儲存:要保存的值,顯示:值。 |
可編輯 附註:僅適用於HTML5表單。 |
如果值為true,則會在介面工具集中啟用自訂文字輸入。 |
displayValue |
要顯示的值陣列。 |
多選 |
如果允許多個選取,則為true,否則為false。 |
函數 | 說明 |
---|---|
addItem: function(itemValues) |
將項目新增至清單。 |
deleteItem:函式(nIndex) 索引:要從清單中刪除的項的索引 |
從清單中刪除選項。 |
clearItems: function() |
清除清單中的所有選項。 |
選項 | 說明 |
---|---|
dataType | 代表欄位資料類型的字串(整數/小數)。 |
leadDigits | 小數位數中允許的最大前導位數。 |
fracDigits | 小數位數中允許的最大小數位數。 |
零 | 字串表示在欄位的地區中為零。 |
小數 | 字串表示欄位地區中小數的字串。 |
選項 | 說明 |
---|---|
values | 值陣列(開/關/中性)。 它是checkButton不同狀態的值陣列。 值[0]是狀態為ON時的值,值[1]是狀態為OFF時的值, |
國家 | 允許的狀態數。 兩個適用於最適化表單(開啟、關閉),三個適用於HTML5個表單(開啟、關閉、中性)。 |
狀態 | 元素的目前狀態。 兩個適用於最適化表單(開啟、關閉),三個適用於HTML5個表單(開啟、關閉、中性)。 |
選項 | 說明 |
---|---|
天 | 該欄位本地化的天數名稱。 |
個月 | 該欄位的本地化月份名稱。 |
零 | 數字0的本地化文本。 |
clearText | 清除按鈕的本地化文字。 |