表单展示界示例
本文由Simon Codrington和Mallory van Achterberg进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态!
作为Web设计师,您很有可能必须定期创建Web表单。 这通常是一项艰巨的任务,并且头疼不已(特别是如果您正在做一些更复杂的事情,例如创建多步骤表单)。 在这种情况下,最好使用UI框架来减轻痛苦并加快开发过程。 在本文中,我将概述各种技巧,使您可以使用Webix框架快速而又省力地创建不同类型的表单。
什么是Webix?
Webix是HTML5组件JavaScript UI库,可帮助创建移动和桌面Web应用程序。 它提供了从简单按钮到SpreadSheet窗口小部件的各种组件,可用于开发类似Excel的应用程序。 除了UI组件集合之外 ,还有事件处理机制 , 脱机模式支持和大量开发工具 。 您还可以使用外观构建器来创建自己的外观,使用可视化设计器来拖放UI并在在线源代码游乐场中使用代码。 该项目还包含详尽的文档 。
我已经写了一篇介绍性文章 ,描述了使用此框架的关键功能和基础知识,因此,如果您有兴趣的话,请提前进行预览。
包括Webix
您可以通过多种方式在项目中包含所需JavaScript和CSS文件。 如果下载了库包,则将在codebase
文件夹中找到这些文件。 您可以包括以下内容:
<link rel="stylesheet" href="./codebase/webix.css">
<script src="./codebase/webix.js"></script>
或者,您可以使用CDN:
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css">
<script src="http://cdn.webix.com/edge/webix.js"></script>
您还可以使用NuGet :
nuget install Webix
如果您使用Microsoft Visual Studio,请从Package Manager控制台执行此操作:
install-package Webix
或尝试Bower :
bower install webix
创建一个简单的表格
现在,有了这些库,让我们看看Webix Form Widget是如何工作的。
webix.ui({
view: "form",
id: "myForm",
container: "areaA",
width: 350,
elements: [
{ // first form component },
{ // second form component},
{ // n-th form component */}
]
});
我们首先调用webix
对象的ui
方法, webix
其传递各种参数以配置其输出。
-
view
属性决定了所创建元素的类型(这里我们正在创建表单,但是也可以是菜单或图表)。 -
id
属性为表单分配一个ID,您以后可以通过该ID来引用它。 -
container
属性指定表单应呈现到HTML元素的ID。 -
width
属性用于设置表单元素的宽度。 Webix假定您要在此处使用像素作为度量单位,因此只需要设置一个适当的数字即可。 -
elements
属性是表单将包含的组件数组。 您可以在表格中使用任何适当的组件:文本字段,单选按钮,复选框,按钮等。
让我们创建一个简单的登录表单。 我们将需要两个文本字段 (一个用于用户名,一个用于密码),一个复选框 ,当然还有一个提交按钮 。
webix.ui({
...
elements: [
{ view: "text", label: "Username", name: "username" },
{ view: "text", label: "Password", name: "password", type: "password" },
{ view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
{ view: "button", value: "Submit", width: 150, align: "center", click: submit }
]
});
请注意,我们正在为表单元素指定name
属性,并为我们的密码字段设置type: "password"
,以便在输入字符时屏蔽它们。 设置元素的label
属性定义了该元素的label
,我们可以使用元素的click
属性定义事件处理程序,该事件处理程序在提交表单时将被调用。 尽管可以检查数据是否一切正常很好,但是请不要忘记,客户端验证只应补充服务器端验证。
在运行此演示之前,我们需要定义此事件处理程序。 在这里,我使用Webix消息框向用户提供有关输入内容的反馈:
function submit(){
webix.message(JSON.stringify($$("myForm").getValues(), null, 2));
}
此代码使用Webix getValues方法从ID为myForm
的表单中获取插入的数据,然后使用JSON.stringify()将其转换为JSON字符串。
好了,一切准备就绪,我们可以检查结果:
插入一些数据并单击“提交”按钮后,您将收到以下消息:
![](https://i-blog.csdnimg.cn/blog_migrate/3d45a0559a923a4e7043acc5a915f358.png)
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
这是演示:
请参阅CodePen上的SitePoint( @SitePoint )的Pen NNBgWm 。
似乎一切正常。 现在,让我们添加一些更有趣的东西。
多项选择和建议
不同的表单控件使您可以选择多个项目或使用建议。 对于我来说,最有趣的是Multicombo 。 此控件使您可以通过简单但直观的界面为一个输入字段选择多个值。
注意:最近发布的Webix(2016年4月26日)对Multicombo控件的工作方式进行了更改。 现在仅提供Webix Pro版本 (付费产品)。
想象一下,您想创建一个页面来帮助开发人员生成CV。 它可能包含以下字段:
由于您希望您的用户会了解多种编程语言,因此您可以编写此类语言的列表,并使用multicombo组件来呈现它们。 这是一个可能看起来像的例子:
var languages = [
{id: 1, lang: "JavaScript"},
{id: 2, lang: "PHP"},
{id: 3, lang: "Ruby"}
...
]
webix.ui({
...
elements: [
{
view: "multicombo", name: "skills", label: "Skills", button: true,
suggest: {
body: {
data: languages,
template: webix.template("#lang#")
}
},
}
]
});
除了熟悉的属性外,这里我们还使用button
属性和suggest
属性。 button
属性创建一个按钮来确认选择,而suggest
属性定义要在多组合框中显示的项目的来源。 在我们的示例中,我们使用data
属性指定数组的名称以及使用template
属性指定要显示的值。 也可以设置文件的路径(例如, suggest: "path/to/file/data.js"
),如果您想从大量数据源中提取不同的数据数组, suggest: "path/to/file/data.js"
上述方法进行t是更好的选择。 。
让我们检查一下它是如何工作的。 单击文本字段后,将显示下拉列表:
您可以滚动它并选择所需的项目,也可以开始键入以缩小建议的范围:
这个特定的示例表单将返回一堆与所选项目匹配的ID:
作为multicombo的替代方法,您可以检查Gridsuggest和Dataview建议组件。
使用树小部件作为表单元素
Webix并不限制您使用常规的表单元素,例如文本字段,按钮和复选框。 您可以在表单中放置任何所需的小部件。 例如,让我们看一下Tree Widget 。 它最初并不是设计为表单控件的,这就是为什么此元素没有setValue
和getValue
方法可用的原因。 但是,如果我们希望能够返回或设置此组件的值,则需要使用这些方法。 所以,我们能做些什么? 幸运的是,有可以帮助我们的protoUI方法 。 它允许在现有视图的基础上创建新视图。
让我们尝试一下:
webix.protoUI({
name: "formTree",
setValue: function(id){ this.select(id); },
getValue: function(){ return this.getChecked(); }
}, webix.ui.tree);
在上面的代码中,我们正在创建一个名为formTree
的新视图。 然后,我们定义两个允许我们设置和获取其id
值的新方法。 最后,我们将Tree小部件用作此新视图的基础。
现在让我们创建一些数据:
var treedata = [
{ id: "1", value: "Web", data: [
{ id: "1.1", value: "HTML" },
{ id: "1.2", value: "CSS" },
...
]},
{ id:"2", value:"Scripting", data: [
{ id: "2.1", value: "Shell" },
...
]},
...
];
您可以像往常一样将新元素添加到表单中:
webix.ui({
...
elements: [
{
view: "formTree",
name: "skills",
data: treedata,
height: 150,
threeState: true,
template: "{common.icon()} { common.checkbox() } #value#"
},
...
]
});
我们在这里引入了几个新属性: template
属性将复选框添加到树节点,并且threeState
属性启用三状态复选框 。 这些是其中的复选框:
- 当用户选中/取消选中父节点时,选中/取消选中(嵌套的每个级别的)父节点及其所有子节点。
- 当用户选中/取消选中子节点时,仅选中/取消选中单个子节点。
如果使用三态复选框,则应注意一个小问题。 选中复选框后,Webix将重新渲染树。 如果您决定使用键盘来填写表单,则当您按空格键切换复选框的选择时(对于基于WebKit的浏览器(例如Chrome)),可能会导致失去焦点,并且您将开始从表格的开始。
幸运的是,有一种解决方法。 您可以使用on
属性将新的处理程序附加到树上。 我们将其与选择特定树项时触发的onItemCheck
事件一起使用。 使用其他一些方法,我们可以确保焦点安全:
on: {
onItemCheck: function(id){
var node = this.getItemNode(id);
if(node){
checkbox = node.getElementsByTagName("input")[0];
checkbox.focus();
}
}
}
这应该工作。 但这是另一个问题:在制表时,WebKit不会标记复选框。 为了解决这个问题,您可以使用一些CSS代码向突出显示的复选框添加轮廓或框阴影。 这是一个例子:
input[type=checkbox]:focus { outline: -webkit-focus-ring-color auto 5px; }
完成所有这些操作后,我们可以单击Submit按钮来检查我们的手工方法是否有效:
是的,ID已成功提交。
您可以在此处检查此表单:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen aNjyJR 。
多选项卡和多步骤表单
如果您打算从用户那里收集大量数据,则可以将表单分成几小部分。 让我们看一下两种可能性:一个包含多个选项卡的表单和一个允许逐步插入数据的表单。
Tabview组件
Tabview组件创建元素的集合,这些元素分为多个选项卡,用户可以在这些选项卡之间进行切换。 您可以将单个元素用作Tabview内容,也可以定义包含所需元素的行和列的组合。
这是一个例子:
webix.ui({
...
elements: [{
view:"tabview",
cells: [
{
header:"First tab label",
body: {
// first tab content
}
},
{
header:"Second tab label",
body: {
rows:[
{ // first row content },
{ // second row content }
]
}
},
...
]
}]
...
});
这种方法背后的主要思想是将表单分隔开(从而使用户更易于管理)。 但是,您应该记住,与整个表单相关的组件(例如,提交按钮或“我接受”复选框)应置于tabview组件之外。
例如:
webix.ui({
...
elements: [{
view:"tabview",
cells: [
{
// 1st tab header and content
},
{
// 2nd tab header and content
},
{
view:"button",
value: "Submit",
width: 150,
align:"center",
click:submit
}
]
}]
...
});
这就是创建选项卡式表单所需的全部。 您可以检查以下结果:
这种方法的另一个优点是,无需添加任何额外的代码即可使这些部分协同工作。 只需将tabview组件放入表单中,将name
属性添加到每个字段中,便可以获取所有插入的值。 单击提交按钮进行确认:
看起来有点混乱,但这是我们的数据。
键盘辅助功能
如果您打算使用大量标签,并且想要使用Tab键在它们之间进行切换,则可以使用标签栏中的按钮。 这种方法使我们可以将选项卡添加到选项卡导航顺序中。 您需要做的就是更改header
属性:
header: "<button class='webixbutton'>Personal Info</button>"
您应该添加一些CSS代码以使这些按钮看起来像是本地的:
.webix_item_tab .webixbutton{
background-color:transparent;
}
.webix_item_tab.webix_selected .webixbutton:focus{
background-color:#268fd5;
}
.webix_item_tab .webixbutton:focus{
background-color:#98abb7;
}
在下面的演示中,我们还将使用日期选择器。 我们需要确保它在用户点击Return时出现,就像用户不能(当前)通过键盘与之交互一样,它确实提供了有用的视觉帮助。
实现此目的的一种方法是使用hotkey属性。 但是,您应该意识到这一点。 如果要将键绑定到单个页面元素,则该属性可以正常工作。 但是在我们的表单中有两个日期选择器。 因此,您应该使用addHotKey方法创建一个适用于所有日期选择器的新处理程序:
webix.UIManager.addHotKey("enter", function(view){
view.getPopup().show(view.getInputNode());
}, "datepicker");
您可以在以下演示中看到所有这些协同工作:
请参阅CodePen上 SitePoint( @SitePoint )的Pen ZWjJMj 。
或者,您可以使用手风琴执行此任务。
多视图组件
Multiview组件使我们可以创建一个元素序列,可以一个接一个地查看。 您可以使用标签在多视图区域之间进行切换,但是由于我们对创建多步表单感兴趣,因此让我们添加按钮来指导用户完成各个阶段。
首先,我们将需要创建两个函数来使“ 下一步”和“ 后退”按钮起作用:
function next(){
var parentCell = this.getParentView().getParentView();
var index = $$("formContent").index(parentCell);
var next = $$("formContent").getChildViews()[index+1]
if(next){
next.show();
}
}
function back(){
$$("formCells").back();
}
next
函数使用Webix的getParentView方法获取对包含单击任何按钮的单元格(即当前正在显示的单元格)的引用。 然后,它使用多formContent
组件( formContent
)的id
值来计算下一个(如果有的话)单元格。 如果存在下一个单元格,则使用show方法将其转换为视图。 back
功能使用后退方法将多视图切换到以前的活动视图
可以使用与我们之前定义的tabview元素相同的方式定义multiview元素。 但是,这一次,我们应该在每个单元格的底部再增加一行。 该行将包含控制按钮。 如果只有一个按钮要显示(如第一个单元格中所示),则我们包含一个空对象。
让我们看看它是什么样的:
webix.ui({
...
elements: [{
view: "multiview",
id: "formContent",
cells: [{
// First step
rows: [{
...
cols: [
// Buttons
{},
{ view: "button", value: "Next", click: next }
]
}]
},
{
// Second step
rows: [{
...
cols: [
// Buttons
{ view: "button", value: "Back", click: back },
{ view: "button", value: "Next", click: next }
]
}]
},
{
// Final step
rows: [{
...
cols: [
// Buttons
{ view: "button", value: "Back", click: back },
{ view: "button", value: "Submit", click: submit }
]
}]
}]
...
}]
});
现在让我们看看我们已经完成了什么:
单击下一步按钮后,将显示表单的下一部分。
让我们检查一下一切是否按预期进行:
是的! 这是最终的演示:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen aNjLdo 。
结论
在本教程中,我演示了Webix如何轻松地生成复杂,时尚且可访问的表单。 该框架将大量强大的小部件放在您的指尖,即使不打算立即将它们用作表单组件,使用protoUI
方法重新定义其行为也非常简单。
您在项目中使用Webix吗? 本教程是否启发您尝试一下? 在下面的评论中让我知道。
表单展示界示例