Webix学习笔记-创建一个基本应用程序-01-设置组件

杀马特。学长 韩版系。学妹 提交于 2019-12-20 22:37:50

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

布局内容如下

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

下面就开始这个页面布局

第一步:入门

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

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

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

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

第二步:编辑行

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

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

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

第三步:编辑列

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

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

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

第四步:增加操作按钮

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

代码如下:

<!-- lang: html -->
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
        ]}
    ]
});

第五步:增加表单

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

<!-- lang: html -->
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数据填充列表数据
  • 显示标题和年份信息

代码如下

<!-- lang: html -->
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}
                ]
            } 
        ]}
    ]
});

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!