laozhou_gui(简称zgui)是一个可以用序列化的dom结构来创建前端页面的GUI库。使用小案例:
let slider = {
tag: "div",
align: "row",
size: [0, 50],
style: {
marginBottom: "20px"
},
children: [
{
tag: "input",
type: "range",
value: "10"
},
{
tag: "button",
size: [100, 0],
textContent: "滑块测试"
}
]
}
let search = {
tag: "div",
align: "row",
size: [0, 50],
style: {
marginBottom: "20px"
},
children: [
{
tag: "input"
},
{
tag: "img",
size: [50, 50],
src: ZGUI.icon.search
}
]
}
let listbox = {
tag: 'select',
name: 'liebiao',
size: 5,
style: {
display: "block"
},
children: [
{
tag: 'option',
value: '张三',
textContent: ' 张三'
},
{
tag: 'option',
value: '李四',
textContent: ' 李四'
},
{
tag: 'option',
value: '王五',
textContent: ' 王五'
},
{
tag: 'option',
value: '老六',
textContent: ' 老六'
},
{
tag: 'option',
value: '横七',
textContent: ' 横七'
},
{
tag: 'option',
value: '竖八',
textContent: ' 竖八'
}
]
}
let main = {
tag: "div",
align: "stack",
children: [
{
tag: "div",
bound: [0, 50],
children: [
slider,
search,
{
tag: "div",
align: "row",
size: [0, 450],
children: [
{
tag: "textarea",
size: [0, 400]
},
listbox
]
}
,
{
tag: "button",
textContent: "运行",
drag: true,
onclick: function () {
console.log(this.textContent);
ZGUI.getDom("textarea").value = ZGUI.getDom("input")[1].value;
}
}
]
}
]
}
ZGUI.buildHtml(main);