使用 Webix 创建 Email 客户端

摘要：Webix 是一个JavaScript UI 库，提供了多达88个UI小部件和功能丰富的 CSS/HTML5 JavaScript 控件。使用 Webix 可以有效地加快 Web 应用的开发。文本将演示了如何通过 Webix 框架，来创建一个 Email 客户端原型。

Webix 是一个JavaScript UI 库，提供了多达88个UI小部件和功能丰富的 CSS/HTML5 JavaScript 控件。使用 Webix 可以有效地加快 Web 应用的开发。文本将演示了如何通过 Webix 框架，来创建一个 Email 客户端原型。

安装 Webix

可以下载 Webix 的 JS、CSS 文件，但最快的方式是使用 Webix 的 CDN， 如下：

...

快速开始

我们为我们的第一个应用创建第一个页面 index.html。在中定义 js 脚本，来放置 UI 配置：

/*  UI 配置 */

接着，我们编写 UI 配置：

webix.ui({rows: [        {view:"template",type:"header",template:"我的应用!"},        {view:"datatable",autoConfig: true,data: [                {title:"Way Lau",year:1987,votes:533848,rating:8.9,rank:5},                {title:"老卫",year:1987,votes:53248,rating:5.9,rank:6}            ]        }    ]});

为了能更加友好显示中文，我们在标签里面加上。

这样，我们完整的第一个应用的代码如下：

/*  UI 配置 */webix.ui({            rows: [                {                    view:"template",                    type:"header",                    template:"我的应用!"},                {                    view:"datatable",                    autoConfig:true,                    data: [                        { title:"Way Lau", year:1987, votes:533848, rating:8.9, rank:5},                        { title:"老卫", year:1987, votes:53248, rating:5.9, rank:6}                    ]                }            ]        });

用浏览器直接打开我们的index.html 页面，可以看到如下效果：

探索项目

那么，我们来简单介绍下 Webix 的原理。

Webix 的应用程序都是放置在 script 脚本中：

webix.ui({// 组件});

需要注意的是，如果想让 Webix 脚本在 HTML 文档加载完了再执行，可以使用webix.ready(function(){ ....})来包裹我们的 Webix，用法如下：

原文链接