17 KiB
17 KiB
form
用法
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "VBox",
"options": { "height": "100%" },
"subwidgets": [
{
"widgettype": "HBox",
"options": { "height": "auto" },
"subwidgets": [
{
"widgettype": "Text",
"options": {
"otext": "Please change Font size",
"i18n": true
}
},
{
"widgettype": "Button",
"options": {
"label": "A",
"width": "auto",
"item_rate": 1.4
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "script",
"target": "app",
"script": "bricks_app.textsize_bigger()"
}
]
},
{
"widgettype": "Button",
"options": {
"label": "A",
"width": "auto",
"item_rate": 0.8
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "script",
"target": "app",
"script": "bricks_app.textsize_smaller()"
}
]
}
]
},
{
"widgettype": "Form",
"options": {
"submit_url": "/ttt/ttt.dspy",
"title": "Test hahah Form",
"description": "test input implemented",
"fields": [
{
"uitype": "email",
"name": "email",
"label": "Email",
'required': true
},
{
"uitype": "tel",
"name": "tel",
"pattern": "{\d}3-{\d}4-{\d}4",
"label": "Tel",
'required': true
},
{
"uitype": "file",
"name": "file",
"label": "File",
'required': true
},
{
"uitype": "str",
"minlength": 3,
"length": 30,
"value": "tlegre",
"name": "name",
"label": "Name",
'required': true
},
{
"uitype": "int",
"minlength": 3,
"length": 30,
"value": 12432,
"name": "integer",
"label": "Integer",
'required': true
},
{
"uitype": "float",
"dec_length": 3,
"length": 25,
"name": "float",
"label": "Float"
},
{
"uitype": "date",
"name": "date",
"label": "Date",
'required': true
},
{
"uitype": "password",
"minlength": 3,
"length": 30,
"name": "password",
"label": "Password",
'required': true
},
{
"uitype": "checkbox",
"name": "checkbox",
"label": "CheckBox",
"value": 2,
"dataurl": "test_code.json",
'required': true
},
{
"uitype": "audio",
"name": "audio",
"label": "Audio",
'required': true
},
{
"uitype": "code",
"name": "code",
"label": "Code",
"value": 2,
"dataurl": "test_code.json",
'required': true
},
{
"uitype": "text",
"name": "text",
"value": "This is a test",
"label": "Text",
'required': true
}
]
}
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
效果图
widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| widgettype | 控件类型 | String | 是 | Vbox/Hbox | --- |
| options | 当前控件的配置项 | Object | 是 | height | 100%/auto/scroll |
| id | 控件的唯一标识 | String | 否 | --- | ---- |
| subwidgets | 表单里的内容,比如表单里的子项 | Object | 否 | --- | --- |
| binds | 绑定的事件 | Object | 否 | --- | --- |
注意:
如果没有widget.subwidgets参数的话,表单是一个框架,没有子级,但是还可已继续添加事件
widgent.subeidgets参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| widgettype | 控件类型 | String | 是 | Vbox/Hbox | --- |
| options | 当前控件的配置项 | Object | 是 | height | 100%/auto/scroll |
| subwidgets | 表单里的内容的配置项,比如表单里的子项 | Object | 否 | ---- | --- |
注意:此处widgettype的值不一样,options的配置项也不相同
widgettype值为Hbox时,相关配置项的参数说明
options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| options | 表单子项的配置项 | object | 是 | {"heigt":"auto"} | --- |
subwidgets配置项参数说明
注意:subwidgets.widgettype的值不一样,相对的options的参数也不相同
-
widgettype值为"Text"时,options参数说明
参数 参数说明 类型 是否必填 可选值 默认值 otext 默认显示的文字 String 否 --- --- i18n 是否国家化 Boolean 否 true/false --- -
widgettype值为"Button"时,options参数说明
参数 参数说明 类型 是否必填 可选值 默认值 label 表单子项的标题 String 否 --- --- width 表单子项的宽度 String 否 auto/100% --- item_rate 字体的大小 number 否 --- --- -
binds事件参数说明
参数 参数说明 类型 是否必填 可选值 默认值 wid 当前节点的唯一标识 String 是 self --- event 事件的类型 String 是 click --- actiontype 事件的执行方式 String 是 script --- target 事件在哪个载体执行 String 是 --- --- script 事件通过哪个方法执行 String 是 --- ---
widgettype值为Form时,相关配置项的参数说明
options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| submit_url | 接口地址 | String | 是 | --- | --- |
| title | 标题 | String | 否 | --- | --- |
| description | 描述 | String | 否 | --- | --- |
| fields | 表单的子项的具体配置内容 | Array | 否 | --- | --- |
options.fieds参数说明
注意:options.fieds内,每一项的uitype值不一样,其配置项也不同
-
uitype为email时的参数配置(注意:email为邮件格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- -
uitype为tel时的参数配置(注意:tel为手机号格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- name 表单子项的原生name属性 String 是 --- --- pattern 当前项的正则校验 String 否 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- -
uitype为file时的参数配置(注意:file为上传文件格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- -
uitype为str时的参数配置(注意:str为文字格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- minlength 当前值的最少字符数量 number 否 --- --- length 当前值的最大字符数量 number 否 --- --- value 当前子项默认显示的值 String 否 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false ---
-
uitype为int时的参数配置(注意:int为数字格式)
注意:uitype为int时,数值可以点击增加或者减少,且只能填入数字)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- minlength 当前值的最少字符数量 number 否 --- --- length 当前值的最大字符数量 number 否 --- --- value 当前子项默认显示的值 String 否 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- -
uitype为float时的参数配置(注意:float为浮点数字格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- dec_length 当前值能显示的最少浮点位数 number 否 --- --- length 当前值能显示的最多浮点位数 number 否 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- -
uitype为date时的参数配置(注意:data为时间格式)
注意:此项可以填写时间,也可以选择时间
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false ---
-
uitype为password时的参数配置(注意:password为密码格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- minlength 当前值的最少字符数量 number 否 --- --- length 当前值的最大字符数量 number 否 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- -
uitype为chexkbox时的参数配置(注意:chexkbox为复选格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- value 当前子项默认显示的值 number 否 --- --- dataurl 当前项的值的来源,接口地址或者是JSON文件地址 String 是 --- --- -
uitype为code时的参数配置(注意:code为下拉选择格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false --- value 当前子项默认显示的值 number 否 --- --- dataurl 当前项的值的来源,接口地址或者是JSON文件地址 String 是 --- --- -
uitype为text时的参数配置(注意:text为文本框格式)
参数 参数说明 类型 是否必填 可选值 默认值 uitype 表单子项的类型 String 是 --- --- value 当前子项默认显示的值 String 否 --- --- name 表单子项的原生name属性 String 是 --- --- label 当前子项的标签文本 String 否 --- --- required 是否必须 Boolean 是 true/false ---