摘要: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,用法如下: