This commit is contained in:
yumoqing 2023-12-18 18:15:22 +08:00
parent 77994be32a
commit 86f6872006
75 changed files with 3454 additions and 939 deletions

BIN
docs/.DS_Store vendored

Binary file not shown.

42
docs/BoxLayout.md Executable file → Normal file
View File

@ -1,21 +1,21 @@
# BoxLayout # BoxLayout
Boxlayout is a one direction layout, it layout subwidgets on vertical direction or horizontal direction. Boxlayout is a one direction layout, it layout subwidgets on vertical direction or horizontal direction.
## use case ## use case
none none
## inheritance ## inheritance
BoxLayout inherited from Layout BoxLayout inherited from Layout
## options ## options
``` ```
{ {
orientation: orientation:
} }
``` ```
### orientation ### orientation
orientation get value of 'vertical' or 'horizontal', means layout child widget in veritcal or horizontal direction orientation get value of 'vertical' or 'horizontal', means layout child widget in veritcal or horizontal direction
### ###
## method ## method
none none
## event ## event
none none

47
docs/HBox.md Executable file → Normal file
View File

@ -1,11 +1,36 @@
# HBox # HBox
Hbox is a horizontal layout widget, it layout subwidgeta in horizontal direction Hbox是一个水平布局小部件它按水平方向布局子小部件
## use case ## 用法
## inheritance ```html
HBox inherited fromm BoxLayout <html>
## options
<head>
## method <link rel="stylesheet" href="/bricks/css/bricks.css">
none </head>
## event
none <body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "HBox",
"options":
{
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
**注意:hbox控件是水平排列的控件,相当于一个容器,可以容纳其他的控件,如button,form等**

82
docs/README.md Executable file → Normal file
View File

@ -1,41 +1,41 @@
# Bricks documentation # Bricks documentation
A web application development platform to make the web application development more easy. A web application development platform to make the web application development more easy.
It let developments choose the UI components provide by bricks or provide by third parts to construct his or her application just like use bricks to build toys. It let developments choose the UI components provide by bricks or provide by third parts to construct his or her application just like use bricks to build toys.
## Installation ## Installation
## Use Case ## Use Case
## Widget List ## Widget List
[Widgets](widgets.md) [Widgets](widgets.md)
## UI Components ## UI Components
### Layout ### Layout
Layout is the base Layout, please click [Layout](layout.md) for more detail. Layout is the base Layout, please click [Layout](layout.md) for more detail.
### BoxLayout ### BoxLayout
BoxLayout is a one direction layout, for more information, please click [BoxLayout](boxlayout.md) BoxLayout is a one direction layout, for more information, please click [BoxLayout](boxlayout.md)
### HBox ### HBox
HBox is a layout to layout subwidgets in horizontal direction, please click [HBox](hbox.md) for more information. HBox is a layout to layout subwidgets in horizontal direction, please click [HBox](hbox.md) for more information.
### VBox ### VBox
VBox is a layout to layout its subwidgets in vertical direction, please click [VBox](vbox.md) for more information. VBox is a layout to layout its subwidgets in vertical direction, please click [VBox](vbox.md) for more information.
### Text ### Text
### Title1 ### Title1
### Title2 ### Title2
### Title3 ### Title3
### Title4 ### Title4
### Title5 ### Title5
### Title6 ### Title6
### Image ### Image
Image show image on you dom tree, please click [image](image.md) for more information about Image widget Image show image on you dom tree, please click [image](image.md) for more information about Image widget
### MarkdownViewer ### MarkdownViewer
a markdown document viewer widget, for more information, please see [markdownviewer](markdownviewer.md) a markdown document viewer widget, for more information, please see [markdownviewer](markdownviewer.md)
### VideoPlayer ### VideoPlayer
a video player widget base on [indigo-player](https://github.com/matvp91/indigo-player), please look at [videoplayer](videoplayer.md) for more information. a video player widget base on [indigo-player](https://github.com/matvp91/indigo-player), please look at [videoplayer](videoplayer.md) for more information.
### Modal ### Modal
### Toolbar ### Toolbar
toolbar component provide user a toobar service, for more information pleaseclick [toolbar](toolbar.md) toolbar component provide user a toobar service, for more information pleaseclick [toolbar](toolbar.md)

94
docs/accordion.md Normal file
View File

@ -0,0 +1,94 @@
# accordion
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Accordion",
"options":{
"item_size":'28px',
"items":[
{
"name":"test1",
"icon":"/imgs/t.png",
"text":"accordion 1 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 1",
"i81n":true
}
}
},
{
"name":"test2",
"icon":"/imgs/t.png",
"text":"accordion 2 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 2",
"i81n":true
}
}
}
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\accordion.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------ | ------ | -------- | --------- | ------ |
| widgettype | 控件类型 | String | 是 | Accordion | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | ------------ | ------ | -------- | ------ | ------ |
| item_size | 控件的高度 | String | 是 | --- | --- |
| items | 控件的配置项 | Array | 是 | --- | --- |
#### widget.options.items参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------- | ---------------- | ------ | -------- | ------ | ------ |
| name | 原生name属性 | String | 是 | --- | --- |
| icon | 图标 | String | 否 | --- | --- |
| text | 默认显示的文字值 | String | 否 | --- | --- |
| content | 控件内容的配置项 | Objet | 是 | --- | --- |
##### widget.options.items参数内content参数说明(当content.widgettype值为Text时)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | ---------------- | ------- | -------- | ---------- | ------ |
| text | 默认显示的文字值 | String | 否 | --- | --- |
| i81n | 是否国际化 | Boolean | 否 | true/false | --- |

55
docs/audio.md Normal file
View File

@ -0,0 +1,55 @@
# audio
## 用法
```html
<html>
<head>
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
/*
https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
*/
const opts =
{
"widget": {
"id":"audioplayer",
"widgettype":"AudioPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/songs/sample-mp3-file.mp3"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\audio.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| id | 控件的唯一标识 | String | 是 | --- | --- |
| widgettype | 控件类型 | String | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ------------ | ------- | -------- | ---------- | ------ |
| autoplay | 是否可以暂停 | Boolean | 是t | true/false | --- |
| url | 数据来源地址 | String | 是 | --- | --- |

47
docs/blankIcon.md Normal file
View File

@ -0,0 +1,47 @@
# Blankicon
此控件是显示图标控件
# 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "BlankIcon",
"options": {
"url": "/bricks/imgs/edit.png",
"height": "100%",
"width": "100%"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------- | ------ | -------- | ------ | ------ |
| url | 图标来源 | String | 是 | --- | --- |
| height | 高度 | String | 是 | 百分比 | --- |
| width | 宽度 | String | 是 | 百分比 | --- |

16
docs/brick文件目录.md Normal file
View File

@ -0,0 +1,16 @@
| 页面名称 | html文件 | js文件 | 说明文件是否完成 |
| ------------ | -------- | ------ | ---------------- |
| accordion | √ | √ | √ |
| audio | √ | √ | √ |
| aggrid | x | √ | x |
| button | √ | √ | √ |
| datagrid | √ | √ | x(html页面报错) |
| docs | √ | x | √ |
| editabletree | √ | √ | √ |
| error | √ | x | x(无html页面) |
| message | √ | √ | √ |
| tab | √ | √ | √ |
| toolbar | √ | √ | √ |
| tree | √ | √ | √ |
| video | √ | √ | √ |

118
docs/button.md Normal file
View File

@ -0,0 +1,118 @@
# button
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "HBox",
"options": {
"height": "auto",
"width": "100%"
},
"subwidgets": [
{
"widgettype": "Button",
"options": {
"name": "test",
"icon": "/bricks/imgs/submit.png",
"label": "test once",
"tooltip": "This is a joke too",
"nonepack": true,
"orientation": "horizontal"
}
},
{
"widgettype": "Button",
"options": {
"name": "test",
"icon": "/bricks/imgs/reset.png",
"tooltip": "This is a joke",
"label": "test twice",
"nonepack": true,
"orientation": "horizontal"
}
}
],
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "script",
"script": "alert('HBox clicked');"
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 示例
![本地png图片](F:\mh\bricks\docs\images\button.png)
### widget 参数说明
控件实例
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | Hbox | --- |
| options | 控件样式 | Object | 否 | --- | --- |
| subwidgets | 控件 | Array | 否 | --- | --- |
| binds | 控件绑定的事件 | Array | 否 | --- | --- |
#### widget .options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------- | ------ | -------- | --------- | ------ |
| height | 高度 | String | 是 | auto/100% | --- |
| width | 宽度 | String | 是 | auto/100% | --- |
#### widget .subwidgets
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | Button | --- |
| options | 控件详细配置项 | Object | 是 | --- | --- |
##### options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----------- | -------------- | ------- | -------- | ---------- | ---------- |
| name | 控件的属性 | String | 是 | text | --- |
| icon | 图标 | String | 是 | --- | --- |
| label | 默认文本值 | String | 否 | --- | --- |
| tooltip | 提示文本 | String | 否 | --- | --- |
| nonepack | 是否自身有边框 | Boolean | 是 | true/false | --- |
| orientation | 排列方向 | String | 是 | horizontal | horizontal |
#### widget .binds
此项为绑定的事件
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------------ | ------ | -------- | ------ | ------ |
| wid | 事件执行的对象 | String | 是 | self | --- |
| event | 事件执行类型 | String | 是 | click | --- |
| actiontype | 事件执行的程序类型 | String | 是 | --- | --- |
| script | 事件执行的具体方法 | String | 是 | --- | --- |

View File

@ -1,135 +1,135 @@
# widgetBuild # widgetBuild
函数用于创建bricks框架的控件实例。 函数用于创建bricks框架的控件实例。
## 语法 ## 语法
var w = widgetBuild(desc, widget) var w = widgetBuild(desc, widget)
## 参数说明 ## 参数说明
### desc ### desc
desc是一个对象类型数据创建控件参数必须有"widgettype", "options"属性, 可选属性有"subwidegets""binds" desc是一个对象类型数据创建控件参数必须有"widgettype", "options"属性, 可选属性有"subwidegets""binds"
### widget ### widget
widget是一个控件实例用于解析desc中出现的url widget是一个控件实例用于解析desc中出现的url
## 返回值 ## 返回值
* null 出错可能1widgettype类型未注册或不存在2json文件格式不对 * null 出错可能1widgettype类型未注册或不存在2json文件格式不对
* 新创建的控件实体 * 新创建的控件实体
## 例子 ## 例子
tree.json tree.json
``` ```
{ {
"widgettype":"Tree", "widgettype":"Tree",
"options":{ "options":{
"idField":"id", "idField":"id",
"textField":"text", "textField":"text",
"data":[ "data":[
{ {
"id":1, "id":1,
"text":"node1", "text":"node1",
"is_leaf":false, "is_leaf":false,
"children":[ "children":[
{ {
"id":11, "id":11,
"text":"node11", "text":"node11",
"is_leaf":false, "is_leaf":false,
"children":[ "children":[
{ {
"id":112, "id":112,
"text":"node.12", "text":"node.12",
"is_leaf":false, "is_leaf":false,
"children":[ "children":[
{ {
"id":1112, "id":1112,
"text":"node1112", "text":"node1112",
"is_leaf":true "is_leaf":true
}, },
{ {
"id":1113, "id":1113,
"text":"node113", "text":"node113",
"is_leaf":true "is_leaf":true
} }
] ]
}, },
{ {
"id":113, "id":113,
"text":"node113", "text":"node113",
"is_leaf":true "is_leaf":true
} }
] ]
}, },
{ {
"id":12, "id":12,
"text":"node12", "text":"node12",
"is_leaf":true "is_leaf":true
}, },
{ {
"id":13, "id":13,
"text":"node13", "text":"node13",
"is_leaf":true "is_leaf":true
} }
] ]
}, },
{ {
"id":2, "id":2,
"text":"node2", "text":"node2",
"is_leaf":false, "is_leaf":false,
"children":[ "children":[
{ {
"id":21, "id":21,
"text":"node21", "text":"node21",
"is_leaf":true "is_leaf":true
}, },
{ {
"id":22, "id":22,
"text":"node22", "text":"node22",
"is_leaf":true "is_leaf":true
}, },
{ {
"id":23, "id":23,
"text":"node23", "text":"node23",
"is_leaf":true "is_leaf":true
} }
] ]
}, },
{ {
"id":3, "id":3,
"text":"node3", "text":"node3",
"is_leaf":true "is_leaf":true
} }
] ]
} }
} }
``` ```
tree.html tree.html
``` ```
<html> <html>
<head> <head>
<link rel="stylesheet" href="/bricks/css/bricks.css" /> <link rel="stylesheet" href="/bricks/css/bricks.css" />
</head> </head>
<body> <body>
<script src="/bricks/bricks.js"></script> <script src="/bricks/bricks.js"></script>
<script> <script>
const opts = const opts =
{ {
"widget": { "widget": {
"widgettype":"urlwidget", "widgettype":"urlwidget",
"options":{ "options":{
"url":"tree.json" "url":"tree.json"
} }
} }
} }
; ;
const app = new BricksApp(opts); const app = new BricksApp(opts);
app.run(); app.run();
</script> </script>
</body> </body>
</html> </html>
``` ```
这是一个树形控件, 运行[这里](https://github.com/bricks/examples/tree.html) 这是一个树形控件, 运行[这里](https://github.com/bricks/examples/tree.html)
更多的例子请看 更多的例子请看
[bricks控件例子](https://github.com/yumoqing/bricks/examples) [bricks控件例子](https://github.com/yumoqing/bricks/examples)

View File

@ -1,60 +1,60 @@
# BricksApp # BricksApp
BricksApp是Bricks框架的应用类 BricksApp用来初始化Bricks环境创建Bricks页面的根控件 BricksApp是Bricks框架的应用类 BricksApp用来初始化Bricks环境创建Bricks页面的根控件
并将生成的根控件插入的全局控件Body中 并将生成的根控件插入的全局控件Body中
Body对应的dom_element为页面的“body”元素。 Body对应的dom_element为页面的“body”元素。
后续可以通过bricks_app全局变量来引用BricksApp实例。 后续可以通过bricks_app全局变量来引用BricksApp实例。
## 构建选项 ## 构建选项
``` ```
opts = { opts = {
login_url: login_url:
"charsize: "charsize:
"language": "language":
"i18n":{ "i18n":{
"url":'rrr', "url":'rrr',
"default_lang":'en' "default_lang":'en'
}, },
"widget":{ "widget":{
"widgettype":"Text", "widgettype":"Text",
"options":{ "options":{
} }
} }
} }
``` ```
### login_url ### login_url
 登录url按照后台设置当需要访问受控url时会从此URL返回的json数据创建登录窗体用户登录  登录url按照后台设置当需要访问受控url时会从此URL返回的json数据创建登录窗体用户登录
### chartsize ### chartsize
字符大小缺省16px 字符大小缺省16px
### languange ### languange
页面使用的语言,两个字符的语言 页面使用的语言,两个字符的语言
### i18n ### i18n
定义国际化数据获取路径url按照GET方式language作为参数像后台获取改语言的json格式的翻译数据。 定义国际化数据获取路径url按照GET方式language作为参数像后台获取改语言的json格式的翻译数据。
### widget ### widget
根控件描述对象 根控件描述对象
## 属性 ## 属性
### opts ### opts
保存创建选项 保存创建选项
### login_url ### login_url
用于构建登录控件的url 用于构建登录控件的url
### charsize ### charsize
字符大小所有输入控件Text IconTitle都受此影响控件大小。 字符大小所有输入控件Text IconTitle都受此影响控件大小。
### lang ### lang
前端界面语言,选项指定或获取缺省语言 前端界面语言,选项指定或获取缺省语言
### textList ### textList
### i18n ### i18n
### session_id ### session_id
## 方法 ## 方法
## 事件 ## 事件

View File

@ -1,78 +1,78 @@
# 创建控件的Json文件格式说明 # 创建控件的Json文件格式说明
Bricks在服务器端使用Json文件格式存储控件描述文件前端获得json文件后转化为json对象并用词json对象调用widgetBuild函数创建Bricks控件。 Bricks在服务器端使用Json文件格式存储控件描述文件前端获得json文件后转化为json对象并用词json对象调用widgetBuild函数创建Bricks控件。
控件描述json文件必须含有“widgettype” 和”options“两个属性。“subwidgets”属性用来定义此控件包含的子控件。“binds”用于定义此控件或其子控件的事件处理 控件描述json文件必须含有“widgettype” 和”options“两个属性。“subwidgets”属性用来定义此控件包含的子控件。“binds”用于定义此控件或其子控件的事件处理
## widgettype说明 ## widgettype说明
widgettype是一个字符串属性。其值为Bricks中的所有控件类型或"urlwidget" widgettype是一个字符串属性。其值为Bricks中的所有控件类型或"urlwidget"
可用的控件类型可以在[控件类型清单](widgettypes.md)中查找 可用的控件类型可以在[控件类型清单](widgettypes.md)中查找
## options ## options
对象类型每个控件有特定的options属性清参看每个控件的说明 对象类型每个控件有特定的options属性清参看每个控件的说明
## subwidgets ## subwidgets
数组类型数组中的每个元素必须是一个对象类型数据与desc作用一样。 数组类型数组中的每个元素必须是一个对象类型数据与desc作用一样。
参见widgetBuild函数的desc说明 参见widgetBuild函数的desc说明
## binds ## binds
一个数组,在控件上定义一到多个事件绑定,数组中的每一个元素定义一个绑定, 一个数组,在控件上定义一到多个事件绑定,数组中的每一个元素定义一个绑定,
Bricks支持5种数据绑定 Bricks支持5种数据绑定
每种绑定类型都支持下述属性 每种绑定类型都支持下述属性
### wid ### wid
字符串类型或控件类型绑定事件的控件缺省是binds坐在的构造控件。 字符串类型或控件类型绑定事件的控件缺省是binds坐在的构造控件。
### event ### event
字符串类型,事件名称, 绑定针对的事件字符串名称 字符串类型,事件名称, 绑定针对的事件字符串名称
### actiontype ### actiontype
绑定类型支持“urlwidget", "method", "script", "registerfunction", "event" 绑定类型支持“urlwidget", "method", "script", "registerfunction", "event"
### conform ### conform
对象类型确认控件的options如存在则此绑定需要用户确认后再执行 对象类型确认控件的options如存在则此绑定需要用户确认后再执行
### 获取实时数据作为参数 ### 获取实时数据作为参数
绑定任务获取实时数据作为参数,需要给定以下属性: 绑定任务获取实时数据作为参数,需要给定以下属性:
* datawidget字符串或控件类型获取实时数据的控件 * datawidget字符串或控件类型获取实时数据的控件
* datamethod字符串类型控件的方法使用params作为参数调用 * datamethod字符串类型控件的方法使用params作为参数调用
获取实时数据的方法 获取实时数据的方法
* datascript字符串类型 js脚本使用return返回数据 * datascript字符串类型 js脚本使用return返回数据
* dataparams参数 * dataparams参数
datamethod 优先datascript从datawidget控件中通过datamethod datamethod 优先datascript从datawidget控件中通过datamethod
### target ### target
字符串或控件实例目标控件实例如果是字符串使用”getWidgetById“函数获得目标控件实例 字符串或控件实例目标控件实例如果是字符串使用”getWidgetById“函数获得目标控件实例
### urlwidget绑定 ### urlwidget绑定
urlwidget绑定需要一个options属性和一个mode属性在此属性中需要 urlwidget绑定需要一个options属性和一个mode属性在此属性中需要
* url字符串类型 获取desc数据的url * url字符串类型 获取desc数据的url
* mehtod字符串类型url调用的方法缺省”GET“ * mehtod字符串类型url调用的方法缺省”GET“
* params对象类型调用的参数 * params对象类型调用的参数
绑定创建的控件添加到target控件中 绑定创建的控件添加到target控件中
### method ### method
需要指定target参数和method参数 需要指定target参数和method参数
* target类型为字符串或控件类型 * target类型为字符串或控件类型
如果是字符串使用“getWidgetById”函数获取控件实例。 如果是字符串使用“getWidgetById”函数获取控件实例。
* method字符串target实例的方法 * method字符串target实例的方法
* params传递给方法的参数 * params传递给方法的参数
method绑定方法将事件绑定到target控件的一个方法并用params传递参数 method绑定方法将事件绑定到target控件的一个方法并用params传递参数
### script ### script
绑定脚本,此方法将事件绑定到一个脚本,支持以下属性 绑定脚本,此方法将事件绑定到一个脚本,支持以下属性
* script字符串脚本正文 * script字符串脚本正文
* params对象类型脚本可以访问params变量来获取参数。 * params对象类型脚本可以访问params变量来获取参数。
### registerfunction ### registerfunction
事件绑定一个注册函数, 参看[RegisterFunction](registerfunction.md) 事件绑定一个注册函数, 参看[RegisterFunction](registerfunction.md)
支持以下属性: 支持以下属性:
rfname字符串已注册的函数名称 rfname字符串已注册的函数名称
params对象类型调用注册函数时作为参数传递给注册函数。 params对象类型调用注册函数时作为参数传递给注册函数。
### event ### event
绑定事件需指定target触发target对象的一个事件 绑定事件需指定target触发target对象的一个事件
支持以下属性 支持以下属性
dispatch_event需触发的事件名 dispatch_event需触发的事件名
params传递给事件的参数处理函数可以使用evemt.params获得此参数 params传递给事件的参数处理函数可以使用evemt.params获得此参数
作为参数调用target实例的方法 作为参数调用target实例的方法

View File

@ -1,58 +1,58 @@
# bricks # bricks
像搭积木一样的编写前端应用bricks希望提供开发者所需的底层显示控件开发应用时采用简单的组装和插拔方式完成应用的开发 像搭积木一样的编写前端应用bricks希望提供开发者所需的底层显示控件开发应用时采用简单的组装和插拔方式完成应用的开发
使用bricks开发应用的好处 使用bricks开发应用的好处
* 质量和性能可控开发者开发的应用质量和性能依赖bricks提供的提供底层控件。 * 质量和性能可控开发者开发的应用质量和性能依赖bricks提供的提供底层控件。
* 简单的开发方式开发者以编写json数据文件的形式开发前端应用以后可以提供一个可视化开发平台 * 简单的开发方式开发者以编写json数据文件的形式开发前端应用以后可以提供一个可视化开发平台
## Bricks控件描述文件 ## Bricks控件描述文件
Bricks使用json格式描述控件具体格式要求请看[控件描述文件](descjson.md) Bricks使用json格式描述控件具体格式要求请看[控件描述文件](descjson.md)
## BricksApp ## BricksApp
Bricks应用类参见[BricksApp](bricksapp.md) Bricks应用类参见[BricksApp](bricksapp.md)
## bricks主要函数 ## bricks主要函数
### widgetBuild ### widgetBuild
创建控件函数,详细说明请看[这里](bricks.md) 创建控件函数,详细说明请看[这里](bricks.md)
### getWigetById ### getWigetById
从DOM树查找控件详细说明请看[这里](bricks.md) 从DOM树查找控件详细说明请看[这里](bricks.md)
## bricks控件 ## bricks控件
Bricks的所有控件均继承自JsWidget控件间的继承关系请看[控件继承树](inherittree.md) Bricks的所有控件均继承自JsWidget控件间的继承关系请看[控件继承树](inherittree.md)
控件是bricks的基础每个控件实现了特定显示功能或布局能力开发者使用这些控件来构建应用 控件是bricks的基础每个控件实现了特定显示功能或布局能力开发者使用这些控件来构建应用
bricks的开发理念是应用开发可分为底层控件的开发以及操控底层控件来搭建应用。 bricks的开发理念是应用开发可分为底层控件的开发以及操控底层控件来搭建应用。
通过这样分工,让精通底层开发的人员专心开发底层控件,而精通操控控件的人员专心搭建应用,从而提高开发效率和开发质量,希望大家参与进来一起做。 通过这样分工,让精通底层开发的人员专心开发底层控件,而精通操控控件的人员专心搭建应用,从而提高开发效率和开发质量,希望大家参与进来一起做。
关于控件更多的信息,请看[控件](widgettypes.md) 关于控件更多的信息,请看[控件](widgettypes.md)
## 依赖 ## 依赖
如果要使用Markdown需要引用marked模块 如果要使用Markdown需要引用marked模块
如果用到图表, 需要引用echarts 如果用到图表, 需要引用echarts
* [Marked](https://github.com/markedjs/marked) * [Marked](https://github.com/markedjs/marked)
* [echarts](https://echarts.apache.org/zh/index.html) * [echarts](https://echarts.apache.org/zh/index.html)
## build ## build
bricks 使用uglifyjs 压缩 bricks 使用uglifyjs 压缩
在bricks目录下执行 在bricks目录下执行
``` ```
./build.sh ./build.sh
``` ```
命令执行完后在项目的dist目录下会生成bricks.js 和bricks.min.js并将examples和docs目录复制到本机到wwwroot目录 命令执行完后在项目的dist目录下会生成bricks.js 和bricks.min.js并将examples和docs目录复制到本机到wwwroot目录
按照开发者本地web服务器的配置请修改build.sh的目标路径。 按照开发者本地web服务器的配置请修改build.sh的目标路径。
## 引用 ## 引用
``` ```
<link rel="stylesheet" href="/bricks/css/bricks.css" /> <link rel="stylesheet" href="/bricks/css/bricks.css" />
<script src="/bricks/bricks.js"></script> <script src="/bricks/bricks.js"></script>
``` ```
## 例子 ## 例子
配置好本地服务器后可以使用build.sh将bricks项目内容复制到本地网站后台之后在网站的examples目录中查看bricks提供的例子程序 配置好本地服务器后可以使用build.sh将bricks项目内容复制到本地网站后台之后在网站的examples目录中查看bricks提供的例子程序

View File

@ -1,102 +1,102 @@
# Bricks控件继承树 # Bricks控件继承树
``` ```
JsWidget JsWidget
| |
--- AudioPlayer --- AudioPlayer
| |
--- Image --- Image
| | | |
| --- Icon | --- Icon
| |
___ BlankIcon ___ BlankIcon
| |
___ Layout ___ Layout
| | | |
| --- VBox | --- VBox
| | | | | |
| | --- Accordion | | --- Accordion
| | | | | |
| | --- DataGrid | | --- DataGrid
| | | | | |
| | --- Form | | --- Form
| | | | | |
| | --- MarkdownViewer | | --- MarkdownViewer
| | | | | |
| | --- Menu | | --- Menu
| | | | | |
| | --- Message | | --- Message
| | | | | | | |
| | | --- Error | | | --- Error
| | | | | |
| | --- Popup | | --- Popup
| | | | | |
| | --- ScrollPanel | | --- ScrollPanel
| | | | | |
| | --- TreeNode | | --- TreeNode
| | | | | |
| | --- Tree | | --- Tree
| | | | | | | |
| | | --- EditableTree | | | --- EditableTree
| | | | | |
| | --- VideoPlayer | | --- VideoPlayer
| | | |
| --- HBox | --- HBox
| | | | | |
| | --- MiniForm | | --- MiniForm
| | | |
| --- MultipleStateImage | --- MultipleStateImage
| | | |
| --- Toolbar | --- Toolbar
| | | |
| --- TabPanel | --- TabPanel
| | | |
| --- Modal | --- Modal
| | | |
| --- HFiller | --- HFiller
| | | |
| --- VFiller | --- VFiller
| | | |
| --- Button | --- Button
| | | |
| --- UiType | --- UiType
| | | | | |
| | --- UiStr | | --- UiStr
| | | | | | | |
| | | --- UiPassword | | | --- UiPassword
| | | | | | | |
| | | --- UiInt | | | --- UiInt
| | | | | | | | | |
| | | | --- UiFloat | | | | --- UiFloat
| | | | | | | |
| | | --- UiTel | | | --- UiTel
| | | | | | | |
| | | --- UiEmail | | | --- UiEmail
| | | | | | | |
| | | --- UiFile | | | --- UiFile
| | | | | | | |
| | | --- UiDate | | | --- UiDate
| | | | | | | |
| | | --- UiAudio | | | --- UiAudio
| | | | | | | |
| | | --- UiVideo | | | --- UiVideo
| | | | | |
| | --- UiCheck | | --- UiCheck
| | | | | |
| | --- UiCheckBox | | --- UiCheckBox
| | | | | |
| | --- UiText | | --- UiText
| | | | | |
| | --- UiCode | | --- UiCode
| |
--- MdText --- MdText
| |
___ Video ___ Video
| |
--- TextBase --- TextBase
| |
--- Text --- Text
| |
--- Title1, Title2, Title3, Title4, Title5, Title6 --- Title1, Title2, Title3, Title4, Title5, Title6
``` ```

View File

@ -1,25 +1,25 @@
# JsWidget # JsWidget
Bricks框架的最原始的控件所有Bricks的控件均继承自JsWidget或其后代。 Bricks框架的最原始的控件所有Bricks的控件均继承自JsWidget或其后代。
## 构建选项 ## 构建选项
## 属性 ## 属性
### dom_element ### dom_element
dom_element是控件对应的dom元素。 dom_element是控件对应的dom元素。
## 方法 ## 方法
### create() ### create()
创建dom元素的方法并将新创建的元素保存在dom_element属性中JsWidget创建一个”div“的元素 子类通过提供自己的create函数创建自己特定的dom元素。 创建dom元素的方法并将新创建的元素保存在dom_element属性中JsWidget创建一个”div“的元素 子类通过提供自己的create函数创建自己特定的dom元素。
### set_css(css_name, delflg) ### set_css(css_name, delflg)
增加或删除一个css类 当delflg为真时删除一个“css_name”css类否则增加一个“css_name”类 增加或删除一个css类 当delflg为真时删除一个“css_name”css类否则增加一个“css_name”类
### sizable ### sizable
sizable函数让当前类有按照bricks_app.charsize的大小设置自身大小的能力并在charsize变化时改变自身的大小 sizable函数让当前类有按照bricks_app.charsize的大小设置自身大小的能力并在charsize变化时改变自身的大小
### change_fontsizets ### change_fontsizets
change_fontsize函数由bricks_app.textsize_bigger()textsize_smaller函数调用用来改变控件的大小 change_fontsize函数由bricks_app.textsize_bigger()textsize_smaller函数调用用来改变控件的大小
## 事件 ## 事件

View File

@ -1,9 +1,9 @@
# XXX # XXX
## 创建选项 ## 创建选项
## 属性 ## 属性
## 方法 ## 方法
## 事件 ## 事件

View File

@ -1,45 +1,45 @@
# 控件列表 # 控件列表
Bricks内置许多的显示控件所有显示控件都继承自JsWidget容器控件Layout几就继承自JsWidget其他的容器HBox VBox继承自Layout Bricks内置许多的显示控件所有显示控件都继承自JsWidget容器控件Layout几就继承自JsWidget其他的容器HBox VBox继承自Layout
# 控件继承树 # 控件继承树
# 控件清单 # 控件清单
* [JsWidget](jswidget.md) 祖先控件,对应于<div>元素 * [JsWidget](jswidget.md) 祖先控件,对应于<div>元素
* [Accordion](accordion.md):可折叠控件 * [Accordion](accordion.md):可折叠控件
* [AudioPlayer](audioplayer.md):音频播放器 * [AudioPlayer](audioplayer.md):音频播放器
* [Button](button.md):按钮控件 * [Button](button.md):按钮控件
* [DataGrid](datagrid.md):数据表格控件 * [DataGrid](datagrid.md):数据表格控件
* [Form](form.md):输入表单控件 * [Form](form.md):输入表单控件
* [Image](image.md):图片控件 * [Image](image.md):图片控件
* [Icon](icon.md):图标控件 * [Icon](icon.md):图标控件
* [BlankIcon](blackicon.js):空白图标控件 * [BlankIcon](blackicon.js):空白图标控件
* [HBox](hbox.md):横向布局器 * [HBox](hbox.md):横向布局器
* [VBox](vbox.md):纵向布局器 * [VBox](vbox.md):纵向布局器
* [HFiller](hfiller.md):横向填充控件 * [HFiller](hfiller.md):横向填充控件
* [VFiller](vfiller.md):纵向填充控件 * [VFiller](vfiller.md):纵向填充控件
* [MarkdownViewer](markdonwviewer.md)markdown文档显示控件 * [MarkdownViewer](markdonwviewer.md)markdown文档显示控件
* [Menu](menu.md):菜单控件 * [Menu](menu.md):菜单控件
* [Message](message.md):消息控件 * [Message](message.md):消息控件
* [Error](error.md):错误信息控件 * [Error](error.md):错误信息控件
* [PopupForm](popupform.md):弹出表单控件 * [PopupForm](popupform.md):弹出表单控件
* [MiniForm](meniform.md):多选单一输入表单 * [MiniForm](meniform.md):多选单一输入表单
* [Modal](modal.md):独占控件 * [Modal](modal.md):独占控件
* [ModalForm](modalform.md):独占表单 * [ModalForm](modalform.md):独占表单
* [MultipleStateImage](multiplestateimage.md):多状态图像显示控件 * [MultipleStateImage](multiplestateimage.md):多状态图像显示控件
* [ScrollPanel](scrollpanel.md):滚动面板 * [ScrollPanel](scrollpanel.md):滚动面板
* [VScrollPanel](vscrollpanel.md):纵向滚动面板 * [VScrollPanel](vscrollpanel.md):纵向滚动面板
* [HScrollPanel](hscrollpanel.md):横向滚动面板 * [HScrollPanel](hscrollpanel.md):横向滚动面板
* [TabPanel][tabpanel.md):标签面板控件 * [TabPanel][tabpanel.md):标签面板控件
* [Toolbar](toolbar.md):工具条控件 * [Toolbar](toolbar.md):工具条控件
* [Tree](tree.md):树状显示控件 * [Tree](tree.md):树状显示控件
* [EditableTree](editabletree.md):可编辑树状显示控件 * [EditableTree](editabletree.md):可编辑树状显示控件
* [VideoPlayer](videoplayer.md):视频播放器控件 * [VideoPlayer](videoplayer.md):视频播放器控件
* [Text](text.md):正文控件 * [Text](text.md):正文控件
* [Title1](title1.md)标题1控件 * [Title1](title1.md)标题1控件
* [Title2](title2.md)标题2控件 * [Title2](title2.md)标题2控件
* [Title3](title3.md)标题3控件 * [Title3](title3.md)标题3控件
* [Title4](title4.md)标题4控件 * [Title4](title4.md)标题4控件
* [Title5](title5.md)标题5控件 * [Title5](title5.md)标题5控件
* [Title6](title6.md)标题6控件 * [Title6](title6.md)标题6控件
# #

44
docs/docs.md Normal file
View File

@ -0,0 +1,44 @@
# docs
## 用法
```html
<html>
<head>
</head>
<body>
<script src="/marked.js"></script>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"MarkdownViewer",
"options":{
"navigator":true,
"md_url":"../docs/index.md"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | ---------------- | ------- | -------- | ---------- | ------ |
| navigator | 是否可以导航指向 | Boolean | 是 | true/false | --- |
| md_url | 数据来源地址 | String | 是 | --- | --- |

50
docs/editabletree.md Normal file
View File

@ -0,0 +1,50 @@
# editabletree
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"editabletree.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\editabletree.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ---------- | ------ | -------- | --------- | ------ |
| widgettype | 控件类型 | String | 是 | urlwidget | --- |
| options | 控件配置项 | Object | 是 | --- | --- |
### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------- | ------ | -------- | ------ | ------ |
| url | 数据来源 | String | 是 | --- | --- |
**注意:url可以是个json文件**

9
docs/error.md Normal file
View File

@ -0,0 +1,9 @@
# error
# 用法
```html
```

377
docs/form.md Normal file
View File

@ -0,0 +1,377 @@
# form
## 用法
```html
<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>
```
## 效果图
![](F:\mh\bricks\docs\images\form.png)
## 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 | --- |

14
docs/hfiller.md Normal file
View File

@ -0,0 +1,14 @@
# Hfiller
此控件为容器横向排列时,若宽度过宽,自动填充
## option参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------- | -------- | ------ | -------- | ------ | ------ |
| baseURI | 数据路径 | String | 是 | --- | --- |
| tooltip | 提示 | String | 是 | --- | --- |
| css | 样式 | String | 否 | --- | --- |
| csses | 样式 | String | 否 | --- | --- |
此控件为样式排列控件

55
docs/icon.md Normal file
View File

@ -0,0 +1,55 @@
# Icon
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Icon",
"options": {
"url": "/bricks/imgs/edit.png",
"height": "10%",
"width": "10%"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\icon.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ---------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | Icon | -- |
| options | 控件的详细配置项 | Object | 是 | --- | --- |
### options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------- | ------ | -------- | -------- | ------ |
| url | icon来源 | String | 是 | --- | -- |
| height | 高度 | String | 否 | 百分比值 | --- |
| width | 宽度 | String | 否 | 百分比值 | --- |
**注意:options参数的height和width参数不写,那么这两项的默认值是'100%'**

112
docs/image.md Executable file → Normal file
View File

@ -1,57 +1,55 @@
# Image # Image
Image widget show image Image widget show image
## use case # 用法
``` ```html
<html> <html>
<head>
<link rel="stylesheet" href="../css/bricks.css"> <head>
</head> <link rel="stylesheet" href="/bricks/css/bricks.css">
<body> </head>
<script src="../bricks.js"></script>
<body>
<script> <script src="/bricks/bricks.js"></script>
const opts =
{ <script>
"widget": { const opts =
"widgettype":"Image", {
"options":{ "widget": {
"source":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg", "widgettype": "Image",
"height":"100%", "options": {
"width":"100%" "url": "https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
} "height": "100%",
"width": "100%"
} }
}
}
; }
const app = new BricksApp(opts);
app.run(); ;
</script> const app = new BricksApp(opts);
</body> app.run();
</html> </script>
``` </body>
the result is <br>
![image](image.png) </html>
```
## inheritance the result is <br>
Image inherited from JsWidget ![image](F:\mh\bricks\docs\images\image.png)
## options ## inheritance
``` Image inherited from JsWidget
{
"source": ## options
"width": ```
"height": {
} "url":
``` "width":
### source "height":
source is url to the image }
### width ```
optional, default is 100%, specified the image's width | 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
### height | ------ | -------- | ------ | -------- | ---------- | ------ |
optional, default is 100%, specified the image's height | url | 照片路径 | String | 是 | --- | --- |
| width | 宽度 | String | 是 | 百分比数值 | --- |
## method | height | 高度 | String | 是 | 百分比数值 | --- |
none
## event
none

0
docs/image.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 974 KiB

After

Width:  |  Height:  |  Size: 974 KiB

BIN
docs/images/accordion.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
docs/images/audio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
docs/images/button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/images/docs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/images/form.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
docs/images/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
docs/images/image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 974 KiB

BIN
docs/images/input.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
docs/images/message.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/images/miniform.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
docs/images/modal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
docs/images/tab.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
docs/images/text.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/images/title.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/images/toolbar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
docs/images/tree.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/images/video.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@ -1 +0,0 @@
README.md

1
docs/index.md Normal file
View File

@ -0,0 +1 @@
README.md

79
docs/input.md Normal file
View File

@ -0,0 +1,79 @@
# input
# 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "UiStr",
"options":
{
"name": "email",
"label": "Email",
'required': true
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\input.png)
## options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | -------------- | ------ | -------- | ------ | ------ |
| name | 控件的原生属性 | String | 是 | --- | --- |
| label | 文本标签 | String | 是 | --- | --- |
| required | 是否必填 | String | 是 | --- | --- |
**注意:input内容不一样,widgettype的值也不一样.**
1.字符串:UiStr;
2.手机号:UiTel;
3.时间日期:UiDate;
4.整数:UiInt;
5.浮点数:UiFloat;
6.多选:UiCheckBox;
7.单选:UiCheck;
8.邮箱:UiEmail;
9.上传文件:UiFile;
10.下拉选择:Code;
11.文本框:UiText;
12.密码框:UiPassword;
13.音频:UiAudio;
14.视频:UiVideo;

32
docs/layout.md Executable file → Normal file
View File

@ -1,16 +1,16 @@
# Layout # Layout
Layout is a layout widget for layout widgets inside it Layout is a layout widget for layout widgets inside it
## use case ## use case
none none
## inheritance ## inheritance
Layout inherited from JsWidget Layout inherited from JsWidget
## options ## options
## method ## method
### add_widget ### add_widget
add_widget(w) append a widget name by w, to the caller add_widget(w) append a widget name by w, to the caller
### remove_widget ### remove_widget
remove_widget(w) remove widget named by w from caller's children remove_widget(w) remove widget named by w from caller's children
### clear_widgets ### clear_widgets
clear_widgets() remove all children widget. clear_widgets() remove all children widget.
## event ## event
none none

71
docs/markdownviewer.md Executable file → Normal file
View File

@ -1,13 +1,58 @@
# MarkdownView # MarkdownView
## Options attributes **此控件可以完成一个指向md文件的操作**
MarkdownViewer has following attributes:
### md_url # 用法
md_url is a url address in which it is a markdown text file.
```html
## Description <html>
MarkdownViewer parses and show the markdown content child dom element. and ifound and modify element with tag name "a" to change href to '#' and add onclick action to get and show the markdown content inside this MarkdownViewer dom elementame "a" in markdown content.
<head>
## Event </head>
none
<body>
<div>
<script src="/marked.min.js"></script>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "MarkdownViewer",
"options": {
"md_url": "test1.md"
}
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# options
## md_url
此属性是指向要打开的md文件,是md文件的路径

143
docs/message.md Normal file
View File

@ -0,0 +1,143 @@
# Message
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Tree",
"options": {
"idField": "id",
"textField": "text",
"data": [
{
"id": 1,
"text": "node1",
"is_leaf": false,
"children": [
{
"id": 11,
"text": "node11",
"is_leaf": false,
"children": [
{
"id": 112,
"text": "node.12",
"is_leaf": false,
"children": [
{
"id": 1112,
"text": "node1112",
"is_leaf": true
},
{
"id": 1113,
"text": "node113",
"is_leaf": true
}
]
},
{
"id": 113,
"text": "node113",
"is_leaf": true
}
]
},
{
"id": 12,
"text": "node12",
"is_leaf": true
},
{
"id": 13,
"text": "node13",
"is_leaf": true
}
]
},
{
"id": 2,
"text": "node2",
"is_leaf": false,
"children": [
{
"id": 21,
"text": "node21",
"is_leaf": true
},
{
"id": 22,
"text": "node22",
"is_leaf": true
},
{
"id": 23,
"text": "node23",
"is_leaf": true
}
]
},
{
"id": 3,
"text": "node3",
"is_leaf": true
}
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
var m = new Message({
"title": "TEst Message",
"message": "This is a test message",
"auto_open": true,
"timeout": 3
})
</script>
</body>
</html>
```
## 示例
![](F:\mh\bricks\docs\images\message.png)
## 参数说明
### widget.type
控件的类型.(控件有多种类型,如:Form,Image...等等)
### widget.options参数说明
| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | -------------------- | ------- | -------- | ---------- | ------ |
| idField | 当前节点的唯一标识 | String | 是 | --- | --- |
| textField | 当前节点的label | String | 是 | --- | --- |
| is_leaf | 是否可以展开 | Boolean | 否 | true/false | --- |
| data | 文件夹具体信息的集合 | Array | 否 | --- | --- |
#### options.data参数说明
options.data参数的key必须和widget.options参数的value一致,比如widget.options.idField="id",那么options.data参数的key就是"options.data.id" .另外多了一个children参数,是对象形式,参数与options.data的参数保持一致.
注意:**如果想下写一级目录,就添加children参数对象**
## 事件
none

135
docs/miniform.md Normal file
View File

@ -0,0 +1,135 @@
# MiniForm
## 用法
### 写法一:
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "urlwidget",
"options": {
"url": "miniform.json"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
miniform.json:
```json
{
"widgettype":"MiniForm",
"options":{
"label_width":"100px",
"fields":[
{
"name":"test1",
"label":"姓名",
"uitype":"str"
},
{
"name":"test2",
"label":"性别",
"uitype":"str"
},
{
"name":"test3",
"label":"地址",
"uitype":"str"
}
]
}
}
```
### 写法二:
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "MiniForm",
"options": {
"label_width": "100px",
"fields": [
{
"name": "test1",
"label": "姓名",
"uitype": "str"
},
{
"name": "test2",
"label": "性别",
"uitype": "str"
},
{
"name": "test3",
"label": "地址",
"uitype": "str"
}
]
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\miniform.png)
## options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----------- | ------------------ | ------ | -------- | ------ | ------ |
| label_width | 控件标签的宽度 | String | 是 | --- | --- |
| fields | 控件子项的详细信息 | Array | 是 | --- | --- |
#### options.fields参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------------- | ------ | -------- | ----------- | ------ |
| name | 控件的原生属性 | String | 是 | --- | --- |
| label | 文本标签 | String | 否 | --- | --- |
| uitype | 控件类型 | String | 否 | str(字符串) | --- |

78
docs/modal.md Normal file
View File

@ -0,0 +1,78 @@
# modal
# 用法
```html
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Modal",
"options": {
"auto_close": true,
"auto_open": true,
"width": "700px",
"height": "400px",
"archor": "cl"
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "This is a test"
}
}
]
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\modal.png)
# options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------------------------ | ------- | -------- | ---------- | ------ |
| auto_close | 点击弹窗以外的区域是否关闭弹窗 | Boolean | 是 | true/false | --- |
| auto_close | 是否默认打开弹窗 | Boolean | 是 | true/false | --- |
| width | 宽度 | String | 是 | 百分比 | --- |
| height | 高度 | String | 是 | 百分比 | --- |
| archor | 控件的位置 | String | 是 | --- | --- |
| org_index | 控件图层层级 | String | 是 | --- | --- |
**注意:archor的值所代表的位置**
* tl:在屏幕的左上角
* tc:在屏幕顶部的中间
* tr:在屏幕的右上角
* cl:在屏幕中间部分的左侧
* cc:在屏幕的中心位置
* cr:在屏幕中间部分的右侧
* bl:在屏幕的左下角
* bc:在屏幕底部的中间
* br:在屏幕的右下角

14
docs/pw.md Executable file → Normal file
View File

@ -1,7 +1,7 @@
# Widget Name # Widget Name
description of the Widget description of the Widget
## use case ## use case
## inheritance ## inheritance
## options ## options
## method ## method
## event ## event

113
docs/tab.md Normal file
View File

@ -0,0 +1,113 @@
# tab
此函数用于创建tab组件
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "TabPanel",
"options": {
"tab_wide": "auto",
"height": "100%",
"tab_long": "70%",
"tab_pos": "top",
"items": [
{
"name": "c",
"label": "C",
"content": {
"widgettype": "Text",
"options": {
"text": "This is a C language documents"
}
},
"icon": null
},
{
"name": "javascript",
"removable": true,
"label": "JavaScript",
"content": {
"widgettype": "Text",
"options": {
"text": "This is JavaScript language documents"
}
},
"icon": null
},
{
"name": "php",
"label": "PHP",
"content": {
"widgettype": "Text",
"options": {
"text": "This is PHP language documents"
}
},
"icon": null
},
{
"name": "python",
"label": "Python",
"content": {
"widgettype": "Text",
"options": {
"text": "This is Python language documents"
}
},
"icon": null
},
]
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 示例
![本地png图片](F:\mh\bricks\docs\images\tab.png)
## widget.options参数说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ---- | ------ | --------------------- | ------ |
| tab_wide | 尺寸 | string | auto | auto |
| height | 高 | string | ---- | ---- |
| tab_long | 宽 | string | ---- | ---- |
| tab_pos | 位置 | string | top/bottom/left/right | ----- |
### options.items参数说明
一个items为一个tab项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------------------------------------- | ------- | ------ | ------ |
| name | 与选项卡绑定值 value 对应的标识符,表示选项卡别名 | string | ---- | ---- |
| label | 选项卡标题 | string | ---- | ---- |
| removable | 是否移除选项卡 | boolean | ---- | false |
| content | 选项卡的内容 | | | |
## 事件
none

160
docs/text.md Executable file → Normal file
View File

@ -1,7 +1,153 @@
# Text # Text
Text is a widget to show text
## use case Text is a widget to show text
## inheritance ## 用法
## options
## method ```html
## event
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title2",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title3",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title4",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title5",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title6",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Text",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"HBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":1.4
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_bigger()"
}
]
},
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":0.7,
"item_size":"20px"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_smaller()"
}
]
}
]
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\text.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | --- | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
| subwidgets | 控件子项的配置 | Object | 否 | --- | --- |
### widget.subwidgets参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------ | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | --- | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
#### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | ------------ | ------- | -------- | ---------- | ------ |
| text | 默认显示的值 | String | 否 | --- | --- |
| i18n | 是否国际化 | Boolean | 否 | true/false | --- |

92
docs/title1.md Normal file
View File

@ -0,0 +1,92 @@
# title1
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title2.md Normal file
View File

@ -0,0 +1,92 @@
# title2
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title3.md Normal file
View File

@ -0,0 +1,92 @@
# title3
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title4.md Normal file
View File

@ -0,0 +1,92 @@
# title4
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title5.md Normal file
View File

@ -0,0 +1,92 @@
# title5
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title6.md Normal file
View File

@ -0,0 +1,92 @@
# title6
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

210
docs/toolbar.md Executable file → Normal file
View File

@ -1,105 +1,105 @@
# Toolbar # Toolbar
The Toolbar widget provides a toolbar componets which provide a tool bar interface service, and you can add, delete tool at runtime dynamicly. The Toolbar widget provides a toolbar componets which provide a tool bar interface service, and you can add, delete tool at runtime dynamicly.
## use case ## use case
``` ```
<html> <html>
<head> <head>
<link rel="stylesheet" href="../css/bricks.css"> <link rel="stylesheet" href="../css/bricks.css">
</head> </head>
<body> <body>
<script src="../bricks.js"></script> <script src="../bricks.js"></script>
<script> <script>
const opts = const opts =
{ {
"widget": { "widget": {
"widgettype":"Toolbar", "widgettype":"Toolbar",
"options":{ "options":{
"target":null, "target":null,
"orientation":"vertical", "orientation":"vertical",
"tools":[ "tools":[
{ {
"name":"c", "name":"c",
"Label":"C", "Label":"C",
"icon":null "icon":null
}, },
{ {
"name":"javascript", "name":"javascript",
"Label":"JavaScript", "Label":"JavaScript",
"icon":null "icon":null
}, },
{ {
"name":"php", "name":"php",
"Label":"PHP", "Label":"PHP",
"icon":null "icon":null
}, },
{ {
"name":"python", "name":"python",
"Label":"Python", "Label":"Python",
"icon":null "icon":null
}, },
] ]
} }
} }
} }
; ;
const app = new BricksApp(opts); const app = new BricksApp(opts);
app.run(); app.run();
</script> </script>
</body> </body>
</html> </html>
``` ```
and the result like this:<br> and the result like this:<br>
![toolbar screenshot](toolbar.png) ![toolbar screenshot](toolbar.png)
## inheritance ## inheritance
Toolbar inherited from BoxLayout Toolbar inherited from BoxLayout
## options ## options
``` ```
{ {
orientation: orientation:
tools: tools:
} }
``` ```
### orientation ### orientation
should be 'vertical' means tool widgets will arrange in vertical or 'horizontal' means tool widgets will arrange in horizontal should be 'vertical' means tool widgets will arrange in vertical or 'horizontal' means tool widgets will arrange in horizontal
### tools: ### tools:
a array contains a list of tool objects a array contains a list of tool objects
### tool object ### tool object
tool object has following properties: tool object has following properties:
``` ```
{ {
icon: icon:
name: name:
label: label:
removable: removable:
} }
``` ```
#### icon is a image url, it is optional, if present, the tool will show a icon before the tool's text #### icon is a image url, it is optional, if present, the tool will show a icon before the tool's text
#### name #### name
name is a itendify field for the tools, it should be unique in this tools of this options scope. name is a itendify field for the tools, it should be unique in this tools of this options scope.
#### label #### label
label will translate by i18n for the language user used, and the result will be show. if label is miss, use the name of the tool object. label will translate by i18n for the language user used, and the result will be show. if label is miss, use the name of the tool object.
#### removable #### removable
if removable is true, the tool widget will append a delete image widget, and will remove the tool widget if user click the delete image widget. if removable is true, the tool widget will append a delete image widget, and will remove the tool widget if user click the delete image widget.
## method ## method
### createTool ### createTool
createTool(toolOptions) createTool(toolOptions)
createTool create a tool widget and append the to end of the toolbar. createTool create a tool widget and append the to end of the toolbar.
## event ## event
toolbar has some events other widgets can bind to, they are: toolbar has some events other widgets can bind to, they are:
### ready ### ready
after constructor call finished, and all the tools built, toolbar will fire this event after constructor call finished, and all the tools built, toolbar will fire this event
### command ### command
after user click on one of the tool widgets, toolbar will fire this event with the tool's options used to construct it as the parameters, can get the parameters using "event.params" after user click on one of the tool widgets, toolbar will fire this event with the tool's options used to construct it as the parameters, can get the parameters using "event.params"
. .
### remove ### remove
after user click delete image widget, toolbar delete the tool widget from toolbar, and fire this event. after user click delete image widget, toolbar delete the tool widget from toolbar, and fire this event.

0
docs/toolbar.png Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

88
docs/toolbarNew.md Normal file
View File

@ -0,0 +1,88 @@
# Toolbar
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Toolbar",
"options": {
"target": null,
"orientation": "horizontal",
"tool_margin": "15px",
"tools": [
{
"name": "c",
"Label": "C",
"icon": null
},
{
"name": "javascript",
"Label": "JavaScript",
"icon": null
},
{
"name": "php",
"Label": "PHP",
"icon": null
},
{
"name": "python",
"Label": "Python",
"icon": null
},
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\toolbar.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------ | ------ | -------- | ------- | ------ |
| widgettype | 控件类型 | String | 是 | Toolbar | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----------- | ------------------ | ------ | -------- | ------------------- | ------ |
| target | 参数返回值 | String | 否 | --- | --- |
| orientation | 控件的方向 | Object | 是 | horizontal/vertical | --- |
| tool_margin | 控件子项间的距离 | String | 否 | --- | --- |
| tools | 控件子项的具体信息 | Array | 否 | --- | --- |
#### tools参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----- | -------- | ------ | -------- | ------- | ------ |
| name | 原生属性 | String | 是 | Toolbar | --- |
| Label | 标签文本 | String | 是 | --- | --- |
| icon | 图标 | String | 是 | --- | --- |
**icon可以指向一个相对路径或者绝对路径的图标,若引入图标,则会显示在tools的前面.若没有label属性,则显示的文本是name属性的值**

52
docs/tree.md Normal file
View File

@ -0,0 +1,52 @@
# Tree
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "urlwidget",
"options": {
"url": "tree.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\tree.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ---------- | ------ | -------- | --------- | ------ |
| widgettype | 控件类型 | String | 是 | urlwidget | --- |
| options | 控件配置项 | Object | 是 | --- | --- |
**options为树形结构的数据来源**
### options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | ------------ | ------ | -------- | ------ | ------ |
| url | 控件数据来源 | String | 是 | --- | --- |

22
docs/vbox.md Executable file → Normal file
View File

@ -1,11 +1,11 @@
# VBox # VBox
Vbox is a vertical layout widget, it layout subwidgeta in vertical direction Vbox is a vertical layout widget, it layout subwidgeta in vertical direction
## use case ## use case
## inheritance ## inheritance
VBox inherited fromm BoxLayout VBox inherited fromm BoxLayout
## options ## options
## method ## method
none none
## event ## event
none none

14
docs/vfiller.md Normal file
View File

@ -0,0 +1,14 @@
# Vfiller
此控件为容器纵向排列时,若宽度过宽,自动填充
## option参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------- | -------- | ------ | -------- | ------ | ------ |
| baseURI | 数据路径 | String | 是 | --- | --- |
| tooltip | 提示 | String | 是 | --- | --- |
| css | 样式 | String | 否 | --- | --- |
| csses | 样式 | String | 否 | --- | --- |
此控件为样式排列控件

52
docs/video.md Normal file
View File

@ -0,0 +1,52 @@
# video
## 用法
```html
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"id":"videoplayer",
"widgettype":"VideoPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/video/sample-mp4-file.mp4",
"type":"mp4"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\video.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ----------- | ------ |
| id | 控件的唯一标识 | String | 是 | --- | --- |
| widgettype | 控件的类型 | String | 是 | VideoPlayer | --- |
| options | 详细配置项 | Object | 是 | --- | --- |
### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ---------------- | ------- | -------- | ---------- | ------ |
| autoplay | 视频是否可以暂停 | Boolean | 是 | true/false | --- |
| url | 视频来源地址 | String | 是 | --- | --- |
| type | 视频类型 | String | 是 | mp4 | --- |

174
docs/videoplayer.md Executable file → Normal file
View File

@ -1,87 +1,87 @@
# VideoPlayer # VideoPlayer
## Usage ## Usage
### play a mp4 file ### play a mp4 file
``` ```
<html> <html>
<head> <head>
</head> </head>
<body> <body>
<script src="../bricks.js"></script> <script src="../bricks.js"></script>
<script> <script>
const opts = const opts =
{ {
"widget": { "widget": {
"id":"videoplayer", "id":"videoplayer",
"widgettype":"VideoPlayer", "widgettype":"VideoPlayer",
"options":{ "options":{
"autoplay":true, "autoplay":true,
"url":"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", "url":"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
"type":"mp4" "type":"mp4"
} }
} }
} }
; ;
const app = new BricksApp(opts); const app = new BricksApp(opts);
app.run(); app.run();
</script> </script>
</body> </body>
</html> </html>
``` ```
### play a m3u8 stream ### play a m3u8 stream
``` ```
<html> <html>
<head> <head>
</head> </head>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script> <script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
<script src="../bricks.js"></script> <script src="../bricks.js"></script>
<script> <script>
/* /*
https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8 https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8 https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
*/ */
const opts = const opts =
{ {
"widget": { "widget": {
"id":"videoplayer", "id":"videoplayer",
"widgettype":"VideoPlayer", "widgettype":"VideoPlayer",
"options":{ "options":{
"autoplay":true, "autoplay":true,
"source":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8", "source":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
"srctype":"hls" "srctype":"hls"
} }
} }
} }
; ;
const app = new BricksApp(opts); const app = new BricksApp(opts);
app.run(); app.run();
</script> </script>
</body> </body>
</html> </html>
``` ```
you will see ti like this you will see ti like this
![example video](m3u8.png "see it?") ![example video](m3u8.png "see it?")
## options ## options
to be a VideoPlayer instance, you need to provide a options with contains to be a VideoPlayer instance, you need to provide a options with contains
following attributes following attributes
### source ### source
the url of a video resouce, VideoPlayer can play mp4, m3u8 video the url of a video resouce, VideoPlayer can play mp4, m3u8 video
### srctype ### srctype
specify the source type, should be 'mp4' or 'hls' for m3u8 'dash' for play a Dash manifest specify the source type, should be 'mp4' or 'hls' for m3u8 'dash' for play a Dash manifest
## play avi file ## play avi file
!v[sample video](http://kimird.com/video/sample-avi-file.avi) !v[sample video](http://kimird.com/video/sample-avi-file.avi)
## play flv file ## play flv file
!v[sample video](http://kimird.com/video/sample-flv-file.flv) !v[sample video](http://kimird.com/video/sample-flv-file.flv)
## play mkv file ## play mkv file
!v[sample video](http://kimird.com/video/sample-mkv-file.mkv) !v[sample video](http://kimird.com/video/sample-mkv-file.mkv)
## play mov file ## play mov file
!v[sample video](http://kimird.com/video/sample-mov-file.mov) !v[sample video](http://kimird.com/video/sample-mov-file.mov)
## play mp4 file ## play mp4 file
!v[sample video](http://kimird.com/video/sample-mp4-file.mp4) !v[sample video](http://kimird.com/video/sample-mp4-file.mp4)
## play webm file ## play webm file
!v[sample video](http://kimird.com/video/sample-webm-file.webm) !v[sample video](http://kimird.com/video/sample-webm-file.webm)
## play m3u8 file ## play m3u8 file
!v[abc news TV](https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8) !v[abc news TV](https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8)

View File

@ -1,49 +1,52 @@
# Bricks widgets # Bricks widgets
## Accordion ## Accordion (完成)
## AudioPlayer ## AudioPlayer (完成)
## BlankIcon ## BlankIcon (完成)
## BoxLayout ## BoxLayout
[boxlayout](BoxLayout.md) [boxlayout](BoxLayout.md)
## Button
## DataGrid ## Button (完成)
## EditableTree ## DataGrid (完成)
## Error ## EditableTree (完成)
## Form ## Error
## HBox ## Form (完成)
[hbox](HBox.md) ## HBox (完成)
[hbox](HBox.md)
## HFiller
## HScrollPanel ## HFiller (完成)
## Icon ## HScrollPanel
## Image ## Icon (完成)
[image](image.md) ## Image (完成)
## MarkdownViewer [image](image.md)
(markdown viewer](markdownviewer.md)
## Menu ## MarkdownViewer (完成)
## Message (markdown viewer](markdownviewer.md)
## MiniForm ## Menu
## Modal ## Message (完成)
## ModalForm ## MiniForm (完成)
## MultipleStateImage ## Modal (完成)
## PopupForm ## ModalForm
## TabForm ## MultipleStateImage
## TabPanel ## PopupForm
## Text ## TabForm
[text](text.md) ## TabPanel (完成)
## Title1 ## Text (完成)
## Title2 [text](text.md)
## Title3 ## Title1 (完成)
## Title4 ## Title2 (完成)
## Title5 ## Title3 (完成)
## Title6 ## Title4 (完成)
## Toolbar ## Title5 (完成)
[Toolbar](toolbar.md) ## Title6 (完成)
## Tree ## Toolbar (完成)
## VBox [Toolbar](toolbar.md)
[VBox](vbox.md) ## Tree (完成)
## VFiller ## VBox (完成)
## VScrollPanel [VBox](vbox.md)
## Video
## VideoPlayer ## VFiller (完成)
[VideoPlayer](videoplayer.md) ## VScrollPanel
## XTerminal ## Video (完成)
## VideoPlayer (与video一样)
[VideoPlayer](videoplayer.md)
## XTerminal(没有js文件)

4
xterm/dev.xterm Normal file
View File

@ -0,0 +1,4 @@
{
"host":"dev.kaiyuancloud.cn",
"username":"ymq"
}

6
xterm/glib.cc.ui Normal file
View File

@ -0,0 +1,6 @@
{
"widgettype":"Wterm",
"options":{
"ws_url":"{{websocket_url('./glib.cc.xterm')}}"
}
}

5
xterm/glib.cc.xterm Normal file
View File

@ -0,0 +1,5 @@
{
"host":"glib.cc",
"username":"ceni",
"port":10022
}

View File

@ -13,9 +13,9 @@ https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js
const opts = const opts =
{ {
"widget": { "widget": {
"widgettype":"Wterm", "widgettype":"urlwidget",
"options":{ "options":{
"ws_url":"ws://localhost/test/dev.xterm" "url":"{{entire_url('wterm.ui')}}"
} }
} }
} }

6
xterm/kymoz.com.ui Normal file
View File

@ -0,0 +1,6 @@
{
"widgettype":"Wterm",
"options":{
"ws_url":"{{websocket_url('./kymoz.com.xterm')}}"
}
}

4
xterm/kymoz.com.xterm Normal file
View File

@ -0,0 +1,4 @@
{
"host":"kymoz.com",
"username":"ymq"
}

88
xterm/wterm.ui Normal file
View File

@ -0,0 +1,88 @@
{
"widgettype":"TabPanel",
"options":{
"tab_wide":"auto",
"height":"100%",
"tab_long":"70%",
"tab_pos":"top",
"items":[
{
"name":"kymoz.com",
"label":"kymoz.com",
"icon":null,
"content":{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"open terminal to kymoz.com"
}
},
{
"widgettype":"Button",
"options":{
"text":"Open"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"urlwidget",
"options":{
"url":"{{
}
]
}
},
{
"name":"glib.cc",
"removable":true,
"label":"glib.cc",
"icon":null,
"content":{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"open terminal to glib.cc"
}
},
{
"widgettype":"Button",
"options":{
"text":"Open"
}
}
]
}
},
{
"name":"www.kaiyuancloud.cn",
"label":"www.kaiyuancloud.cn",
"icon":null,
"content":{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"open terminal to www.kaiyuancloud.cn"
}
},
{
"widgettype":"Button",
"options":{
"otext":"Open"
}
}
]
}
}
]
}
}