Forms(自适应表单和HTML5表单)使用jQuery、Backbone.js和Undersore.js库进行外观和脚本编写。 表单还使用jQuery UI Widgets架构来处理表单中的所有交互元素(如字段和按钮)。 此架构使表单开发人员能够在Forms中使用一组丰富的可用jQuery小组件和插件。 您还可以在从用户(如leadDigits/trailDigits限制或实施图片子句)中捕获数据时实施表单特定逻辑。 表单开发人员可以创建并使用自定义设备来改进数据捕获体验,并使其更加用户友好。
本文面向对jQuery和jQuery小组件有充分了解的开发人员。 它提供了对外观框架的分析,并允许开发人员为表单字段创建替代外观。
外观框架依赖于各种选项、事件(触发器)和函数来捕获用户与表单的交互,并响应模型更改以通知最终用户。 此外:
以下是设置的全局选项。 这些选项适用于每个字段。
属性 | 描述 |
---|---|
name | 用于在脚本表达式中指定此对象或事件的标识符。 例如,此属性指定主机应用程序的名称。 |
选定 | 字段的实际值。 |
displayValue | 将显示字段的此值。 |
screenReaderText | 屏幕Reader使用此值讲述有关该字段的信息。 表单提供值,您可以覆盖该值。 |
tabIndex | 字段在表单的制表符序列中的位置。 仅当要更改表单的默认制表符顺序时,才覆盖tabIndex。 |
角色 | 元素的角色,例如“标题”或“表”。 |
高度 | 小组件的高度。 以像素为单位指定。 |
宽度 | 小组件的宽度。 以像素为单位指定。 |
访问 | 用于访问容器对象(如子表单)内容的控件。 |
paraStyles | XFA元素对小组件的para属性。 |
dir | 文本的方向。 可能的值为ltr(从左到右)和rtl(从右到左)。 |
除了这些选项外,框架还提供了一些其他选项,这些选项会因字段类型而异。 下面列出了特定于字段的选项的详细信息。
为了与表单框架进行交互,小组件会触发一些事件,以使表单脚本正常工作。 如果小组件未引发这些事件,则在该字段的表单中编写的某些脚本将不起作用。
事件 | 描述 |
---|---|
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 | 此事件将触发,以允许引擎运行在字段中编写的“change”脚本。 触发事件的语法为 (小组件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT) |
XFA_CLICK_EVENT | 只要单击字段,就会触发此事件。 它允许引擎运行在字段上编写的“click”脚本。 触发事件的语法为 (小组件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT) |
外观框架会调用在自定义小组件中实施的小组件的某些功能。 小组件必须实施以下功能:
函数 | 描述 |
---|---|
焦点:function() | 关注现场。 |
单击:function() | 重点关注字段并调用XFA_CLICK_EVENT。 |
markError:function(errorMessage, errorType) 注意:仅适用于HTML5表单。 |
向小组件发送错误消息和错误类型。 小组件会显示错误。 |
clearError:function() 注意:仅适用于HTML5表单。 |
如果字段中的错误已修复,则调用。 小组件可隐藏错误。 |
所有自定义小部件都应符合上述规范。 要使用不同字段的功能,小组件必须符合该特定字段的准则。
选项 | 描述 |
---|---|
多线 | 如果字段支持输入换行符,则返回true;否则返回false。 |
maxChars | 可在字段中输入的最大字符数。 |
limitLengthToVisibleArea 注意:仅适用于HTML5表单 |
指定当文本的宽度超过小组件的宽度时文本字段的行为。 |
选项 | 描述 |
---|---|
选定 |
选定值的数组。 |
项目 |
要显示为选项的对象数组。 每个对象都包含两个属性 — save:保存、显示的值:值。 |
可编辑 注意:仅适用于HTML5表单。 |
如果值为true,则小组件中会启用自定义文本条目。 |
displayValue |
要显示的值数组。 |
多选 |
如果允许多个选择,则返回true;否则返回false。 |
函数 | 描述 |
---|---|
addItem: function(itemValues) |
将项目添加到列表。 |
deleteItem:function(nIndex) nIndex:要从列表中删除的项的索引 |
从列表中删除选项。 |
clearItems: function() |
清除列表中的所有选项。 |
选项 | 描述 |
---|---|
dataType | 表示字段数据类型(整数/小数)的字符串。 |
leadDigits | 小数中允许的最大前导位数。 |
fracDigits | 小数中允许的最大小数位数。 |
零 | 字段区域设置中零的字符串表示形式。 |
小数 | 字段区域设置中小数的字符串表示形式。 |
选项 | 描述 |
---|---|
values | 值数组(开/关/中性)。 它是checkButton不同状态的值数组。 values[0]是状态为ON时的值,values[1]是状态为OFF时的值, |
国家 | 允许的状态数。 两个用于自适应表单(开、关),三个用于HTML5表单(开、关、中性)。 |
状态 | 元素的当前状态。 两个用于自适应表单(开、关),三个用于HTML5表单(开、关、中性)。 |
选项 | 描述 |
---|---|
天 | 该字段的本地化天数名称。 |
个月 | 该字段的本地化月份名称。 |
零 | 数字0的本地化文本。 |
clearText | 用于清除按钮的本地化文本。 |