在HTML5表單中建立自訂外觀 create-custom-appearances-in-html-forms

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

管理員
使用者
開發人員

您可以將自訂Widget插入Mobile Forms。您可以擴充現有的jQuery Widget，或使用外觀架構開發您自己的自訂Widget。 XFA引擎使用各種Widget，如需詳細資訊，請參閱最適化和HTML5表單的外觀架構。

預設和自訂Widget的範例

建立設定檔 create-a-profile-nbsp

您可以建立設定檔或選擇現有設定檔以新增自訂Widget。如需建立設定檔的詳細資訊，請參閱建立自訂設定檔。

HTML5表單提供Widget架構的實作，您可以擴充此實作來建立新的Widget。實作是jQuery Widget abstractWidget，可以延伸以寫入新的Widget。只有延伸/覆寫下列提及的函式，才能讓新的Widget正常運作。

函式/類別

說明

轉譯

轉譯器函式會傳回Widget預設HTML元素的jQuery物件。預設HTML元素應為可聚焦型別。例如，<a>、<input>和<li>。傳回的元素會用作$userControl。如果$userControl指定上述條件約束，則AbstractWidget類別的函式會如預期般運作，否則某些常見的API （焦點、點按）需要變更。

getEventMap

傳回對應以將HTML事件轉換為XFA事件。
{
blur： XFA_EXIT_EVENT，
}
此範例顯示模糊是HTML事件，而XFA_EXIT_EVENT是相對應的XFA事件。

getOptionsMap

傳回提供變更選項時執行之動作詳細資訊的地圖。索引鍵是提供給Widget的選項，值是偵測到選項變更時所呼叫的函式。 Widget為所有常用選項（value和displayValue除外）提供處理常式

getcommitvalue

每當Widget的值儲存在XFAModel中時（例如，在textField的退出事件時），Widget架構就會載入函式。實作應傳回儲存在Widget中的值。處理常式會提供選項的新值。

showValue

依預設，在輸入事件的XFA中，會顯示欄位的rawValue。呼叫此函式是為了向使用者顯示rawValue。

Showdisplayvalue

依預設，在退出事件的XFA中，會顯示欄位的formattedValue 。呼叫此函式是為了向使用者顯示formattedValue。

若要建立您自己的Widget，請在上述建立的設定檔中，加入JavaScript檔案的參照，此檔案包含覆寫函式和新加入的函式。例如，sliderNumericFieldWidget 是數值欄位的Widget。若要在標題區段的設定檔中使用Widget，請包含下列行：

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

當自訂Widget程式碼準備就緒時，請使用適用於表單Bridge的registerConfigAPI，以指令碼引擎註冊Widget。它以widgetConfigObject作為輸入。

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

widgetConfigObject widgetconfigobject

Widget設定是以JSON物件（索引鍵值配對的集合）形式提供，其中索引鍵可識別欄位，值代表要與這些欄位搭配使用的Widget。範例設定看起來像這樣：

*{*

*"identifier1" : "customwidgetname",
"identifier2" : "customwidgetname2",
..
}*

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

識別碼型別

識別碼

說明

具有名稱fieldname的特定欄位

識別碼："div.fieldname"

所有名為「fieldname」的欄位都會使用Widget轉譯。

'type'型別的所有欄位（其中type為NumericField、DateField等）：

識別碼： "div.type"

對於Timefield和DateTimeField，型別是textfield，因為這些欄位不受支援。

所有欄位

識別碼： "div.field"

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2

在HTML5表單中建立自訂外觀 create-custom-appearances-in-html-forms

整合自訂Widget與HTML5表單 integrating-custom-widgets-with-html-forms

建立設定檔 create-a-profile-nbsp

建立 Widget create-a-widget

使用XFA Scripting Engine註冊自訂Widget register-custom-widget-with-xfa-scripting-engine-nbsp

widgetConfigObject widgetconfigobject