在HTML5表單中建立自定義外觀

您可以將自訂Widget外掛至行動Forms。 您可以擴展現有的jQuery Widget，或使用外觀框架開發自己的自定義Widget。 XFA引擎使用各種小工具，有關詳細資訊，請參閱適用性和HTML5表單🔗的外觀架構。

預設和自訂介面工具集
的範例： 預設和自訂介面工具集的範例

將自訂Widget與HTML5表單整合

建立設定檔 

您可以建立設定檔或選擇現有設定檔以新增自訂介面工具集。 有關建立配置式的詳細資訊，請參閱建立自定義配置式。

建立Widget

HTML5表單提供介面工具集架構的實作，可延伸以建立新介面工具集。 實作是jQuery Widget abstractWidget，可延伸以編寫新Widget。 只有延伸/覆寫下列功能，新介面工具集才能運作。

函式/類 說明
轉譯 呈現函式返回構件的預設HTML元素的jQuery對象。 預設的HTML元素應為可聚焦類型。 例如， <a>、<input>和<li>。 傳回的元素會作為$userControl使用。 如果$userControl指定了上述約束，則AbstractWidget類的函式將如預期工作，否則某些常見API（焦點、按一下）需要更改。
getEventMap 傳回映射以將HTML事件轉換為XFA事件。
{
blur:XFA_EXIT_EVENT,
}
此範例顯示模糊是HTML事件，而XFA_EXIT_EVENT是對應的XFA事件。
getOptionsMap 傳回地圖，詳細說明在變更選項時要執行的動作。 鍵是提供給介面工具集的選項，值是每當檢測到該選項中的更改時調用的函式。 介面工具集為所有公共選項（value和displayValue除外）提供處理程式
getCommitValue 每當Widget的值儲存在XFAModel中時（例如，在textField的退出事件上）,Widget架構就會載入函式。 實施應傳回儲存在介面工具集中的值。 處理常式會隨選項的新值提供。
showValue 依預設，在輸入事件時的XFA中，會顯示欄位的rawValue。 呼叫此函式是為了向使用者顯示rawValue。
showDisplayValue 依預設，在退出事件時的XFA中，會顯示欄位的formattedValue 。 調用此函式是為了向用戶顯示formattedValue。

若要建立您自己的介面工具集，請在上述建立的設定檔中，納入JavaScript檔案的參考，該檔案包含覆寫的函式和新新增的函式。 例如， sliderNumericFieldWidget​是數值欄位的介面工具集。 若要在您的設定檔中於標題區段使用介面工具集，請加入下列行：

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

使用XFA指令碼引擎註冊自訂Widget 

當自訂介面工具集程式碼準備就緒時，請使用registerConfig表單橋接器的API，向指令碼引擎註冊介面工具集。 此參數會以widgetConfigObject為輸入。

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject

介面工具集設定會以JSON物件（索引鍵值配對的集合）提供，其中索引鍵可識別欄位，值代表要與這些欄位搭配使用的介面工具集。 範例設定如下：

*{*

*“identifier1” : “customwidgetname”,  
“identifier2” : “customwidgetname2”,  
..  
}*

其中，「identifier」是jQuery CSS選取器，代表特定欄位、特定類型的一組欄位或所有欄位。 下列列出不同情況下的識別碼值：

識別碼類型 識別碼 說明
具有名稱欄位名稱的特定欄位 識別碼："div.fieldname" 所有名為'fieldname'的欄位都會使用介面工具集呈現。
所有類型為'type'的欄位（其中type為NumericField、DateField等）。: 識別碼："div.type" 對於Timefield和DateTimeField，類型為文本欄位，因為不支援這些欄位。
所有欄位 識別碼："div.field"

本頁內容