XB 软件公司最近发布了JavaScript UI 库Webix ，其中包含的组件超过45个，用这些组件可以构建跟HTML5 和 CSS3 兼容的程序，这些程序不仅能在个人电脑上运行，还能用在iOS、 Android 和 Blackberry 设备上运行。它能访问离线web存储、地理位置（ geolocation） API、能在画布上绘图，并集成了jQuery 和 Backbone.js。
Webix提供了简单的服务端集成控件，PHP、 ASP.NET、Java和 Ruby等各种技术都可以跟客户端的Webix部件直接通讯。此外这些组件还能用在一些MVC框架中，比如RoR、ASP.NET MVC、Spring、Struts 和 Grails.
Webix 库中包含的组件 有 Accordion、Calendar、Carousel、Chart、Colorboard、Context、ContextMenu、 DataTable、Dataview、Form、Form控件、Grouplist、HTMLform、IFrame、Layout、Resizer、List、Menu、Multiview、 Popup、Property Sheet、Scrollview、 Tabview、 Template、 Toolbar、 Tree、Treetable、 Unitlist、Uploader 和 Window。
本文将对快速入门例子进行详细的解述。
例子１: 行和列
布局是通过行和列来决定的，行和列之间的border是通过type来设定的
type的可能值有"line" (default), "head", "space", "wide" and "clean" (borderless)
webix.ui({
type:"line",
rows: [
{ template:"Row 1"},
{ template:"Row2"}
]
});
例子２: width 和 height设置布局大小
布局的大小可以通过 width 和 height配置
webix.ui({
width:400,
height:200,
type:"line",
rows: [
{ template:"Row 1"},
{ template:"Row2"}
]
});
例子3: 自定义的html实现布局
布局的也可以通过自定义的html实现,通过配置container属性
<div id="testA" style="width:400px; height:300px; margin:10px;"></div>
webix.ui({
type: "line",
container: "testA",
// ...
});
例子4: 栏和列
- 列和栏可以相互嵌套，列中可以包含栏，栏里可以包含列
- {},//!empty也可以包含空的列或栏，但里面没有属性和组件
- view:"resizer" 一个缩放线可以设置之间的任何行和列的大小，但刷新后会恢复到原始
- width和height控制着显示栏或列的宽度高度。
webix.ui({
type:"line",
rows: [
{ template:"Row 1",height:50},
{view:"resizer"}, //!resizer line
{ cols:[ //2nd row
{ template:"Column 1"},
{},//!empty
{ template:"Column 2"}
]}
]
});
例子５: 工具栏与列表
- 配置工具栏Toolbar
一般的第一个（上）行都放置工具栏按钮,用于用户与app交互
所有的webix组件和控件都有view属性，这个属性用来区别你是创建的是按以按钮，复选框，列表，表格等
注意，此时行的高度是随着工具栏里的控件的高度变化而变化的 - view:"form" 为表单控件，为了得到用户数据，表单控件里包含其它许大量的控件这些控件被放在ows/elements 和 cols
- align 表明控件里文本的相对位置，可能的值有"left" (default), "right" and "center."
- list控件
- 列表控件是一个包含数据的控件，主要有以下属性
- data: 用于解析内联数据
- url: 载入数据从一个文件或数据库
- template: 定义数据的值，但必须是hash类型
- datatype：识别来源数据的类型
- webix支持JSON (default), JSArray, XML, CSV and HTML table 数据，如果没有指明，则用的是json
var filmset = [
{ id:1, title:"The Shawshank Redemption", year:1994},
{ id:2, title:"The Godfather", year:1972},
{ id:3, title:"The Godfather: Part II", year:1974},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966},
{ id:5, title:"My Fair Lady", year:1964},
{ id:6, title:"12 Angry Men", year:1957}
];
webix.ui({
type:"line",
rows: [
{ view:"toolbar", id:"mybar", elements:[
{ view:"button", value:"Add", width: 70},
{ view:"button", value:"Delete", width: 70 },
{ view:"button", value:"Update", width: 70 },
{ view:"button", value:"Clear Form", width: 85 }]
},
{ cols:[
{view:"form", id:"myform", width:200, elements:[
{ view:"text", name:"title", placeholder:"Title", width:180, align:"center"},
{ view:"text", name:"year", placeholder:"Year", width:180, align:"center"} ]
},
{
view:"list",
id:"mylist",
template:"#id# - #title# - #year#",
select:false, //enables selection
height:400,
data: filmset
}
]}
]
});
例子6: 事件,实现对列表的添删改查
将操作函数附加在控件上实现对App的交相事件
- 使用ID
- 必须指定事件在一个组件视图中
- 附加一个函数到控件
如何添加一行数据到列表
- 为了增加一行数据到列表，首先要从表单中获取文本值。
- 获取表单的值用表单的ID, 如$$("myform").getValues()
- 为了得到指定的值，需要指定表单里控件的name 如$$("myform").getValues().title
通过列表更新数据
- 传输列表中所选的数据项到form中对应的域
- 将form中己改变的数据替换掉原来列表中的数据
通过列表删除数据
- 获取列表中所选项的ID
- 将所选表列的数据从列表中的删除
改进删除表单,在删之前给出提示确认框,通过webix.confirm()实现
- title,窗口标题
- text,窗口的提示信息
- callback，点选按按钮(yes或no)后的触发函数
webix.ui.fullScreen();
var filmset = [
{id: 1, title: "The Shawshank Redemption", year: 1994},
{id: 2, title: "The Godfather", year: 1972},
{id: 3, title: "The Godfather: Part II", year: 1974},
{id: 4, title: "The Good, the Bad and the Ugly", year: 1966},
{id: 5, title: "My Fair Lady", year: 1964},
{id: 6, title: "12 Angry Men", year: 1957}
];
//function add_row() {
// webix.message("Add")
//}
//function update_row() {
// webix.message("Update")
//}
//function delete_row() {
// webix.message("Delete")
//}
webix.ui({
rows: [
{
view: "toolbar", id: "mybar", elements: [
{view: "button", value: "Add", width: 70, click: add_row},
{view: "button", value: "Delete", width: 70, click: delete_row},
{view: "button", value: "Update", width: 70, click: update_row},
{view: "button", value: "Clear Form", width: 85, click: "$$('myform').clear()"}]
},
{
cols: [
{
view: "form", id: "myform", width: 200, elements: [
{view: "text", name: "title", placeholder: "Title", width: 180, align: "center"},
{view: "text", name: "year", placeholder: "Year", width: 180, align: "center"}]
},
{
view: "list",
id: "mylist",
template: "#title# - #year#",
select: true, //enables selection
height: 400,
data: filmset
}
]
}
]
});
//adding form data to a list while creating a new row for it
function add_row() {
$$("mylist").add({
title: $$("myform").getValues().title,
year: $$("myform").getValues().year,
})
}
//一旦选择某项，则会自动将传设置到form表单中
$$("mylist").attachEvent("onAfterSelect", function (id) {
$$("myform").setValues({
title: $$("mylist").getItem(id).title,
year: $$("mylist").getItem(id).year
});
});
function update_row() {
//获取列表中所选项的ID
var sel = $$("mylist").getSelectedId();
if (!sel) return;
//得到form表单中改变的值
var value1 = $$("myform").getValues().title;
var value2 = $$("myform").getValues().year;
//获取列表中所选择的项并对相关属性赋值
var item = $$("mylist").getItem(sel); //selected item object
item.title = value1;
item.year = value2;
//对列表中原来的对象赋值
$$("mylist").updateItem(sel, item);
}
function delete_row()
{
//获取列表中所选项的ID
var sel = $$("mylist").getSelectedId();
if (!sel) return;
var item = $$("mylist").getItem(sel); //selected item object
var title=item.title;
var year=item.year;
webix.confirm({
title: "Delete",
text: "Are you sure you want to delete ["+title+" - "+year+"] from the list?",
callback: function(result) {
if (result) {
//将所选表列的数据从列表中的删除
$$("mylist").remove(sel);
}
}
});
}
参考源码：
https://github.com/tomlxq/best-practice/tree/master/gs-webix
