Forms(自适应表单和HTML5表单)使用jQuery、Backbone.js和下划线。js库进行外观和脚本编写。 表单还将jQuery UI 构件体系结构用于表单中的所有交互元素(如字段和按钮)。 此体系结构使表单开发人员能够使用Forms的丰富的可用jQuery构件和插件。 您还可以在从用户(如leadDigits/trailDigits限制或实施图片子句)捕获数据时实现表单特定逻辑。 表单开发人员可以创建和使用自定义外观来改进数据捕获体验,并使其更易用。
本文面向对jQuery和jQuery构件有充分认识的开发人员。 它提供对外观框架的洞察,使开发人员能为表单字段创建替代外观。
外观框架依赖各种选项、事件(触发器)和函数来捕获用户与表单的交互,并响应模型更改以通知最终用户。 此外:
以下是设置全局选项。 这些选项适用于每个字段。
属性 | 描述 |
---|---|
name | 用于在脚本表达式中指定此对象或事件的标识符。 例如,此属性指定主机应用程序的名称。 |
选定 | 字段的实际值。 |
displayValue | 将显示该字段的此值。 |
screenReaderText | 屏幕Reader使用此值来解说有关字段的信息。 表单提供值,您可以覆盖该值。 |
tabIndex | 字段在表单的选项卡序列中的位置。 仅当要更改表单的默认制表符顺序时,才覆盖tabIndex。 |
角色 | 元素的角色,例如“标题”或“表”。 |
高度 | 构件的高度。 它以像素为单位指定。 |
宽度 | 构件的宽度。 它以像素为单位指定。 |
访问 | 用于访问容器对象(如子表单)内容的控件。 |
paraStyles | XFA元素对构件的para属性。 |
dir | 文本的方向。 可能的值为ltr(从左到右)和rtl(从右到左)。 |
除了这些选项,框架还提供了一些其他选项,这些选项因字段类型而异。 下面列出了特定于字段的选项的详细信息。
要与表单框架交互,构件会触发一些事件,使表单脚本能够工作。 如果构件未抛出这些事件,则为该字段在表单中编写的某些脚本将不起作用。
事件 | 描述 |
---|---|
XFA_ENTER_事件 | 只要字段处于焦点,就会触发此事件。 它允许在字段上运行“enter”脚本。 用于触发事件的语法为 (构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_事件) |
XFA_EXIT_事件 | 当用户离开字段时,将触发此事件。 它允许引擎设置字段的值并运行其“exit”脚本。 用于触发事件的语法为 (构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_事件) |
XFA_CHANGE_事件 | 触发此事件以允许引擎运行写入字段的“change”脚本。 用于触发事件的语法为 (构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_事件) |
XFA_CLICK_事件 | 单击字段时将触发此事件。 它允许引擎运行写入字段的“click”脚本。 用于触发事件的语法为 (构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_事件) |
外观框架调用构件的某些功能,这些功能在自定义构件中实现。 构件必须实现以下功能:
函数 | 描述 |
---|---|
焦点:function() | 专注于现场。 |
单击:function() | 将焦点放在字段上并调用XFA_CLICK_事件。 |
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不同状态的值数组。 值[0]是状态为ON时的值,值[1]是状态为OFF时的值, |
州 | 允许的状态数。 两个用于自适应表单(开、关),三个用于HTML5表单(开、关、中性)。 |
状态 | 元素的当前状态。 两个用于自适应表单(开、关),三个用于HTML5表单(开、关、中性)。 |
选项 | 描述 |
---|---|
天 | 该字段的本地化天数名称。 |
个月 | 该字段的本地化月份名称。 |
零 | 数字0的本地化文本。 |
clearText | 清除按钮的本地化文本。 |