Webix 是一个JavaScript UI 库，供给了多达88个UI小部件和功能丰富的 CSS/HTML5 JavaScript 控件。(分开源和贸易收费版本)应用 Webix 可以有效地加快 Web 应用的开辟。文本将演示了若何经由过程 Webix 框架，来创建一个 Email 客户端原型。
安装 Webix
可以下载 Webix 的 JS、CSS 文件，但最快的方法是应用 Webix 的 CDN， 如下：
我们为我们的第一个应用创建第一个页面 index.html。在 <body> 中定义 js 脚本，来放置 UI 设备：
接着，我们编写 UI 设备：
为了能加倍友爱显示中文，我们在<head>标签琅绫擎加上<meta charset="UTF-8">。
如许，我们完全的第一个应用的代码如下：
用浏览器直接打开我们的index.html 页面，可以看到如下效不雅：
摸索项目
那么，我们来简单介绍下 Webix 的道理。
Webix 的应用法度榜样都是放置在 script 脚本中：
须要留意的是，如不雅想让 Webix 脚本在 HTML 文档加载完了再履行，可以应用 webix.ready(function(){ ....}) 来担保我们的 Webix，用法如下：
下面代码是用 Webix 中的 view 来定义一个视图组件，多个 view 可以实现复杂的应用构造构造：
在上述例子中，我们用到了两种类型的 view，个中，
- rows 代码垂直构造的多个列，这个，我们每个行(row)就是一个view;
- ui.template 是一个用于担保 HTML 内容的容器。这里我们用来类型为header的template来解释这个是应用头。更多 template 的类型，可以自行参阅https://docs.webix.com/samples/80_docs/template_types.html;
- ui.datatable 是一个功能丰富的数据表格组件;
- autoConfig 设置为 true，注解表格会根据数据来自适应;
- data 就是表格中放置的数据
进阶
在快速懂得 Webix 的相干概念之后，我们就要来创建一个稍微复杂一点的应用，就是本文的重要内容“Email 客户端”。
构造
大年夜大年夜构造开端，再慢慢求精，是构建前端应用的根本思路。我们创建了如下构造构造：
个中：
- cols 就是列，每行(row)可能包含了多个列(col);
- height 和 width 属性来定义视图所需的大年夜小了
- type，它定义了构造边框。如不雅应用clean将获得无边框的单位格，应用wide将获得有边框的、有更大年夜空间的单位格。
实现 Toolbar
Toolbar(对象栏)可以包含各类元素，如按钮或下拉菜单等。
记住，要应用Webix创建组件，必须应用view:“component_name”代码行，元素属性许可选择对象栏的内容。
- elements 用来放置子的view组件。
- label 就是显示通俗的文本标签
这里，我们应用了 ui.chart，来创建图表。
实现 Tree
快速开端
创建菜单目次树：
最终效不雅如下：
实现 Calendar
创建日历组件：
个中:
- calendar 是一个功能丰富的日历组件;
- timepicker 设置为 true，在日历上显示时光选择器。
推荐阅读
作为IT时代的大年夜业人员，你应当懂得VCE的融合体系家族(如今是Dell EMC的融合平台部分)在以前喂恼菩一向在跨>>>详细阅读
地址：http://www.17bianji.com/lsqh/36010.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示