webix.ui({ | |
view:"form", elements:[ | |
{ | |
view:"tabview", | |
tabbar:{ options:["A","B","C"]}, animate:false, | |
cells:[ | |
{ id:"A", rows:[ | |
{ view:"text", name:"value1", label:"value1" }, | |
{} | |
]}, | |
{ id:"B", rows:[ | |
{ view:"text", name:"value2", label:"value2" }, | |
{} | |
]}, | |
{ id:"C", rows:[ | |
{ view:"text", name:"value3", label:"value3" }, | |
{} | |
]} | |
] | |
}, | |
{ cols:[ | |
{}, | |
{ view:"button", value:"Get value", click:function(){ | |
webix.message("<pre>"+JSON.stringify($$("$form1").getValues(), 0, 1)+"</pre>"); //在右上角输出弹窗 | |
}}, | |
{ view:"button", value:"Validate", click:function(){ | |
//'true' forces validation of hidden fields | |
$$("$form1").validate({hidden:true}); //校验数据是否正确 | |
}}, | |
{} | |
]}, | |
], | |
rules:{ //校验规则 | |
"value1":webix.rules.isNotEmpty, | |
"value2":webix.rules.isNumber, | |
"value3":webix.rules.isNotEmpty | |
}, | |
on:{ | |
onAfterValidation:function(result, value){ //通过校验结果执行事件 | |
if (!result) | |
webix.message({type:"error", text:"Incorrect values"}); | |
else | |
webix.message("Data is correct"); | |
} | |
} | |
}); | |
$$("$form1").setValues({ | |
value1:"111", | |
value3:"333", | |
}); |
教程原址:https://docs.webix.com/desktop__form.html
例子原址:https://docs.webix.com/samples/13_form/02_api/13_tabs_form.html