webix前端界面框架

这里我们创建一个简单的电影布局，在电影的列表中，我们可以添加元素。

布局内容如下

• 一个电影列表
• 一个用来添加电影信息的表单
• 一个操作增加删除的工具栏

下面就开始这个页面布局

第一步：入门

在script中建立一个空白的页面，代码如下

<script type="text/javascript" charset="utf-8">
webix.ui({
});
script>

如果需要确保页面加载完成之后再加载webix的内容，也可以使用webix的ready方法

<script type="text/javascript" charset="utf-8">
webix.ready(function(){webix.ui({......});
});
script>

第二步：编辑行

把整个页面分成上下两行，上面的行放置操作按钮，下面的行放置内容。设置页面的宽度为500px，代码如下

webix.ui({width:500,rows: [{ template:"Row 1" }, //1st row{ template:"Row 2" }  //2nd row]
});

刷新页面就可以看到效果。如果让两行占满整个页面，只需要删除width属性就可以了

第三步：编辑列

将下面的行也就是Row 2分割成左右两列，左边用来放置表单，用来录入电影信息。右边放置一个列表，用来显示信息内容

webix.ui({width:500,rows: [{ template:"Row 1" },{ cols:[{ template:"Column 1" },//1st column{ template:"Column 2" } //2nd column]}]
});

再刷新页面可以看到分割效果

第四步：增加操作按钮

• 在上面的行中放置一个toolbar工具栏，在工具栏中增加一个增加按钮和一个删除按钮
• 给按钮设置值
• 给按钮设置宽度属性

代码如下:

webix.ui({width:500,rows: [{ view:"toolbar", elements:[{ view:"button", value:"Add",    width:100 },{ view:"button", value:"Delete", width:100 }]},{ cols:[{ template:"Column 1" },//1st column{ template:"Column 2" } //2nd column]}]
});

第五步：增加表单

在页面左下的区域中增加一个表单，表单中包含标题和年份两个属性

webix.ui({
    width:500,
    rows: [{ view:"toolbar", elements:[{ view:"button", value:"Add",    width:100},{ view:"button", value:"Delete", width:100 }]},{ cols:[{view:"form", elements:[{ view:"text", placeholder:"Title"},  { view:"text", placeholder:"Year"}     ]},{ template:"Column 2" } //2nd column]}]
});

第六步：增加列表

• 在页面右下的区域中增加一个电影信息列表
• 使用json数据填充列表数据
• 显示标题和年份信息

代码如下

webix.ui({
    width:500,
    rows: [{ view:"toolbar", elements:[{ view:"button", value:"Add",    width:100},{ view:"button", value:"Delete", width:100 }]},{ height:120, cols:[{view:"form", elements:[{ view:"text", placeholder:"Title"},  { view:"text", placeholder:"Year"}     ]},{view:"list", 
                template:"#title# - #year#", // which data to show
                select:true, //enables selection 
                height:400,
                data: [{ 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}]} ]}]
});

刷新页面就可以看到页面展示的效果了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！