eForms
轻松创建单页 WebApp 的方法。
引言
- 轻松创建比 Windows 程序更好看的 Web 应用
- 广泛的工具，包括易于使用的表单创建，可调整大小 - 拖动 - 隐藏和显示！
- 类似 ActiveX 的控件 - 但更简单，且无依赖！
- 文件小！只下载当前页面应用所需的内容（还会缓存！）
- 包含开放表单的ribbon，可选经典或数字时钟
- 每段文本均支持多语言！
- 为每个部分进行自定义样式 - 使用
ThemeEditor WebApi(也可作为示例) - 易于编程和使用
- 使用 EFON - 电子表单对象表示法，这是一种 Base64 对象表示法，适用于网络传输的所有数据
与上一版本的更改
EF.Open()已更改以适应 OOP 编程EF.Run()已更改以服务 Open 函数并更好地初始化 SDKThemeEditor.htmAPI 在保存图像时存在错误 - 它会自动将图像保存为 base64 变量，导致 CSS 文件不必要地增大 - 此问题已得到纠正。现在创建自定义样式表非常容易。
概述
eForms（或其简称“EF”）源自“Electronic Forms”，是一个软件开发工具包，包含一套控件和系统，用于轻松开发单页或多页 Web 应用。
名称以小写“e”开头，看起来像“internet explorer”的符号，后者已成为互联网/Web 的象征，而此系统专为 Web 使用而设计。
尽管开发人员寻求清晰易读的代码，但我们的目标是让普通用户无法轻易读懂，而对程序员来说则足够清晰易用。这也是保护代码和数据的一种方式。
开始新项目
首先，让我们看看 SDK 提供的样式表，以及创建主题有多么容易。
SDK 中包含的 ThemeEditor.htm 文件可以通过基本主题配置文件帮助生成最终的 CSS 以及必要的动态变量。此编译器创建的文件是 ef.css 和 Style.js，应包含在每个新项目中。Style.js 的内容是一个单独的 EFON 变量，应放置在 <script src="/ef/ef.js"></script> 之后。以下是一些示例，您可以查看每个示例 HTML 页面。
基本空白页面
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="efico.ico"></link>
<link rel="StyleSheet" href="ef.css" type="text/css"></link>
<script src="/ef/ef.js"></script>
<script src="Style.js"></script>
<script>
// Our main program section.
// Initialization function name can be any name, referred to from the EF.Run()
function Init() {
// More initialization stuff to do here.
}
</script>
</head>
<body onload="EF.Run(Init)">
<!—This section will be generated by the power of eForms,
you shall avoid editing this part. -->
</body></html>
重要提示：请注意 <body> 中的 onload 事件，其中包含函数 EF.Run()。这是一个神奇的函数，用于初始化 SDK。此函数接收的参数是要首先运行的函数，或者是一个调用特定表单类型的 string（如 Microsoft Visual Studio C# 中的那样），或者是一个包含一些设置的哈希。如果提供了哈希，其属性与稍后将描述的用于启动新 eForm 的 EF.Open() 相同。
注意：初始化函数 EF.Run() 需要被调用以初始化 SDK，但它不一定需要在 <body> onload 事件中调用，它可以从任何其他函数中调用。此函数负责启动侧边栏、标题和页脚。如果页面打算不使用这些，则可以忽略 Run() 函数。
Hello World 代码示例
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="efico.ico"></link>
<link rel="StyleSheet" href="ef.css" type="text/css"></link>
<script src="/ef/ef.js"></script>
<script src="Style.js"></script>
<script>
// Initialize new eForm.
function HelloWorld_Form() {
/* “HelloWorld_Form” is a form OOP class name.
This means that we are creating the prototype here,
and to use the real eForm, we will need to call EF.Open() later,
or use it by direct call from the EF.Run(). */
var _=this;
_.inf= {
// Form basic properties
w:300, // Width
h:300, // Height
txt:"Hello World", // Title text.
// Form optional properties
min:[100,100], // Minimum size [width,height]
max:[600,600], // Maximum size [width,height]
// Form preset children controls (also optional)
chl:{
// Text-box field
C1:["FLD",{
x:16,y:16, // Position
w:268, // Width of field including label!
max:32, // Maxlength. If 0, will be readonly.
anch:"LR", // Anchor (L=Left,R=Right,B=Bottom,T=Top)
lbl:"Your name:" // Label associated with the control.
}],
// Combobox <Select>
C2:["CMB",{
x:16,y:48, // Position
w:268, // Width of field including label!
alt:"Other...", // Alternative option text.
mlg:1, // Indicates alternative field
// is multilingual field
max:32, // Maxlength for the
// alternative field.
anch:"LR", // Anchor (Left & Right)
lbl:"Pick a color:", // Label element
src:[ // Preset options list
EF.L({"EN-US":"Red","ZH-CN":"?”}),
EF.L({"EN-US":"Green","ZH-CN":"?”}),
EF.L({"EN-US":"Blue","ZH-CN":"?”}),
EF.L({"EN-US":"Yellow","ZH-CN":"?”}),
EF.L({"EN-US":"White","ZH-CN":"?”}),
EF.L({"EN-US":"Black","ZH-CN":"?”})
],
}],
// System Button
B1:["SBT",{
x:16,y:188, // position
txt:"Click me!", // text
img:"Example.png", // image
cbk:F2, // onclick callback
anch:"B", // Anchor (Bottom)
}]
}
};
_.onload=function() {
// Manually-added controls
EF.Put("SBT","B2",{
x:128,y:188,txt:"Try to click me!",
img:"Example.png",anch:"BR",
tp:"X" // Type “X” is disabled button.
// The image will be greyscaled.
},_.base);
// call to public functions:
// The Form DOM element sits in a magical variable eF
// in the current class. Once the form is created,
// this variable will be added to the new instance
// of this class, allowing to communicate with the
// eForm object itself. Below is an example for the
// “Block()” function as part of eForm control:
_.eF.Block({txt:"Just sample progressbar",prg:1,min:0,max:100});
_.RR();
}
// Form-scope public function
_.RR=function() {
_.base.blk.Prog('+');
if(_.base.blk.prg.value<100) setTimeout(_.RR,20);
else _.base.XBLK();
}
// Form-scope private functions
function F1() { EF.Alert({txt:"Notification",msg:"Form loaded!"}); }
function F2() { EF.Alert({txt:"Notification",msg:"Button clicked!"}); }
}
// The basic startup
function Init() {
EF.Open(“HelloWorld_Form”); // Launch form using the magic
// function EF.Open().
// It can take as parameter a string with the type of
// the form to open, then it will create an instance of
// that form type named by its type.
// We could, however, use <body onload="EF.Run(‘HelloWorld_Form’)">
// and remove this “Init()” function, as we have only one form
// that we want to open on page load.
/* Forms directly on the desktop (document.body)
will be stored on EF.chl[id].
Deeper forms will be stored in EF.chl[parent form].chl[id]
and so on, as every form has chl parameters for incandescent children. */
}
</script>
</head>
<body onload="EF.Run(Init)">
</body></html>
预览
页面布局
已拖动和调整大小
带有 ribbon 的页面
空白页面
控件
- 放置控件
- 表单
- 系统按钮
- 文本框字段
- Label
- 复选框
- 单选按钮组
- 图片框
- 画布
- 滑块
- 标题控件
- 面板容器
- 多行文本框
- 组合框
- 多语言文本框
- 分割器容器
- 表格
- 树视图
- 标签页选择器
- 颜色选择器
- 日期选择器
- 工具提示
放置控件
EF.Put(控件类型, 名称, 属性哈希, 父元素)控件类型：3 个字符代码，每个代码稍后解释名称：控件的名称，在父元素范围内必须唯一。SDK 将其转换为 DOM ID，根据父元素的 ID 到根目录，即，如果我们的控件名称是“x”，父控件名称是“y”，它放置在表单（也是父控件）名称“z”上，而表单放置在document.body上，这意味着是循环中的最后一个父级，则当前控件的完整 ID 将是：“z_y_x”。显然，“_”在此处是路径分隔符。属性哈希：取决于控件类型。手册后面将解释每个控件及其属性。父元素：可以是 DOM 对象或完整 ID。空字符串或省略时，表示document.body。
注意：创建控件后，用于创建的给定属性将不再存在。对于动态编辑，通常是 JS/HTML 编辑或操作 CSS。对于典型的应用程序更改，大多数功能已内置在每个控件中，以简化编程。这样，对于简单的更改，无需更新代码/数据的太多部分。
表单
在 document.body 顶部打开 eForm
EF.Open(“FormName”);
上面的函数将打开表单类“FormName”的新实例。
重要提示：每个表单最好放在本地目录“frm”的新 JavaScript 文件中。SDK 将查找此类是否存在（意味着已加载），如果不存在，则会自动加载脚本。
注意：如果 Open 接收字符串作为参数，它将赋予表单与类型相同的名称，假设它是一个只有一个实例的表单。如果要为其指定唯一名称和/或其他参数，则将应用下面的哈希。
EF.Open({
typ：表单 OOP 类名。当提供 string 时，SDK 将其转换为“typ:’FormName’”。
id: 唯一的表单名称，对于 DOM ID，其行为与上面“Put”的说明相同。
x：X 坐标。如果省略，表单将水平居中。
y：Y 坐标。如果省略，表单将垂直居中。
v：用于表单初始化构造函数的参数对象。
pmt：用于 eForm “onload”事件的参数对象。
});
注意：除了“typ”之外，所有属性都是可选的。
声明 eForm 类
Function FormName(A) {
// The variable “A” here is the parameter object passed by variable v
// from the Open function.
var _=this; // This can help us access the eForm class object from within
// every internal function or element.
_.inf={ }; // inf is a magical hash that contains form properties
// with its controls. NOTE: It must remain exactly this
// notation in order to be recognized by this SDK,
// so don’t try to use different name for this hash.
_.onload=function(B) {
// This function is optional, and it is a magical function
// that will be called immediately when form instance has been created
// and all controls are placed.
// The “B” parameter here is the parameter object passed by
// variable pmt from the Open function.
}
// More functions can be placed here, and they all will be belong to this class.
// The Form DOM element is in parameter _.eF
// This class sitting in _.eF.fnc therefore accessing public function of
// another eForm class will be easy using FormObject.fnc.FunctionName()
}
“inf”的基本属性
w：表单宽度h：表单高度 – 不包括标题栏txt：标题文本，可以是多语言的。虽然您可以决定隐藏标题栏，但此文本可以在 ribbon 图标中看到。
“inf”的可选属性
min[width,height]：最小尺寸。如果省略，表单将具有固定大小。max[width,height]：最大尺寸。如果省略，表单将具有固定大小。xt：如果设置为1，将隐藏表单标题栏。drg：如果设置为1，表单将没有拖动选项。xcls：如果设置为1，将隐藏关闭按钮“X”。xhid：如果设置为1，将隐藏最小化按钮。blk:如果设置，将阻止父元素。这将给对话框式的表单带来一些类似的效果。此属性是一个哈希，其中包含以下可选子属性txt：在阻止屏幕上显示的文本，可以是多语言字段。prg：如果设置为1，将添加进度条元素。max：进度最大值（默认值：100）min：进度最小值（默认值：0）
公共函数
Focus()：聚焦表单。双击表单元素或在 ribbon 上单击表单图标也可实现此操作。Open(v)：如上所述打开子表单。v代表变量哈希。Close()：关闭表单。应避免使用removeChild()删除<form>元素，因为Close()函数不仅会删除Form元素，还会检查相关表单和数据，并清理相关的内存参数。Val(v)：这是一个神奇的函数，它收集表单的所有字段，并返回一个哈希，其中每个字段名称作为键，值作为值。如果 v 被指定为string，它可以包含字段名称列表以收集值，从而进行选择性收集。列表元素用逗号分隔。Block(v)：阻止表单。适用于运行需要阻止用户单击按钮或编辑表单字段的长时间事件。v的参数与blk以上的参数相同。XBLK()：删除阻止屏幕（如果有进度条）。Rename(v)：重命名标题中的文本。v也可以是多语言的。
公共参数
ctr：控件哈希。控件可以通过其在当前表单上的名称来访问。当前表单上的名称应唯一。无论控件在表单内的层次结构有多深，所有控件都位于此哈希的第 1 层。PNT：父表单（如果表单直接放置在document.body上，则为 null 或 undefined）。CHL：子表单哈希，如 EF.CHL。blk：阻止屏幕元素 – 如果未阻止，则为null。
表单阻止器 – 公共参数
lbl：阻止文本标签 DOM 元素prg:进度条 DOM 元素prg.max：进度最大值prg.min：进度最小值prg.value：进度当前值
表单阻止器 – 公共函数
Prog(m)用于设置进度。如果m是数字，则将进度值设置为m。如果m是“+”，则进度值将增加1。
打开现有 eForm 的子 eForm
从表单对象调用“Open”，即，父表单已通过以下方式初始化：EF.Open(“F1”); 然后我们创建它的子表单：EF.chl.F1.Open(“F2”); 请注意，这里的 <Form> 元素和 EF.chl.F1 是相同的，因此如果表单是使用此 SDK 创建的，则可以在 <form> 元素上调用“Open”。
注意：尽管可以通过 EF.Put(“WIN”,”formName”,{ … },parent); 创建新表单，但建议使用 **JavaScript eForm 类** 和 EF.Open()。
每个新打开的表单都存储在 EF.chl 哈希中，作为 document.body 的子表单，名称是访问键。请注意，所有创建的表单都直接位于 document.body 上，无论给定的父级是谁。因此，这里存在一个 pnt “Parent”参数以提供帮助。没有 EF.pnt，因为 document.body 上的所有直接表单实际上没有父级。内部表单已经具有 pnt。
通用示例
function F1() {
var _=this;
_.inf={ w:300,h:200,txt:"Form without titlebar",xt:1 };
}
function F2() {
var _=this;
_.inf={ w:300,h:200,txt:"Form with titlebar" };
}
function F3() {
var _=this;
_.inf={ w:300,h:200,txt:"Form without close button",xcls:1 };
}
function F4() {
var _=this;
_.inf={ w:300,h:200,txt:"Form without hide button",xhid:1 };
}
function F5() {
var _=this;
_.inf={ w:300,h:200,txt:"Form without any button",xcls:1,xhid:1 };
}
function F6() {
var _=this;
_.inf={ w:300,h:200,txt:"Blocked form" };
_.onload=function() { _.eF.Block({txt:"No content available
for clicking or editing!"}); }
}
function Init() {
EF.Open({ typ:"F1",x:216,y:224 });
EF.Open({ typ:"F2",x:216,y:456 });
EF.Open({ typ:"F3",x:532,y:224 });
EF.Open({ typ:"F4",x:532,y:456 });
EF.Open({ typ:"F5",x:848,y:224 });
EF.Open({ typ:"F6",x:848,y:456 });
}
系统按钮
控件类型代码：“SBT”。这为系统中的所有按钮提供了统一的样式。
基本属性
x：X 坐标y：Y 坐标txt：标题文本cbk：onclick事件函数
可选属性
img：显示图像。如果省略，则不显示图像。图像文件包括扩展名，但不包括完整路径，假定图像存储在与主 *.htm 文件相同的文件夹中的“img”文件夹中。因此，在 HTML 中，“src”值将是“img/”+img。anch：锚点。这以某种方式“固定”控件，使其能够跟随父级的大小调整方向，就像在 Microsoft Visual Studio 中一样。值是一个string，由以下一个或多个选项组成：“L”左，“R”右，“T”上，“B”下，即，我们希望按钮固定在表单的右下角，我们将编写anch:”BR”或anch:”RB”。默认是固定在表单的左上角，这意味着无论我们指定“L”或“T”或“LT”或“TL”都不会产生任何效果——它们都是相同的无效表示。- 注意：尽管系统按钮具有固定大小，但像“LR”或“TB”这样的锚点可能无效。
tp:按钮类型。默认是典型的活动按钮。通过指定此变量，我们想要：“X”，这将创建禁用按钮；或者“A”，如果我们想要警报风格按钮，也就是 Alert 表单使用的样式。- 注意：禁用按钮的图像将被转换为灰度。这仅在服务器上工作时可用，而在本地计算机上不可用，因为“跨域”问题可能会污染 SDK 用于颜色转换的画布。
upk：如果指定，将使按钮成为文件上传按钮。此属性是一个哈希，包含以下子属性cgi：如果为string，则将被视为 CGI 程序路径（不包括扩展名），然后上传的内容将被发送到该脚本进行处理。如果省略，上传的文件将保留在内存中作为 Blobs。cbk：内容加载到内存或发送到指定 CGI 脚本时要执行的函数。mul：如果设置为1，将允许一次选择和上传多个文件，而不仅仅是单个文件。
- 这将创建按钮对象中的内部变量
ftp。此变量是一个哈希，每个文件包含以下参数（文件名是键）f：fileReaderJS 对象z：文件大小（字节）t：文件 MIME 类型
名为“_”的键保存了哈希中所有文件名的数组。
示例 – 动态创建
var C=EF.Put(“SBT”,”B1”,{ x:16,y:16,txt:"Typical",img:"Example.png", Clicked });
示例 – 在表单创建时
function ButtonExampleForm() {
var _=this;
_.inf={ w:240,h:240,txt:"System Buttons",chl:{
B1:["SBT",{ x:16,y:16,txt:"Typical",img:"Example.png",cbk:Clicked }],
B2:["SBT",{ x:128,y:16,txt:"Disabled",
img:"Example.png",cbk:Clicked,tp:"X" }],
B3:["SBT",{ x:16,y:128,txt:"Alert",
img:"Example.png",cbk:Clicked,tp:"A" }],
B4:["SBT",{ x:128,y:128,txt:"No image",cbk:Clicked }]
}};
function Clicked() { EF.Alert({txt:"Notification",
msg:"Thank you for clicking!"}); }
}
文本框字段
控件类型代码：“FLD”。此字段相对于 <input type”text”> 的魔力不仅在于书写简单，还在于它提供的功能，如下所述。
基本属性
x：X 坐标y：Y 坐标w：字段宽度max：最大输入长度。如果此变量为 0，则该字段为只读。
可选属性
注意：标签控件名称将与此相同，后缀为“~L”。
anch：锚点，与系统按钮中的相同。在此，像“LR”或“RL”这样的锚点可能导致字段宽度扩展。像“TB”或“BT”这样的锚点无意义，并且不会产生任何效果，因为此控件的高度是固定的且不是多行的。对于多行，请参阅下面的多行文本框。alg：文本对齐。默认左对齐，但以下选项可用：“R”右，“C”居中，“P”密码。注意：密码字段不需要任何特殊对齐，因此其对齐始终是左对齐。txt：初始文本值。lbl：将添加标签组件。此处的值仅为文本。这将自动计算总宽度 – 因此此处指定的宽度包括标签。这样，标签和文本框字段之间的间距很小，而不管当前浏览器设置中显示的语言是什么，因为标签宽度是动态的。acm：特殊样式自动完成功能。这是一个包含两个组件的小数组，它们是0：用于从中选择建议的 DB 值数组1：当前字段下显示的建议最大数量
enter：在 <Enter> 键按下事件。此事件未在 JavaScript 核心中列出，因此是新增功能之一。chng：onchange事件clk：onclick事件tb：Tab 索引。这使得通过按 <Tab> 键可以轻松地从一个字段移动到另一个字段。
公共函数
Val(v)：将值设置为v。如果省略v，则返回给定字段的值。
示例 – 动态创建
var C=EF.Put(“FLD”,”C1”,{ x:16,y:16,w:368,max:12,lbl:"Editable:" });
示例 – 在表单创建时
function TextboxFormExample() {
var _=this;
_.inf={ w:400,h:400,txt:"Single line textbox",min:[400,300],max:[900,600],chl:{
C1:["FLD",{ x:16,y:16,w:368,max:12,lbl:"Editable:" }],
C2:["FLD",{ x:16,y:48,w:368,max:12,lbl:"Editable anchored:",anch:"LR" }],
C3:["FLD",{ x:16,y:80,w:368,max:0,lbl:"Readonly" }],
C4:["FLD",{
x:16,y:112,w:368,max:12,enter:EnterHitted,
chng:ContentChange,clk:Clicked
}],
C5:["FLD",{
x:16,y:144,w:368,max:12,lbl:"With auto complete:",anch:"LR",
acm:[[
"Green","Purple","White","Brown","Yellow",
"Grey","Red","Blue","Black","Orange"
],4]
}],
C6:["FLD",{ x:16,y:176,w:368,max:12,lbl:"Password:",alg:"P" }],
C7:["FLD",{ x:16,y:208,w:368,max:12,lbl:"Centered:",alg:"C" }],
C8:["FLD",{ x:16,y:240,w:368,max:12,lbl:"To right:",alg:"R" }]
}};
function ContentChange() {
EF.Alert({txt:"Notification",
msg:"You changed the content to "+_.eF.ctr.C4.Val()+"!"});
}
function EnterHitted() { EF.Alert({txt:"Notification",
msg:"You hit keyboard <Enter> key!"}); }
function Clicked() { EF.Alert({txt:"Notification",msg:"You clicked!"}); }
}
锚点效果
自动完成
标签
控件类型代码：“LBL”。此控件不与其他任何控件关联，即使它与文本框或组合框等其他控件一起创建，也算作单独的控件。
基本属性
x：X 坐标y：Y 坐标txt：内容文本
可选属性
w：提供固定宽度。标签的高度将与字段的高度相同，或者如果内容超出了给定宽度并需要换行。
注意：在其他控件的“lbl”属性中使用w时应避免。alg：文本对齐。此处可用的选项是“C”居中或“R”右对齐。这仅在标签具有固定大小时（通过设置 w）生效。anch：锚点。如果此控件是与其他控件（如文本框或组合框）一起创建的，则锚点将不起作用。如果Textbox的锚点是“LR”，则标签的锚点只能是“L”。如果Textbox的锚点是“R”，则标签跟随Textbox并具有“R”锚点。组合“TB”或“BT”可能会调整标签的大小（如果预设了 w），但文本仍将顶部对齐。color：可以设置标签的文本颜色。如果给出一个包含 2 个组件的数组，内容将是0：文本颜色1：背景颜色
颜色值是 CSS 字符串。
注意：Label 对象可以通过外部 CSS 类、内部 CSS “Style”属性，或通过 JS 使用 Put 生成的 DOM 元素来设置样式。DOM 元素是典型的 DIV，具有绝对定位，并具有此 SDK 的设置，使其看起来像一个标签。
示例 – 动态创建
var c=EF.Put(“LBL”,”L1”,{ x:16,y:16,txt:"Dynamic sized typical label" });
示例 – 在表单创建时
function LabelExampleForm() {
var _=this;
_.inf={ w:400,h:208,txt:"Label",min:[400,208],max:[900,600],chl:{
L1:["LBL",{x:16,y:16,txt:"Dynamic sized typical label"}],
L2:["LBL",{x:16,y:48,txt:"Centered typical label",
w:368,alg:"C",anch:"LR"}],
L3:["LBL",{x:16,y:80,txt:"Right aligned typical label",
w:368,alg:"R",anch:"LR"}],
L4:["LBL",{x:16,y:112,txt:"Custom styled label",color:"#ff0000"}],
L5:["LBL",{
x:16,y:144,txt:"Another custom styled label",
color:["#ffff00","rgba(0,0,255,0.7)"]
}],
L6:["LBL",{x:16,y:176,txt:"External styling applied here"}]
}};
_.onload=function() {
_.eF.ctr.L6.style.border="2px double rgb(0,255,0)";
_.eF.ctr.L6.style.fontWeight="bold";
}
}
锚点标签后调整大小
复选框
控件类型代码：“CHK”。类似于典型的 <input type=”checkbox”>，但带有适当样式的预设标签。此处的标签是控件的一部分，位于 <label> DOM 元素中，而不是 <div> 中。与此 SDK 中的典型控件一样，创建简单。
基本属性
x：X 坐标y：Y 坐标txt：标签文本。通过控件 ID 加上“~L”后缀来访问标签。
可选属性
anch：锚点。由于标签的动态大小特性，像“LR”、“RL”、“TB”或“BT”这样的锚点是无用的。唯一可用的锚点是“R”右，“B”下，“RB”表示右和下。请注意，“BR”与“RB”相同。chng：onchange事件
公共函数
Val(v)：根据v设置checkbox的值，可以是true或false。如果省略，此函数将返回当前的选中状态，true或false。
示例 – 动态创建
var c=EF.Put(“CHK”,”C1”,{ x:16,y:16,txt:"Check me",chng:Tick });
示例 – 在表单创建时
function CheckboxExampleForm() {
var _=this;
_.inf={ w:200,h:100,txt:"Checkbox",min:[200,100],max:[900,600],chl:{
C1:["CHK",{x:16,y:16,txt:"Check me",chng:Tick}]
}};
function Tick() {
EF.Alert({txt:"Notification",
msg:"Checkbox is checked? "+(_.eF.ctr.C1.Val()?"Yes":"No")});
}
}
单选按钮组
控件类型代码：“RDO”。这提供了对齐在 <fieldset> 面板中的一组单选按钮。
注意：控件的名称将是表单中单选按钮组的名称 – 这包括层次结构名称，例如 ID。
基本属性
x：X 坐标y：Y 坐标w：fieldset 面板宽度h：fieldset 面板高度注意：尺寸包括每侧 16px 的内部内边距，水平和垂直方向。因此，内部尺寸在宽度和高度上都减小了 32px。
rb：标签文本数组。每个创建的单选按钮的 ID 将是控件 ID 加上“_”加上索引。标签将是单个单选按钮 ID 加上“~L”后缀。txt：图例文本。
可选属性
lw：标签宽度。这将帮助对齐单选按钮以“跳跃”固定的间距。只有当长度超过面板的内部宽度时，它才会换行。sel：选中的单选按钮索引。如果省略，将选择组中的第 1 个单选按钮。anch：整个面板的锚点。任何组合都可以放在这里。单选按钮将相应地重新对齐。chng：onchange 回调
公共函数
Val(v)：根据索引v选择单选按钮。如果省略v，将返回选中的单选按钮索引。
示例 – 动态创建
var c=EF.Put(“RDO”,”R1”,{
x:16,y:16,w:368,h:268,txt:"Not aligned radio group",rb:[
"Red","Green","White","Purple","Orange","Blue",
"Black","Cyan","Magenta","Sea green","Lawn green"
],anch:"LR"
});
示例 – 在表单创建时
function RadioGroupExampleForm(A) {
var _=this;
_.inf={ w:400,h:468,txt:"Radio Groups",min:[150,468],max:[1200,900],chl:{
R1:["RDO",{ x:16,y:16,w:368,h:168,
txt:"Not aligned radio group",rb:A,anch:"LR" }],
R2:["RDO",{
x:16,y:200,w:368,h:268,txt:"Aligned radio group",
rb:A,anch:"LRTB",lw:120,sel:5
}],
}};
}
注意：向表单构造函数传递参数只能通过关键字“v”实现。这是一个可以获取任何值的对象，因此构造函数将只获取 1 个参数。此处的初始化函数将如下所示
EF.Run({typ:'RadioGroupExampleForm',v:[
"Red","Green","White","Purple","Orange","Blue",
"Black","Cyan","Magenta","Sea green","Lawn green"
]});
宽范围调整，它如何影响自动对齐
图片框
控件类型代码：“IMG”。这将创建一个特殊的 <img> 标签，并带有许多选项，包括图像像素操作。当目标 *.htm 文件在本地加载或内容来自其他域时，它使用的画布进行操作可能会被污染，因此无法使用。建议为此目的与服务器配合使用。
基本属性
x：X 坐标y：Y 坐标w：图像宽度h：图像高度src：初始图像源，包括完整路径
可选属性
anch：锚点。所有组合都可用。clk：onclick事件onl：onload事件alg：图像对齐。默认是原始大小的图像，因此如果大小小于图片框的大小，可能会看到背景，颜色为样式表中声明的字段背景。如果图像大小更大，可能会出现滚动条。此处的值可以是S：图像将拉伸到图片框的大小。Z：缩放以适应图片框的大小，而不破坏宽高比，因此图像内容看起来不会变形。upk：通过单击上传图像功能。如果设置为1，将允许从本地计算机上传图像到此控件。仅图像适用。支持的格式是浏览器支持的所有格式。
公共函数
Val(v)：根据v设置图像源。所有给定的图像都位于主 *.htm 文件所在文件夹中的“img”文件夹中。如果省略 v，将返回源图像路径（如果存在）或图像内容（作为base64，如果这是“src”中的值）。Raw()：以imageData对象形式返回图像内容，用于像素操作。有关像素操作的更多信息，请参阅 JavaScript 文档中的Canvas.getContext(“2d”).getImageData()。FromData(v)：使用imageData Object在v中更新图像源。ToB64()：以base64URI 编码的string形式返回图像内容，以便于网络传输。
示例 – 动态创建
var c=EF.Put(“IMG”,”IX”,{ x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB" });
示例 – 在表单创建时
function F1() {
var _=this;
_.inf={ w:288,h:288,txt:"Fixed size image",min:[80,80],max:[800,800],chl:{
I:["IMG",{x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB"}]
}};
}
function F2() {
var _=this;
_.inf={ w:288,h:288,txt:"Stretched image",min:[80,80],max:[800,800],chl:{
I:["IMG",{x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB",alg:"S"}]
}};
}
function F3() {
var _=this;
_.inf={ w:288,h:288,txt:"Zoomed image",min:[80,80],max:[800,800],chl:{
I:["IMG",{x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB",alg:"Z"}]
}};
}
function F4() {
var _=this;
_.inf={ w:288,h:288,txt:"Magical image - click it!",
min:[80,80],max:[800,800],chl:{
I:["IMG",{x:16,y:16,w:256,h:256,
src:"img/Pic.jpg",anch:"LRTB",clk:Rework}]
}};
var itr=0;
function Rework() {
var V=EF.chl.F1.ctr.I.Raw();
for(var y=0 ; y<V.height ; y++)
for(var x=0 ; x<V.width ; x++) {
var p=y*V.width*4+x*4,
c=Math.floor((V.data[p]+V.data[p+1]+V.data[p+2])/3);
if(itr%4==0) V.data[p]=V.data[p+1]=V.data[p+2]=c;
if(itr%4==1) { V.data[p]=c; V.data[p+1]=V.data[p+2]=0; }
if(itr%4==2) { V.data[p+1]=c; V.data[p]=V.data[p+2]=0; }
if(itr%4==3) { V.data[p+2]=c; V.data[p]=V.data[p+1]=0; }
}
_.eF.ctr.I.FromData(V); itr++;
}
}
function Init() {
EF.Open({ typ:"F1",x:32,y:192 });
EF.Open({ typ:"F2",x:352,y:192 });
EF.Open({ typ:"F3",x:672,y:192 });
EF.Open({ typ:"F4",x:992,y:192 });
}
表单调整大小后
魔法图像 – 点击后（自定义效果 – 可以进行任何像素操作）
画布
控件类型代码：“CVS”。这将创建一个带有高级选项的 canvas 元素。ComplexImage™ 操作的扩展在此控件之上可用。ComplexImage™ 是一种用于创建复杂图像的编程语言，包括 3D、着色等。
基本属性
x：X 坐标y：Y 坐标w：Canvas宽度h：Canvas 高度
可选属性
anch：锚点。所有组合都可用。
公共函数
Val()：获取图像作为 URI 编码的源CTX()：getContext(“2d”)的简写Raw()：获取canvas的imageData对象，用于像素操作。
滑块
控件类型代码：“TRK”。带有“min”/“max”标签的 Trackbar 组件。
基本属性
x：X 坐标y：Y 坐标w：宽度。高度是标准的，取决于您的浏览器。min：最小值max：最大值step：每次移动的步长值val：起始值
可选属性
anch：锚点。组合“TB”或“BT”无效chng：onchange事件
公共函数
Val(v)：设置trackbar的位置。如果省略v，函数将返回其当前位置。
示例 – 动态创建
var c=EF.Put(“TRK”,”C”,{ x:16,y:16,w:288,min:0,max:10,step:1,val:5,anch:"LR" });
示例 – 在表单创建时
function TrackbarExampleForm() {
var _=this;
_.inf={ w:320,h:120,txt:"Trackbar",min:[80,80],max:[800,200],chl:{
C:["TRK",{x:16,y:16,w:288,min:0,max:10,step:1,val:5,anch:"LR"}]
}};
}
调整大小后
更改值
标题控件
控件类型代码：“TIT”。这提供了一种特殊的样式化标签，用于表单内部分区标题分隔。
基本属性
x：X 坐标y：Y 坐标w：宽度。高度是恒定的，等于样式表中定义的表单标题高度的两倍。txt：内容文本
可选属性
anch：锚点。组合“TB”或“BT”无效。mod：指定标题的可见性。默认是嵌入式字体。如果此值是“O”，则内容字体将是凸起的。xclr：如果设置为1，内容字体将是透明的，并带有阴影效果。默认是带有阴影效果的只读字段BG颜色字体。
示例 – 动态创建
var c=EF.Put(“TIT”,”C1”,{ x:16,y:16,w:368,txt:"Regular",anch:"LR" });
示例 – 在表单创建时
function TitleControlExampleForm() {
var _=this;
_.inf={ w:400,h:400,txt:"Title control",min:[300,400],max:[1200,800],chl:{
C1:["TIT",{x:16,y:16,w:368,txt:"Regular",anch:"LR"}],
C2:["TIT",{x:16,y:96,w:368,txt:"Outset",anch:"LR",mod:"O"}],
C3:["TIT",{x:16,y:176,w:368,
txt:"Regular but transparent",anch:"LR",xclr:1}],
C4:["TIT",{
x:16,y:256,w:368,txt:"Both outset and transparent",
anch:"LR",mod:"O",xclr:1
}],
}};
}
面板容器
控件类型代码：“PAN”。<fieldset> 的简写，具有实心系统样式。
基本属性
x：X 坐标y：Y 坐标w：宽度H：高度
注意：尺寸包括每侧 16px 的内部内边距，水平和垂直方向。因此，内部尺寸在宽度和高度上都减小了 32px。
可选属性
anch：锚点。所有组合都可用。txt：图例文本。如果省略，则不生成图例元素。chl：子控件的深度哈希
示例 – 动态创建
var c=EF.Put(“PAN”,”P”,{ x:16,y:16,w:268,h:80,txt:"Fieldset",anch:"LRTB" });
示例 – 在表单创建时
function FieldsetExampleForm() {
var _=this;
_.inf={ w:300,h:300,txt:"Fieldset",min:[200,200],max:[600,600],chl:{
P:["PAN",{x:16,y:16,w:268,h:268,txt:"Fieldset",anch:"LRTB",chl:{
C1:["FLD",{x:16,y:16,w:236,max:4,lbl:"Label",anch:"LR"}],
C2:["FLD",{x:16,y:48,w:236,max:0,anch:"LR"}],
C3:["CVS",{x:16,y:80,w:128,h:128,anch:"LRTB"}]
}}],
}};
}
多行文本框
控件类型代码：“TAR”。<textarea> 的简写，具有实心系统样式。
基本属性
x：X 坐标y：Y 坐标w：宽度H：高度max：字符的最大内容长度。如果设置为0，则为只读，并具有只读字段样式。
可选属性
anch：锚点。所有组合都可用。chng：onchange事件wrp：如果设置为1，将禁用单词换行。默认是自动换行。txt：预设内容
公共函数
Val(v)：将内容设置为v。如果省略v，函数将返回内容。
示例 – 动态创建
var c="EF.Put("TAR","P",{ x:16,y:16,w:368,h:368,max:30000,anch:"LRTB",txt: "" });
示例 – 在表单创建时
function F1(A) {
var _=this;
_.inf={ w:400,h:400,txt:"Multiline Textbox",min:[200,200],max:[600,600],chl:{
P:["TAR",{x:16,y:16,w:368,h:368,max:30000,anch:"LRTB",txt:A}]
}};
}
function F2(A) {
var _=this;
_.inf={
w:400,h:400,txt:"Multiline Textbox - without word wrap",
min:[200,200],max:[600,600],chl:{
P:["TAR",{x:16,y:16,w:368,h:368,
max:30000,anch:"LRTB",wrp:1,txt:A}]
}
};
}
function Init() {
var TX="... Existing in its present form since 1985,
the CE marking indicates that the manufacturer
or importer claims compliance with the relevant EU
legislation applicable to a product, regardless of
where manufactured.\nBy affixing the CE marking on a product,
a manufacturer is declaring, at its sole responsibility,
conformity with all of the legal requirements to achieve
CE marking which allows free movement and sale of the product
throughout the European Economic Area.\nFor example,
most electrical products must comply with the Low Voltage Directive
and the EMC Directive; toys must comply with the Toy Safety Directive.
\nThe marking does not indicate EEA manufacture or that a product
has been approved as safe by the EU or by another authority.
The EU requirements may include safety, health, and environmental
protection, and, if stipulated in any EU product legislation,
assessment by a Notified Body or manufacture according to a
certified production quality system.\nThe CE marking also
indicates that the product complies with directives in relation to
'Electro Magnetic Compatibility' - meaning the device
will work as intended, without interfering with the use or function
of any other device.\nNot all products need CE marking to be traded
in the EEA; only product categories subject to relevant directives
or regulations are required (and allowed) to bear CE marking.
Most CE-marked products can be placed on the market subject only
to an internal production control by the manufacturer
(Module A; see Self-certification, below), with no independent
check of the conformity of the product with EU legislation;
ANEC has cautioned that, amongst other things, CE marking
cannot be considered a \"safety mark\" for consumers.
CE marking is a self-certification scheme. Retailers sometimes
refer to products as \"CE approved\", but the mark
does not actually signify approval. Certain categories of products
require type-testing by an independent body to ensure conformity
with relevant technical standards, but CE marking in itself
does not certify that this has been done. ...";
/* NOTE: Passing parameters to form constructor is only possible via keyword "v".
This is an object that can get every value, so the constructor will only
get 1 parameter. */
EF.Open({ typ:"F1",x:16,y:192,v:TX });
EF.Open({ typ:"F2",x:448,y:192,v:TX });
}
调整表单大小后
组合框
控件类型代码：“CMB”。它不仅仅是一个 <select> 元素，还具有高级功能。
基本属性
x：X 坐标y：Y 坐标w：宽度。高度与单行Textbox相同src：选项列表
可选属性
alt：备用文本字段，如果用户想要选择“其他”选项而不是列表中存在的选项。显示为“其他…”的文本是此属性的值，可以更改为您选择的任何其他内容。除了此属性，还有其他属性可用于支持此特殊文本字段，请参阅下方。srt：排序模式。可用值是“A”升序或“D”降序。如果省略，列表中的项目顺序将保持其输入时的顺序。all：用于过滤的可选值。例如：在一个大表中，我们只想显示一个类别，然后我们可以使用组合框来选择类别。如果我们想删除过滤器怎么办？我们仍然可以使用同一个组合框：使用“All”选项。文本“All”是此属性的值，可以更改为您选择的任何其他内容。anch：锚点。组合与单行Textbox相同。chng：onchange事件。sel：默认选中的值或索引。默认情况下，选择第 1 项。lbl：与关联标签控件的Label文本，就像在单行Textbox中一样。tb：Tab 索引。
备用文本字段属性
max：“Other…”文本字段的最大字符数。默认值为 128 个字符。acm：自动完成功能。设置与单行Textbox相同。mlg：如果设置为1，将强制“Other…”字段值为多语言Textbox。
公共函数
Sort(d)：按方向d对组合框选项列表进行排序，值如srt中的“A”或“D”。Add(d)：向组合框添加一个“选项”。如果d是数组，函数将逐个添加d中的所有选项到组合框。Exists(value,r)：检查值是否存在于此组合框的选项中。如果存在，将返回请求项的索引，如果不存在，则返回-1。如果r设置为“v”，它将执行与“v”相同的查找，但返回所有包含值作为其一部分的匹配项的数组。如果r是“i”，则进行与“v”相同的查找，但返回索引数组而不是值。Del(v)：从组合框中删除项目。v可以是值或索引。如果省略v，将删除选中的项目。Val(v)：选择项目v或索引v。如果省略v，函数将返回选中的项目值。Clean()：删除组合框中的所有项目，但保留“Other”和“All”（如果存在）。Replace(old,new)：用项目 new 替换项目 old。old 也可以是索引，不限于值。toArray()：返回组合框中所有项目的数组，不包括“All”和“Other”。
示例 – 动态创建
var c=EF.Put("CMB","P",{ x:16,y:16,w:268,lbl:"Typical: ",src:[
"Orange","Peach","Banana","Apple","Strawberry",
"Grape","Lemon","Watermelon","Appricot","Pear"
],anch:"LR",sel:6 });
示例 – 在表单创建时
function ComboBoxExampleForm(X) {
var _=this;
_.inf={ w:300,h:300,txt:"Combo Box",min:[300,300],max:[600,600],chl:{
C1:["CMB",{x:16,y:16,w:268,lbl:"Typical: ",src:X,anch:"LR",sel:6}],
C2:["CMB",{x:16,y:48,w:268,lbl:"With alt.: ",
src:X,anch:"LR",alt:"New fruit..."}],
C3:["CMB",{
x:16,y:80,w:268,lbl:"Multilingual alt.: ",
src:X,anch:"LR",alt:"New fruit...",mlg:1
}],
C4:["CMB",{x:16,y:112,w:268,lbl:"Sorted: ",
src:X,anch:"LR",srt:"A",sel:"Lemon"}]
}};
}
EF.Run({typ:"ComboBoxExampleForm",v:[
"Orange","Peach","Banana","Apple","Strawberry",
"Grape","Lemon","Watermelon","Appricot","Pear"
]});
备用选择
排序列表
注意：数字或字母的排序模式是自动的。SDK 知道如何检测比较的值是否全部是数字。
多语言文本框
控件类型代码：“MLG”。这是 eForms™ 独有的特殊控件，也是此 SDK 的 OEM 优势之一。此字段允许声明多语言值，显示的值将仅匹配浏览器语言。用户决定每个值支持哪些语言。这有助于非常轻松地使 Web 应用程序多语言。
基本属性
x：X 坐标y：Y 坐标w：宽度。高度与单行Textbox相同
可选属性
anch：锚点。组合与单行Textbox相同。alg：文本对齐。默认为左对齐。可用值与单行Textbox相同，但“P”用于密码，因为此字段不适用于密码字段。txt：初始值。尽管多语言字段构造是哈希，但将其存储为string并使其更易于在网络上传输，更容易将其转换为 EFON（电子表单对象表示法），这是一种特殊的base64对象表示法。要使用此功能，您可以创建一个以语言 ISO 代码（大写）为键的哈希，然后将其转换为 EFON。示例如下
var V=EF.L({
“EN-US”:”English text value”,
“ZH-CN”:”Chinese text value”,
“ES-ES”:”Spanish text value”
});
- 这将创建 V 中的 ML 对象类型。ML (
MultiLingual) 对象类型也是 eForms SDK 的一部分。 lbl：与关联标签控件的标签文本，就像在单行Textbox中一样。tb：Tab 索引。chng：更改事件。
公共函数
Val(v)：将值设置为v。如果省略v，函数将以 ML 对象形式返回控件的值。
示例 – 动态创建
var c=EF.Put("MLG","P",{ x:16,y:16,w:268,lbl:"Visible text: ",anch:"LR" });
示例 – 在表单创建时
function MLG() {
var _=this;
_.inf={ w:300,h:100,txt:"Multilingual Textbox",min:[300,100],max:[800,100],chl:{
C:["MLG",{x:16,y:16,w:268,lbl:"Visible text: ",anch:"LR"}]
}};
}
单击该字段后，可以在左侧看到语言值表，在右侧看到可用语言，并附有国旗图标以方便使用。
注意：右侧面板中的语言已排序，方便使用。窗口包含一个分割器容器控件，可以调整大小，因此您可以选择增加或减少每个可见部分。
注意“X”按钮，用于从左侧表格中删除语言。
要选择语言，首先滚动以在屏幕上看到所需的语言，然后单击其国旗。该语言将添加到左侧表格中，同时国旗按钮将移至列表顶部，以便以后使用，“常用语言”应优先。
表格中黄色的选定行是内容可编辑的，因此可以在那里输入值。
单击“OK”后，将发生以下情况（显示英语，因为运行此示例的浏览器语言是“EN-US”– 美国英语）
分割器容器
控件类型代码：“SPL”。这是一个双容器，具有垂直或水平方向，并可选择两个容器进行调整大小。
基本属性
x：X 坐标y：Y 坐标w：总宽度h：总高度f：左侧初始宽度或顶部初始高度（取决于方向）
可选属性
ori:定义分割的方向。默认是水平方向，容器为左 1 个，右 1 个，带水平调整大小栏。如果设置此属性为 1，方向将切换为垂直，即顶部 1 个容器，底部 1 个容器，带垂直调整大小栏。anch：锚点。所有组合都可用。chl：子控件。此属性此时包含两个部分的数组，一个用于第 1 个容器，一个用于第 2 个容器0：左侧或顶部容器1：右侧或底部容器
上面提到的每个元素都应该像通常一样拥有控件的哈希。要手动添加控件，每个容器的 DOM 元素可通过 wing 变量访问，该变量包含两个部分的数组，关系与 chl 中的相同。
示例 – 动态创建
var c=EF.Put("SPL","C",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,chl:[
/* First Container (Left) */
{
C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
},
/* Second Container (Right) */
{
C4:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
C5:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
C6:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
}
] });
示例 – 在表单创建时
function F1() {
var _=this;
_.inf={ w:300,h:300,txt:"Splitter container - Horizontal",
min:[300,300],max:[600,600],chl:{
C:["SPL",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,chl:[
/* First Container (Left) */
{
C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
},
/* Second Container (Right) */
{
C4:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
C5:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
C6:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
}
] }]
}};
}
function F2() {
var _=this;
_.inf={ w:300,h:300,txt:"Splitter container - Vertical",
min:[300,300],max:[600,600],chl:{
C:["SPL",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,ori:1,chl:[
/* First Container (Top) */
{
C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
},
/* Second Container (Bottom) */
{
C4:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
C5:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
C6:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
}
] }]
}};
}
function F3() {
var _=this;
_.inf={ w:300,h:300,txt:"Splitter container - Complex",
min:[300,300],max:[600,600],chl:{
CM:["SPL",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,chl:[
/* First Container (Left) */
{
C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
},
/* Second Container (Right) */
{
CD:["SPL",{ x:0,y:0,w:140,h:268,anch:"LRTB",
f:120,ori:1,chl:[
/* First Container (Top) */
{
C4:["FLD",{x:16,y:16,w:160,
max:15,anch:"LR"}],
C5:["FLD",{x:16,y:48,w:160,
max:15,anch:"LR"}],
C6:["FLD",{x:16,y:80,w:160,
max:15,anch:"LRB"}]
},
/* Second Container (Bottom) */
{
C7:["FLD",{x:16,y:16,w:160,
max:15,anch:"LR"}],
C8:["FLD",{x:16,y:48,w:160,
max:15,anch:"LR"}],
C9:["FLD",{x:16,y:80,w:160,
max:15,anch:"LRB"}]
}
] }]
}
] }]
}};
}
function Init() {
EF.Open({ typ:"F1",x:16,y:192 });
EF.Open({ typ:"F2",x:332,y:192 });
EF.Open({ typ:"F3",x:648,y:192 });
}
调整大小后
表格
控件类型代码：“TBL”。不仅仅是简单的 <table> HTML 标签，更接近 Microsoft Visual Studio DataGridView 对象，并带有高级选项。
基本属性
x：X 坐标y：Y 坐标w：总宽度h：总高度col：列列表。此数组中的每个列项都是一个可选属性的哈希，如下所示tag:捕获文本w：列宽度min：最小宽度（用于调整大小）max：最大宽度（用于调整大小）
注意：如果属性min或max中的一个被省略，列将是固定大小的。
flt：如果设置，则将应用过滤到该列。过滤器是一个组合框，其中包含特定列中的所有现有值（不重复），并带有“ALL”选项，默认名称为“-”，除非在flt.all中指定。srt：排序模式。如果指定，列将具有排序图标，允许使用此列升序或降序对表格进行排序。此属性可用于初始排序。值可以是“A”升序或“D”降序。hid：如果设置为 1，则隐藏列。edt：如果设置为1，则列将是内容可编辑的 – 文本框。
可选属性
anch：锚点。所有组合都可用。lh：如果设置为1，则左列将具有标题样式，使其看起来像标题列。sel：选择模式。默认情况下，没有行选择。此属性可以设置为“S”表示单行选择，或“M”表示多行选择。在此 SDK 中，应用了整行选择模式，且选择样式不适用于标题单元格。chng：选择更改事件src：源内容，一个填充表格的值的二维数组
公共函数
Sort(col)：基于特定列 col 对表格进行排序。排序方向基于列的当前排序设置。Add(Cells array)：向表格添加一行。Cells 数组的长度必须符合表格现有的列数。
注意：第一列（index=0）是键列。值在其他行中不能重复！尝试添加一行，其第一个单元格的值已存在于第一列的其他行中，将导致更新该特定行。这有利于快速更新，无需先进行查找调用。请注意，表格的第一行是保留的，不计入。因此，表格的第一个有效行将具有“1”作为索引。AddCol(Column data,Rows info)：向表格添加列。Column data 中的属性与单个 col 属性项相同。Rows info 是可选的，是新列中所有行的所有单元格值的列表。长度必须等于表格现有行数。Del(row)：删除行。如果省略 row，将删除选中的行（如果有）。row 可以是键或索引。Sel(row)：选择/取消选择行。如果选择模式是单选，则只能选择一行，而另一行将被自动取消选择。如果选择模式是多行选择，则选中的行将被取消选择。row 可以是键或索引。Clean()：清除表格，保留保留行。Val(sel,Filter)：查询以检索表格内容。如果sel是“T”，则返回整个表格。如果sel是数字，则返回 column[sel] 作为单元格数组。如果省略sel，函数将在单选模式下返回选中的行作为单元格数组，或在多行选择模式下返回选中的行的二维数组。Filter 是可选的，用于过滤使用，它应该包含必需列的查询字符串，用逗号分隔。Exists(key)：检查特定行键是否存在。如果存在，它将返回行索引；如果不存在，则返回0。Row[0]是无效的 – 因此不可能在那里有值。
可访问元素
TableControl.tbl：表格 DOM 元素本身TableControl.hdr：标题表格 DOM 元素
注意：分离标题和表格的目的是为了方便滚动。仅通过 JS/CSS 实现此功能仍然是一项艰巨的任务，而此 SDK 为您省去了这些麻烦。
示例 – 动态创建
var c=EF.Put("TBL","C",{ x:16,y:16,w:468,h:268,anch:"LRTB",sel:"S",col:[
{ tag:"Col A",w:80,min:80,max:400,srt:"A" },
{ tag:"Col B",w:80,srt:"A" },
{ tag:"Col C",w:80,hid:1 },
{ tag:"Col D",w:80,srt:"A",flt:1 },
{ tag:"Col E",w:80,min:80,max:400,srt:"D",flt:1 }
] });
示例 – 在表单创建时
function F1(C) {
var _=this;
_.inf={ w:500,h:300,txt:"Table - typical",min:[100,100],max:[900,600],chl:{
C:["TBL",{ x:16,y:16,w:468,h:268,anch:"LRTB",sel:"S",src:C,col:[
{tag:"Col A",w:80,min:80,max:400,srt:"A"},
{tag:"Col B",w:80,srt:"A"},
{tag:"Col C",w:80,hid:1},
{tag:"Col D",w:80,srt:"A",flt:1},
{tag:"Col E",w:80,min:80,max:400,srt:"D",flt:1}
] }]
}};
}
function F2(C) {
var _=this;
_.inf={ w:500,h:300,txt:"Table - with row header",
min:[100,100],max:[900,600],chl:{
C:["TBL",{ x:16,y:16,w:468,h:268,anch:"LRTB",sel:"S",src:C,lh:1,col:[
{tag:"Col A",w:80,min:80,max:400,srt:"A"},
{tag:"Col B",w:80,srt:"A"},
{tag:"Col C",w:80},
{tag:"Col D",w:80,srt:"A",flt:1},
{tag:"Col E",w:80,min:80,max:400,srt:"D",flt:1}
] }]
}};
}
function Init() {
/* Tables arbitrary content 2D array */
var C=[];
for(var i=0 ; i<500 ; i++) {
var E=[];
for(var k=0 ; k<5 ; k++)
E.push(Math.floor(Math.random()*((k==0)?1000000:30))+"");
C.push(E);
}
EF.Open({ typ:"F1",x:16,y:192,v:C });
EF.Open({ typ:"F2",x:564,y:192,v:C });
}
组合框过滤器中的项目已排序（自动，无论列排序模式如何）
按一列过滤
按两列过滤
已排序
已调整列大小
已选行
垂直滚动，标题保持可见
树视图
控件类型代码：“TRE”。这提供了视觉效果良好的树视图控件，带有可选的线网格和图标。
基本属性
x：X 坐标y：Y 坐标w：总宽度h：总高度
可选属性
anch：锚点。所有组合都可用。xsel：如果设置为1，则禁用节点选择。xlin：如果设置为1，则移除线网格。chng：选择更改回调ndh：预设节点哈希。此哈希的键是每个节点的键，在兄弟范围类中必须唯一。属性是txt：可见文本img：节点的图标sel：如果节点被选中，将显示此图标nodes：子节点，行为与ndh相同
公共函数
Val(v)：通过键路径v选择节点。如果省略v，函数将返回选中的treenodeDOM 对象。Add(n,p)：将treenode n添加到父节点p。n是节点属性的哈希，p应为键路径。Del(k)：通过键路径k删除节点。k也可以是TreeNode对象。如果省略k，将删除选中的节点。GetPath()：将返回选中的节点完整路径GetNode(k)：将从键路径k返回TreeNode对象
有用参数
TreeView.SN：选中的节点对象TreeNode.KY：特定节点唯一键（不是路径！）。
注意：例如，如果特定节点键是“E2”，父节点键是“D1”，而“D1”的父节点键是“C4”，那么“E2”节点的完整路径将是：“C4_D1_E2”。路径分隔符是“_”。如果treeview名称是“TV”，并且它直接位于名为“F”的表单上，该表单直接位于 document body 上，那么树视图的完整 ID 将是“F_TV”，因此“E2”节点的完整ID将是：“F_TV_C4_D1_E2”。
示例 – 动态创建
var c=EF.Put("TRE","T",{ x:16,y:16,w:468,h:268,anch:"LRTB" });
示例 – 在表单创建时
function TreeViewExampleForm() {
var _=this;
_.inf={ w:500,h:300,txt:"TreeView",min:[100,100],max:[1200,800],chl:{
T:["TRE",{ x:16,y:16,w:468,h:268,anch:"LRTB",ndh:{
N1:{txt:"Colors",img:"tre/colors.png",nodes:{
N1:{txt:"Red"},
N2:{txt:"Green"},
N3:{txt:"Blue"},
N4:{txt:"White"},
N5:{txt:"Black"}
}},
N2:{txt:"Shapes",img:"tre/shapes.png",nodes:{
N1:{txt:"Circle"},
N2:{txt:"Square"},
N3:{txt:"Triangle"},
N4:{txt:"Octagon"},
N5:{txt:"Ellipse"}
}},
N3:{txt:"Countries",img:"tre/countries.png",nodes:{
N1:{txt:"Germany",nodes:{
N1:{txt:"Dusseldorf"},
N2:{txt:"Berlin"},
N3:{txt:"Bonn"},
N4:{txt:"Koln"}
}},
N2:{txt:"U.S.A.",nodes:{
N1:{txt:"New York"},
N2:{txt:"Los Angeles"},
N3:{txt:"Miami"},
N4:{txt:"Chicago"}
}},
N3:{txt:"China",nodes:{
N1:{txt:"Guangdong",img:"tre/center.png"},
N2:{txt:"Liaoning"},
N3:{txt:"Sichuan"},
N4:{txt:"Shanghai"},
N5:{txt:"Beijing"}
}},
N4:{txt:"Israel",nodes:{
N1:{txt:"Tel-Aviv"},
N2:{txt:"Jerusalem"},
N3:{txt:"Eilat"}
}}
}}
} }]
}};
}
展开后
选中的节点
标签页选择器
控件类型代码：“TAB”。
基本属性
x：X 坐标y：Y 坐标w：总宽度h：总高度，包括标题栏tabs：标签页数组。每个值是一个包含以下内容的数组0：访问键1：文本捕获
注意：我选择不使用哈希的原因是，哈希中的元素没有固定顺序，这可能会影响标签页显示的顺序 – 在大多数情况下，这对用户来说是至关重要的。
可选属性
注意：由于可以添加和删除标签，某些标签可能“改变”其实际索引。这就是为什么最好使用访问键来操作标签页。
anch：锚点。所有组合都可用。sel：选中的标签。此值应为访问键，但也可以是索引。如果省略，将选择第 1 个标签。chng：标签页选择更改事件chl：子控件，便于预设
公共函数
Add(v)：添加具有键v[0]和捕获文本v[1]的标签页。Del(k)：删除具有访问键k的标签页。如果省略k，将删除选中的标签页。Select(k)：通过键k选择标签页。k也可以是索引。
有用参数
TabControl.wing[TabKey]：特定TabPage对象TabControl.wing[TabKey].PG：TabPage内部页面容器TabControl.wing[TabKey].innerText:特定TabPage的标题
示例 – 动态创建
var c=EF.Put("TAB","T",{ x:16,y:16,w:468,h:318,anch:"LRTB",tabs:[] });
示例 – 在表单创建时
function TabPagesExampleForm() {
var _=this;
_.inf={ w:500,h:350,txt:"Tab pages",min:[100,100],max:[1200,800],chl:{
T:["TAB",{ x:16,y:16,w:468,h:318,anch:"LRTB",sel:"P3",tabs:[
["P1","1st page"],
["P2","2nd page"],
["P3","3rd page"],
["P4","4th page"]
],chl:[
{
C1:["FLD",{x:16,y:16,w:200,anch:"LR",max:0}],
C2:["FLD",{x:16,y:48,w:200,anch:"LR",max:32}],
C3:["IMG",{x:16,y:80,w:400,h:200,anch:"LRTB",
src:"img/Pic.jpg"}]
},{
C4:["FLD",{x:16,y:16,w:300,anch:"LR",max:6}],
C5:["CHK",{x:16,y:48,txt:"Check it"}],
C6:["RDO",{x:16,y:80,w:200,h:150,
rb:[ "Option A","Option B","Option C" ]}]
},{
C7:["FLD",{x:16,y:16,w:300,max:32,anch:"LR"}],
C8:["FLD",{x:16,y:48,w:250,max:0,anch:"LR"}],
C9:["FLD",{x:16,y:80,w:400,max:64,anch:"LRB"}]
},{
C10:["FLD",{x:16,y:16,w:300,max:32,alg:"R",anch:"LR"}],
C11:["PAN",{x:16,y:48,w:300,h:140,chl:{
C11X:["IMG",{
x:4,y:16,w:200,h:120,anch:"LRTB",
src:"img/Pic.jpg",alg:"Z"
}]
},anch:"LRTB",txt:"Settings"}],
C12:["SBT",{x:16,y:192,txt:"OK!",img:"OK.png",anch:"B"}]
}
] }]
}};
}
颜色选择器
控件类型代码：“CPK”。基本上，它是一个显示颜色的按钮，带有修改选项。此控件有一个特殊的颜色选择器，还允许可选的 alpha 通道。
基本属性
x：X 坐标y：Y 坐标w：控件按钮宽度txt：将在颜色选择对话框中显示的标题
可选属性
alp：如果设置为1，将添加 alpha 通道。默认仅 RGB。anch：按钮锚点。由于字段控件的高度固定，因此“TB”或“BT”等组合无效。sel：预设颜色。默认是白色，如果应用了 alpha 通道，则是完全不透明的。chng：颜色更改事件rdo：如果设置为 1，则为只读lbl：与关联标签控件的标签文本，就像在单行Textbox中一样。
公共函数
Val(v)：将颜色设置为v。v中的值应为 [R,G,B] 或 [R,G,B,A] 的数组，取决于 alpha 通道是否适用。RGB 通道值的范围是 0 到 255，alpha 通道值的范围是 0（透明）到 1（不透明）。如果省略，将以 RGB 或 RGBA 数组形式返回选定的颜色，具体取决于 alpha 通道是否适用。
示例 – 动态创建
var c=EF.Put("CPK","C",{ x:16,y:16,w:268,lbl:"Without alpha:",
txt:"Color picker",sel:[255,255,0] });
示例 – 在表单创建时
function ColorPickerExampleForm() {
var _=this;
_.inf={ w:300,h:100,txt:"Color pickers",chl:{
C1:["CPK",{ x:16,y:16,w:268,lbl:"Without alpha:",
txt:"Color picker",sel:[255,255,0] }],
C2:["CPK",{ x:16,y:48,w:268,lbl:"With alpha:",
txt:"Pick a color",alp:1,sel:[0,0,255,0.5] }]
}};
}
可以看到深色有白色文本，浅色有黑色文本以保证清晰度。点击蓝色按钮后
点击黄色按钮后
选择颜色示例
点击OK后
日期选择器
控件类型代码：“CAL”。基本上，此字段用于显示日期和时间，并带有修改选项。此控件包含日期和时间选择器。您可以将其设置为仅选择时间、仅选择日期或两者都选择。
基本属性
x：X 坐标y：Y 坐标w：控件按钮宽度txt：将在日期/时间选择器表单中显示的文本
可选属性
anch：按钮锚点。由于字段控件的高度固定，因此“TB”或“BT”等组合无效。val：预设值。这应该是 JavaScript 的时间戳，即自 1970 年 1 月 1 日午夜 00:00:00 以来的毫秒数。如果省略，将使用当前日期。tm：如果设置为“y”，则“date”和“time”都适用。如果设置为“o”，则仅“time”适用。如果省略，则仅“date”适用。lbl：与关联标签控件的标签文本，就像在单行Textbox中一样。rdo：如果设置为1，则为只读。
公共函数
Val(v)：通过时间戳v设置此控件的日期和/或时间。如果v为-1，此函数会将日期设置为现在。如果省略v，此函数将返回选定的日期和/或时间，具体取决于适用内容。
有用参数
DateTimePicker.dto：一个DateTime对象。
示例 – 动态创建
var c=EF.Put("CAL","C",{ x:16,y:16,w:468,lbl:"Date only:",txt:"Pick date" });
示例 – 在表单创建时
function DateTimePickerExampleForm() {
var _=this;
_.inf={ w:500,h:150,txt:"Date and/or time pickers",chl:{
C1:["CAL",{ x:16,y:16,w:468,lbl:"Date only:",txt:"Pick date" }],
C2:["CAL",{ x:16,y:48,w:468,lbl:"Time only:",txt:"Pick time",tm:"o" }],
C3:["CAL",{ x:16,y:80,w:468,lbl:"Date and time:",
txt:"Pick date and time",tm:"y" }]
}};
}
点击第一个之后
点击第二个之后
点击第三个之后
<a id="TTP" name="TTP"></a>工具提示
可以通过指定 ttp 属性添加到以上每个控件。这是一个带有错误样式或普通样式选项的气球。ttp 是一个包含以下属性的哈希
Basic
msg：内容文本
可选
tit：标题文本。如果省略，系统将使用预设的工具提示文本。at：淡入时间（以 0.01 秒为单位）。如果设置为 0，气球将立即出现。默认是 1 秒。wt：鼠标离开字段后等待时间（以毫秒为单位）。默认等待时间是 3000 毫秒。ot：淡出时间（以 0.01 秒为单位）。如果设置为 0，气球将立即消失。默认是 1 秒。alr：如果设置为 1，颜色类将用于错误样式。
使用示例
function ToolTipExampleForm() {
var _=this;
_.inf={ w:300,h:160,txt:"ToolTip",chl:{
C1:["FLD",{ x:16,y:16,w:268,max:6,lbl:"User code:",ttp:{
tit:"Note:",
msg:"Typical user code starts with 1, VIP starts with 2."
} }],
C2:["SBT",{ x:16,y:48,txt:"Send",cbk:Validate }]
}};
function Validate() {
var v=_.eF.ctr.C1.Val();
if(v[0]!=="1" && v[0]!=="2") {
EF.Put("TTP","",{
tit:"Input error",
msg:"User code is wrong!",
alr:1
},_.eF.ctr.C1);
}
}
}
基本 – 鼠标悬停时
错误 – 点击“Send”后
历史
- 2017 年 8 月 1 日：初始版本