使用Webix框架创建表单

Simon Codrington和Mallory Van Achterberg对本文进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！

作为网络设计师，您的机会是您必须定期创建Web表单。这通常是一项令人不愉快的任务，而且头痛（尤其是如果您做更复杂的事情，例如创建多步表格）。在这种情况下，最好使用UI框架缓解疼痛并加快开发过程。在本文中，我将概述各种技巧和技巧，可让您使用Webix Framework快速创建不同类型的表单。 钥匙要点

>简单性和速度：利用Webix JavaScript UI库可显着简化形式创建的过程，从而可以快速开发和集成复杂形式，例如多步和多tab forms。 表单创建中的多功能性：Webix提供了各种形式的元素和配置，包括简单的表单，具有多个选择选项的表单，以及诸如Forms of Forms offorme的窗口小部件的创新用途。

自定义和灵活性：该框架支持广泛的自定义选项，包括创建自定义皮肤和使用视觉设计器工具进行拖放UI创建，符合特定的设计要求。

高级功能：Webix提供高级功能，例如选择和建议，增强表单的用户界面和体验。

>

集成和兼容性：该框架与各种包含在项目中的方法兼容，支持主要的浏览器和设备，并且可以与其他JavaScript框架一起使用，使其适应各种开发环境。
什么是webix？
• Webix是HTML5组件的JavaScript UI库，可促进创建移动和桌面Web应用程序。它为您提供各种组件，从简单的按钮到电子表格小部件，可用于开发类似Excel的应用程序。除了UI组件集合外，还有一个事件处理机制，离线模式支持和一堆开发工具。您还可以使用皮肤构建器创建自己的皮肤，使用Visual Designer进行拖放UI创建，并在在线源代码游乐场中使用代码。该项目还具有详尽的文档。
• >我已经写了一篇介绍性文章，描述了使用此框架的关键功能和基础知识，因此，如果您有兴趣，请随时对其进行查看。
>

包括webix

>您可以在项目中包含所需的JavaScript和CSS文件的多种方式。如果下载库软件包，则会在代码库文件夹中找到这些文件。您可以按以下方式包含它们：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

另外，您可以使用CDN：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

您也可以使用nuget：

nuget <span>install Webix
</span>

>如果您使用Microsoft Visual Studio，请从Package Manager Console中执行此操作：>

install-package Webix

或尝试鲍尔：

bower install webix

创建一个简单的表单

现在，有了库，让我们看看Webix表单如何工作。

我们首先调用Webix对象的UI方法并传递各种参数以配置其输出。

webix<span>.ui({
</span>  <span>view: "form",
</span>  <span>id: "myForm",
</span>  <span>container: "areaA",
</span>  <span>width: 350,
</span>  <span>elements: [
</span>    <span>{ // first form component },
</span>    <span>{ // second form component},
</span>    <span>{ // n-th form component */}
</span>  <span>]
</span><span>});
</span>

视图属性决定创建的元素类型（在这里我们正在创建表单，但这也可以是菜单或图表）。

ID属性将ID分配给表单，您可以稍后将其引用。

>
• 容器属性指定了应向表单渲染的HTML元素的ID。
>宽度属性用于设置表单元素的宽度。 Webix假设您想在此处使用像素作为测量单位，因此您只需要设置一个适当的数字。
• >
元素属性是您的表单所包含的组件数组。您可以在表单中使用任何适当的组件：文本字段，单选按钮，复选框，按钮等
>让我们创建一个简单的登录表单。我们将需要两个文本字段（一个用于用户名，一个用于密码），一个复选框，当然还有一个提交按钮。
• 请注意，我们正在为我们的表单元素指定名称属性，并为密码字段设置“密码”，以便在输入字符时掩盖它们。设置元素的标签属性定义了该元素的标签，我们可以使用元素的单击属性来定义事件处理程序，该事件处理程序在提交表单时将被调用。尽管有可能检查数据的一切都可以，但请不要忘记客户端验证只能补充服务器端验证。>
>在运行此演示之前，我们需要定义此事件处理程序。在这里，我正在使用Webix消息框，以提供有关输入内容的用户反馈：

>

此代码使用webix getValues方法从形式中使用myform的ID得出插入的数据，然后使用json.stringify（）。

webix<span>.ui({
</span>  <span>...
</span>  <span>elements: [
</span>    <span>{ view: "text", label: "Username", name: "username" },
</span>    <span>{ view: "text", label: "Password", name: "password", type: "password" },
</span>    <span>{ view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
</span>    <span>{ view: "button", value: "Submit", width: 150, align: "center", click: submit }
</span>  <span>]
</span><span>});
</span>

好吧，一切都已经准备就绪，我们可以检查结果：

插入一些数据并点击提交按钮后，您将收到消息：>

<span>function submit(){
</span>  webix<span>.message(JSON.stringify($$("myForm").getValues(), null, 2));
</span><span>}
</span>

这是演示：

>请参阅codepen上的sitepoint（@sitepoint）的笔nnbgwm。

似乎一切都很好。现在，让我们添加一些有趣的东西。

>

多个选择和建议

不同的形式控件允许您选择多个项目或使用建议。至于我，其中最有趣的是Multicombo。这是一个控件，可让您通过简单但直观的接口为输入字段选择多个值。>

>注意：最近的Webix版本（2016年4月26日）看到了多功能控制的工作方式。现在仅在Webix Pro版本（付费产品）中可用。

>

想象您要创建一个页面，该页面将帮助开发人员生成简历。它可以包含以下字段：

>由于您希望您的用户了解多种编程语言，因此可以撰写此类语言列表，并使用Multicombo组件来展示它们。这是一个可能是什么样子的示例：

除了熟悉的属性外，我们还使用按钮属性和建议属性。 按钮属性创建一个按钮来确认选择，而建议属性定义了要在多医学中显示的项目的来源。在我们的示例中，我们使用数据属性来指定数组的名称以及模板属性来指定要显示的值。也可以设置通往文件的路径（例如，建议：“路径/to/to/file/data.js”），如果要从大源提取不同的数据阵列，则进行t是更好的选择。

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>让我们检查一下它的工作原理。单击文本字段后，下拉列表将显示：

>您可以滚动并选择所需的项目，或者开始键入以缩小建议：：

此特定示例表格将返回一堆与所选项目匹配的ID：>

这是此示例的演示。

>作为Multicombo的替代方案，您可以检查GridSuggest和Dataview建议组件。

使用树小部件作为表单元素

>

Webix不会将您限制为传统的表单元素，例如文本字段，按钮和复选框。您可以将自己喜欢的任何小部件放在您的表格中。例如，让我们看一下树小部件。它最初不是作为表单控件设计的，这就是为什么该元素没有可用的setValue和getValue方法的原因。但是，如果我们希望能够返回或设置此组件的值，则需要这些方法。那么，我们该怎么办？ 幸运的是，有一种可以帮助我们的方法。它允许基于现有的视图创建新视图。

>让我们尝试一下：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>在上面的代码中，我们正在创建一个名为FormTree的新视图。然后，我们定义了两种新方法，这些方法允许我们设置并获得其ID值。最后，我们将树小部件用作这种新视图的基础。

现在，让我们创建一些数据：

>

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>您可以像往常一样将新元素添加到表单中：>

>我们在此处介绍了几个新属性：模板属性将复选框添加到树节点，而Threestate属性启用了3态复选框。这些是复选框，其中：

nuget <span>install Webix
</span>

当用户检查/取消选中父节点时，请检查/未选中（每个嵌套级别的每个级别）时。

用户检查/取消选中子节点时，只检查单个子节点/未选中。

>
如果您使用三州复选框，则应注意一个小问题。选择一个复选框时，Webix会重新呈现树。如果您决定使用键盘填充表单，则当您按下
• space
以切换复选框的选择（对于基于WebKit的浏览器（例如Chrome））时，它可能会导致焦点丧失，您'll从表单的一开始就开始出现。

>

很高兴，这有一个解决方法。您可以使用On属性将新处理程序附加到树上。我们将使用它与OnItemcheck事件一起使用，该事件在您选择特定的树项目时会发射。使用一些其他方法，我们可以确保焦点安全：

这应该起作用。但这是另一个问题：WebKit在标签时没有标记复选框。为了抵消这一点，您可以使用一些CSS代码在重点的复选框中添加轮廓或框影子。这是一个示例：

install-package Webix

>将所有这些都适当，我们可以单击提交按钮以检查我们的手工方法是否有效：

bower install webix

是的，ID已成功提交。

> >您可以在此处检查此表格：

>请参阅codepen上的sitepoint（@sitepoint）的笔Anjyjr。

多键和多步式

如果您打算从用户那里收集大量数据，则可以将表格分为小部分。让我们看一下两种可能性：由>多个选项卡组成的表单和允许数据插入数据的插入的表单。>

TABVIEW组件

> TABVIEW组件创建了一个分隔为选项卡的元素的集合，用户可以在其中切换。您可以将单个元素用作TabView内容，也可以定义包含您想要的元素的行和列的组合。

>

这是一个示例：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>这种方法背后的主要思想是将表单划分（从而使您的用户更易于管理）。但是，您应该记住，与整个表单有关的组件（例如，提交按钮或“我接受”复选框）应放置在TabView组件外。>

例如：

>这就是创建选项卡式表单所需的全部。您可以检查下面的结果：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>这种方法的额外优势是，无需添加任何额外的代码即可使这些零件作为一个。只需将TABView组件放在您的表单中，将名称属性添加到每个字段中，您就可以获取所有插入的值。单击

>提交

按钮确认：

>看起来有些混乱，但这是我们的数据。

>

键盘可访问性

如果您的意图是使用大量选项卡，并且您想使用

>选项卡

键在它们之间切换，则可以在标签栏中使用按钮。这种方法使我们可以将选项卡添加到标签导航订单中。您需要做的就是更改标题属性：

>您应该添加一些CSS代码，以使这些按钮看起来本地：

nuget <span>install Webix
</span>

在以下演示中，我们还将使用日期选择器。我们需要确保当用户访问

返回

时，就会出现它，就好像用户无法（当前）通过键盘与之交互，但它确实提供了有用的视觉辅助。

install-package Webix

实现这一目标的一种方法是使用Hotkey属性。但这是您应该意识到的。如果要将密钥绑定到单个页面元素，则此属性毫无麻烦。但是我们的形式有两个日期。因此，您应该使用AddHotkey方法来创建一个与所有datepickers一起使用的新处理程序：

>您可以看到所有这些在以下演示中一起工作：>

请参阅codepen上的sitepoint（@sitepoint）的笔zwjjmj。

>作为替代方案，您可以将手风琴用于此任务。

bower install webix

Multiview Component

> Multiview Component允许我们创建一个元素序列，可以互相查看。您可以使用选项卡在多视频区域之间进行切换，但是由于我们有兴趣创建多步式表单，因此让我们添加按钮以指导用户通过各个阶段。>

首先，我们将需要创建两个功能，以使

和 back 按钮工作：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>下一个函数使用Webix的getParentView方法来获取对单击哪个按钮的包含单元格的引用（即当前正在显示的单元格）。然后，它使用多视频组件（FormContent）的ID值来计算下一个单元格。如果有下一个单元格，则使用Show方法将其转换为视图。背面函数使用后面方法开关多视图到先前活动的视图

>可以以与以前定义的TabView元素相同的方式定义多视元素。但是，这次我们应该在每个单元的底部额外放一行。此行将包含控制按钮。如果仅显示一个按钮（如第一个单元格中），我们包括一个空对象。

让我们看看这是什么样子：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

>现在让我们看一下我们所做的事情：

>

我们单击

下一个>按钮，表格的下一部分将出现。

>让我们检查一切是否按预期工作：

>确实如此！这是最后的演示：

请参阅codepen上的sitepoint（@sitepoint）的笔anjldo。

结论

在本教程中，我展示了Webix使其产生复杂但时尚且易于访问的形式的简单性。该框架将大量强大的小部件放在您的触点上，即使不打算将它们用作形式的组件开箱即用，也可以使用Protoui方法重新定义其行为。

您是否在项目中使用Webix？本教程是否启发了您尝试一下？在下面的评论中让我知道。

经常询问有关Webix框架的问题（常见问题解答）

> Webix框架是什么，它如何工作？ Webix是一个功能强大的JavaScript UI库，允许开发人员创建丰富的高性能Web应用程序。它提供了100多个完全自定义的小部件，包括数据表，图表，表单等。 Webix通过允许开发人员使用JavaScript创建UI组件来工作，然后可以轻松地集成到任何Web应用程序中。该框架设计为易于使用，具有简单直观的API，并且还支持各种浏览器和设备。

我如何开始使用Webix？开始使用Webix，首先需要从官方Webix网站下载库。拥有库后，您可以通过在HTML文件中添加脚本标签来将其包含在项目中。从那里，您可以开始使用Webix API创建UI组件。官方的Webix文档提供了大量的信息和示例来帮助您入门。 Web开发的强大工具。一些关键功能包括超过100个UI小部件，简单而直观的API，对各种浏览器和设备的支持以及创建复杂的UI布局的能力。此外，Webix还提供了许多高级功能，例如数据绑定，事件处理和AJAX支持。

>

> Webix与其他JavaScript UI库相比如何？其他JavaScript UI库有几种方式。首先，它比大多数其他库提供了更大的UI小部件选择，从而使开发人员可以创建更复杂且功能丰富的应用程序。其次，Webix设计为易于使用，具有简单直观的API，可以轻松启动。最后，Webix提供了出色的性能，具有快速的渲染时间和有效的内存使用量。

我可以将Webix与其他JavaScript框架一起使用？

是的，可以与其他JavaScript框架一起使用Webix，例如角，反应和vue.js。这使开发人员可以利用其应用程序中多个框架的优势。例如，您可能会使用Angular来实现其强大的数据绑定功能，而使用Webix进行了丰富的UI小部件选择。

>

> webix适合移动开发？

是的，webix是完全响应的并支持各种设备，包括手机和平板电脑。对于希望创建移动友好的Web应用程序的开发人员来说，这是一个不错的选择。

>如何自定义Webix应用程序的外观？

> webix提供了多种自定义应用程序外观的方法。您可以使用CSS对UI组件进行样式，也可以使用Webix提供的许多预制皮肤之一。此外，Webix还允许您使用Skin Builder Tool创建自己的自定义皮肤。

webix为开发人员提供了一系列支持选项。官方的Webix网站提供了大量的文档和示例，以及一个论坛，您可以在其中提出问题并获得社区的帮助。此外，Webix还提供优质的支持软件包，其中包括对Webix开发团队的直接访问。

可以免费使用Webix吗？

webix提供其库的免费和付费版本。免费版本包括有限的小部件和功能选择，而付费版本可访问对各种小部件和功能的访问，以及高级支持。

>

>我如何了解有关Webix的更多信息？

>了解更多有关Webix的最佳方法是访问官方Webix网站，您可以在其中找到大量的信息和资源，包括文档，示例，教程等。您还可以在GitHub上加入Webix社区，在那里您可以找到其他资源并与其他Webix开发人员联系。

以上是使用Webix框架创建表单的详细内容。更多信息请关注PHP中文网其他相关文章！