Webix的使用

原创
2017/04/04 14:18
阅读数 724

介绍

Webix JavaScript UI库可以帮客户构建跨平台的HTML5和CSS3程序。Webix其中包含的组件超过45个,用这些组件可以构建跟HTML5和CSS3兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS、 Android和Blackberry设备上运行。它能访问离线web存储、地理位置( geolocation) API、能在画布上绘图,并集成了jQuery和Backbone.js。

官网:http://webix.com/

例子1: 行和列

webix.ui({
    type:"line",
    rows: [
        { template:"Row 1"},
        { template:"Row2"}
    ]
});

type的值有"line" (default), "head", "space", "wide" and "clean" (borderless)

例子2: width 和 height设置布局大小

webix.ui({
    width:400,
    height:200,
    type:"line",
    rows: [
        { template:"Row 1"},
        { template:"Row2"}
    ]
});

例子3: 自定义的html实现布局

<div id="testA" style="width:400px; height:300px; margin:10px;"></div>
webix.ui({
    type: "line",
    container: "testA",
    // ...
});

布局的也可以通过自定义的html实现,通过配置container属性

例子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"}
        ]}
    ]
});

例子5: 工具栏与列表

  1. 配置工具栏Toolbar
    一般的第一个(上)行都放置工具栏按钮,用于用户与app交互
    所有的webix组件和控件都有view属性,这个属性用来区别你是创建的是按以按钮,复选框,列表,表格等
    注意,此时行的高度是随着工具栏里的控件的高度变化而变化的
  2. view:"form" 为表单控件,为了得到用户数据,表单控件里包含其它许大量的控件这些控件被放在ows/elements 和 cols
  3. align 表明控件里文本的相对位置,可能的值有"left" (default), "right" and "center."
  4. 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

通过列表更新数据

  1. 传输列表中所选的数据项到form中对应的域
  2. 将form中己改变的数据替换掉原来列表中的数据

通过列表删除数据

  1. 获取列表中所选项的ID
  2. 将所选表列的数据从列表中的删除

改进删除表单,在删之前给出提示确认框,通过webix.confirm()实现

  1. title,窗口标题
  2. text,窗口的提示信息
  3. 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

展开阅读全文
加载中

作者的其它热门文章

打赏
0
1 收藏
分享
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部