bugfix
This commit is contained in:
yumoqing
parent
77994be32a
commit
86f6872006
BIN
docs/.DS_Store
vendored
BIN
docs/.DS_Store
vendored
Binary file not shown.
42
docs/BoxLayout.md
Executable file → Normal file
42
docs/BoxLayout.md
Executable file → Normal file
@ -1,21 +1,21 @@
|
||||
# BoxLayout
|
||||
Boxlayout is a one direction layout, it layout subwidgets on vertical direction or horizontal direction.
|
||||
|
||||
## use case
|
||||
none
|
||||
## inheritance
|
||||
BoxLayout inherited from Layout
|
||||
## options
|
||||
```
|
||||
{
|
||||
orientation:
|
||||
}
|
||||
```
|
||||
### orientation
|
||||
orientation get value of 'vertical' or 'horizontal', means layout child widget in veritcal or horizontal direction
|
||||
|
||||
###
|
||||
## method
|
||||
none
|
||||
## event
|
||||
none
|
||||
# BoxLayout
|
||||
Boxlayout is a one direction layout, it layout subwidgets on vertical direction or horizontal direction.
|
||||
|
||||
## use case
|
||||
none
|
||||
## inheritance
|
||||
BoxLayout inherited from Layout
|
||||
## options
|
||||
```
|
||||
{
|
||||
orientation:
|
||||
}
|
||||
```
|
||||
### orientation
|
||||
orientation get value of 'vertical' or 'horizontal', means layout child widget in veritcal or horizontal direction
|
||||
|
||||
###
|
||||
## method
|
||||
none
|
||||
## event
|
||||
none
|
||||
|
||||
47
docs/HBox.md
Executable file → Normal file
47
docs/HBox.md
Executable file → Normal file
@ -1,11 +1,36 @@
|
||||
# HBox
|
||||
Hbox is a horizontal layout widget, it layout subwidgeta in horizontal direction
|
||||
## use case
|
||||
## inheritance
|
||||
HBox inherited fromm BoxLayout
|
||||
## options
|
||||
|
||||
## method
|
||||
none
|
||||
## event
|
||||
none
|
||||
# HBox
|
||||
Hbox是一个水平布局小部件，它按水平方向布局子小部件
|
||||
## 用法
|
||||
```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":
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
const app = new BricksApp(opts);
|
||||
app.run();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
**注意:hbox控件是水平排列的控件,相当于一个容器,可以容纳其他的控件,如button,form等**
|
||||
|
||||
|
||||
82
docs/README.md
Executable file → Normal file
82
docs/README.md
Executable file → Normal file
@ -1,41 +1,41 @@
|
||||
# Bricks documentation
|
||||
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.
|
||||
|
||||
## Installation
|
||||
## Use Case
|
||||
## Widget List
|
||||
[Widgets](widgets.md)
|
||||
|
||||
## UI Components
|
||||
### Layout
|
||||
Layout is the base Layout, please click [Layout](layout.md) for more detail.
|
||||
|
||||
### BoxLayout
|
||||
BoxLayout is a one direction layout, for more information, please click [BoxLayout](boxlayout.md)
|
||||
|
||||
|
||||
### HBox
|
||||
HBox is a layout to layout subwidgets in horizontal direction, please click [HBox](hbox.md) for more information.
|
||||
### VBox
|
||||
VBox is a layout to layout its subwidgets in vertical direction, please click [VBox](vbox.md) for more information.
|
||||
### Text
|
||||
### Title1
|
||||
### Title2
|
||||
### Title3
|
||||
### Title4
|
||||
### Title5
|
||||
### Title6
|
||||
### Image
|
||||
Image show image on you dom tree, please click [image](image.md) for more information about Image widget
|
||||
|
||||
### MarkdownViewer
|
||||
a markdown document viewer widget, for more information, please see [markdownviewer](markdownviewer.md)
|
||||
|
||||
### VideoPlayer
|
||||
a video player widget base on [indigo-player](https://github.com/matvp91/indigo-player), please look at [videoplayer](videoplayer.md) for more information.
|
||||
|
||||
### Modal
|
||||
### Toolbar
|
||||
toolbar component provide user a toobar service, for more information pleaseclick [toolbar](toolbar.md)
|
||||
|
||||
# Bricks documentation
|
||||
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.
|
||||
|
||||
## Installation
|
||||
## Use Case
|
||||
## Widget List
|
||||
[Widgets](widgets.md)
|
||||
|
||||
## UI Components
|
||||
### Layout
|
||||
Layout is the base Layout, please click [Layout](layout.md) for more detail.
|
||||
|
||||
### BoxLayout
|
||||
BoxLayout is a one direction layout, for more information, please click [BoxLayout](boxlayout.md)
|
||||
|
||||
|
||||
### HBox
|
||||
HBox is a layout to layout subwidgets in horizontal direction, please click [HBox](hbox.md) for more information.
|
||||
### VBox
|
||||
VBox is a layout to layout its subwidgets in vertical direction, please click [VBox](vbox.md) for more information.
|
||||
### Text
|
||||
### Title1
|
||||
### Title2
|
||||
### Title3
|
||||
### Title4
|
||||
### Title5
|
||||
### Title6
|
||||
### Image
|
||||
Image show image on you dom tree, please click [image](image.md) for more information about Image widget
|
||||
|
||||
### MarkdownViewer
|
||||
a markdown document viewer widget, for more information, please see [markdownviewer](markdownviewer.md)
|
||||
|
||||
### VideoPlayer
|
||||
a video player widget base on [indigo-player](https://github.com/matvp91/indigo-player), please look at [videoplayer](videoplayer.md) for more information.
|
||||
|
||||
### Modal
|
||||
### Toolbar
|
||||
toolbar component provide user a toobar service, for more information pleaseclick [toolbar](toolbar.md)
|
||||
|
||||
|
||||
94
docs/accordion.md
Normal file
94
docs/accordion.md
Normal 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>
|
||||
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## 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
55
docs/audio.md
Normal 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>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## widget参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---------- | -------------- | ------ | -------- | ------ | ------ |
|
||||
| id | 控件的唯一标识 | String | 是 | --- | --- |
|
||||
| widgettype | 控件类型 | String | 是 | --- | --- |
|
||||
|
||||
### widget.options参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| -------- | ------------ | ------- | -------- | ---------- | ------ |
|
||||
| autoplay | 是否可以暂停 | Boolean | 是t | true/false | --- |
|
||||
| url | 数据来源地址 | String | 是 | --- | --- |
|
||||
47
docs/blankIcon.md
Normal file
47
docs/blankIcon.md
Normal 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
16
docs/brick文件目录.md
Normal 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
118
docs/button.md
Normal 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>
|
||||
```
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
|
||||
### 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 | 是 | --- | --- |
|
||||
|
||||
@ -1,135 +1,135 @@
|
||||
# widgetBuild
|
||||
函数用于创建bricks框架的控件实例。
|
||||
|
||||
## 语法
|
||||
var w = widgetBuild(desc, widget)
|
||||
|
||||
## 参数说明
|
||||
### desc
|
||||
desc是一个对象类型数据，创建控件参数，必须有"widgettype", "options"属性, 可选属性有"subwidegets"，"binds"
|
||||
|
||||
### widget
|
||||
widget是一个控件实例，用于解析desc中出现的url
|
||||
|
||||
## 返回值
|
||||
* null 出错，可能1）widgettype类型未注册或不存在；2）json文件格式不对
|
||||
* 新创建的控件实体
|
||||
|
||||
## 例子
|
||||
tree.json
|
||||
```
|
||||
{
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
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>
|
||||
|
||||
```
|
||||
这是一个树形控件， 运行[这里](https://github.com/bricks/examples/tree.html)
|
||||
更多的例子请看
|
||||
[bricks控件例子](https://github.com/yumoqing/bricks/examples)
|
||||
|
||||
|
||||
# widgetBuild
|
||||
函数用于创建bricks框架的控件实例。
|
||||
|
||||
## 语法
|
||||
var w = widgetBuild(desc, widget)
|
||||
|
||||
## 参数说明
|
||||
### desc
|
||||
desc是一个对象类型数据，创建控件参数，必须有"widgettype", "options"属性, 可选属性有"subwidegets"，"binds"
|
||||
|
||||
### widget
|
||||
widget是一个控件实例，用于解析desc中出现的url
|
||||
|
||||
## 返回值
|
||||
* null 出错，可能1）widgettype类型未注册或不存在；2）json文件格式不对
|
||||
* 新创建的控件实体
|
||||
|
||||
## 例子
|
||||
tree.json
|
||||
```
|
||||
{
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
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>
|
||||
|
||||
```
|
||||
这是一个树形控件， 运行[这里](https://github.com/bricks/examples/tree.html)
|
||||
更多的例子请看
|
||||
[bricks控件例子](https://github.com/yumoqing/bricks/examples)
|
||||
|
||||
|
||||
|
||||
@ -1,60 +1,60 @@
|
||||
# BricksApp
|
||||
BricksApp是Bricks框架的应用类， BricksApp用来初始化Bricks环境，创建Bricks页面的根控件
|
||||
|
||||
并将生成的根控件插入的全局控件Body中，
|
||||
|
||||
Body对应的dom_element为页面的“body”元素。
|
||||
|
||||
后续可以通过bricks_app全局变量来引用BricksApp实例。
|
||||
|
||||
## 构建选项
|
||||
```
|
||||
opts = {
|
||||
login_url:
|
||||
"charsize:
|
||||
"language":
|
||||
"i18n":{
|
||||
"url":'rrr',
|
||||
"default_lang":'en'
|
||||
},
|
||||
"widget":{
|
||||
"widgettype":"Text",
|
||||
"options":{
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
### login_url
|
||||
登录url，按照后台设置，当需要访问受控url时会从此URL返回的json数据创建登录窗体，用户登录
|
||||
|
||||
### chartsize
|
||||
字符大小，缺省16px
|
||||
|
||||
### languange
|
||||
页面使用的语言，两个字符的语言
|
||||
|
||||
### i18n
|
||||
定义国际化数据获取路径，url按照GET方式，language作为参数，像后台获取改语言的json格式的翻译数据。
|
||||
### widget
|
||||
根控件描述对象
|
||||
|
||||
## 属性
|
||||
|
||||
### opts
|
||||
保存创建选项
|
||||
|
||||
### login_url
|
||||
用于构建登录控件的url
|
||||
|
||||
### charsize
|
||||
字符大小，所有输入控件，Text， Icon，Title？都受此影响控件大小。
|
||||
### lang
|
||||
前端界面语言，选项指定或获取缺省语言
|
||||
### textList
|
||||
|
||||
### i18n
|
||||
### session_id
|
||||
## 方法
|
||||
|
||||
## 事件
|
||||
|
||||
# BricksApp
|
||||
BricksApp是Bricks框架的应用类， BricksApp用来初始化Bricks环境，创建Bricks页面的根控件
|
||||
|
||||
并将生成的根控件插入的全局控件Body中，
|
||||
|
||||
Body对应的dom_element为页面的“body”元素。
|
||||
|
||||
后续可以通过bricks_app全局变量来引用BricksApp实例。
|
||||
|
||||
## 构建选项
|
||||
```
|
||||
opts = {
|
||||
login_url:
|
||||
"charsize:
|
||||
"language":
|
||||
"i18n":{
|
||||
"url":'rrr',
|
||||
"default_lang":'en'
|
||||
},
|
||||
"widget":{
|
||||
"widgettype":"Text",
|
||||
"options":{
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
### login_url
|
||||
登录url，按照后台设置，当需要访问受控url时会从此URL返回的json数据创建登录窗体，用户登录
|
||||
|
||||
### chartsize
|
||||
字符大小，缺省16px
|
||||
|
||||
### languange
|
||||
页面使用的语言，两个字符的语言
|
||||
|
||||
### i18n
|
||||
定义国际化数据获取路径，url按照GET方式，language作为参数，像后台获取改语言的json格式的翻译数据。
|
||||
### widget
|
||||
根控件描述对象
|
||||
|
||||
## 属性
|
||||
|
||||
### opts
|
||||
保存创建选项
|
||||
|
||||
### login_url
|
||||
用于构建登录控件的url
|
||||
|
||||
### charsize
|
||||
字符大小，所有输入控件，Text， Icon，Title？都受此影响控件大小。
|
||||
### lang
|
||||
前端界面语言，选项指定或获取缺省语言
|
||||
### textList
|
||||
|
||||
### i18n
|
||||
### session_id
|
||||
## 方法
|
||||
|
||||
## 事件
|
||||
|
||||
|
||||
@ -1,78 +1,78 @@
|
||||
# 创建控件的Json文件格式说明
|
||||
Bricks在服务器端使用Json文件格式存储控件描述文件，前端获得json文件后转化为json对象，并用词json对象调用widgetBuild函数创建Bricks控件。
|
||||
|
||||
控件描述json文件必须含有“widgettype” 和”options“两个属性。“subwidgets”属性用来定义此控件包含的子控件。“binds”用于定义此控件或其子控件的事件处理
|
||||
|
||||
|
||||
## widgettype说明
|
||||
widgettype是一个字符串属性。其值为Bricks中的所有控件类型或"urlwidget"
|
||||
可用的控件类型可以在[控件类型清单](widgettypes.md)中查找
|
||||
|
||||
## options
|
||||
对象类型，每个控件有特定的options属性，清参看每个控件的说明
|
||||
|
||||
## subwidgets
|
||||
数组类型，数组中的每个元素必须是一个对象类型数据，与desc作用一样。
|
||||
参见widgetBuild函数的desc说明
|
||||
|
||||
## binds
|
||||
一个数组，在控件上定义一到多个事件绑定，数组中的每一个元素定义一个绑定，
|
||||
Bricks支持5种数据绑定
|
||||
每种绑定类型都支持下述属性
|
||||
### wid
|
||||
字符串类型或控件类型，绑定事件的控件，缺省是binds坐在的构造控件。
|
||||
### event
|
||||
字符串类型，事件名称， 绑定针对的事件字符串名称
|
||||
|
||||
### actiontype
|
||||
绑定类型，支持“urlwidget", "method", "script", "registerfunction", "event"
|
||||
|
||||
### conform
|
||||
对象类型，确认控件的options，如存在，则此绑定需要用户确认后再执行
|
||||
|
||||
### 获取实时数据作为参数
|
||||
绑定任务获取实时数据作为参数，需要给定以下属性：
|
||||
* datawidget：字符串或控件类型，获取实时数据的控件
|
||||
* datamethod：字符串类型，控件的方法，使用params作为参数调用，
|
||||
获取实时数据的方法
|
||||
* datascript：字符串类型， js脚本，使用return返回数据
|
||||
* dataparams：参数
|
||||
datamethod 优先datascript，从datawidget控件中通过datamethod
|
||||
|
||||
### target
|
||||
字符串或控件实例，目标控件实例，如果是字符串，使用”getWidgetById“函数获得目标控件实例
|
||||
|
||||
### urlwidget绑定
|
||||
|
||||
urlwidget绑定需要一个options属性和一个mode属性，在此属性中需要
|
||||
* url：字符串类型， 获取desc数据的url
|
||||
* mehtod：字符串类型，url调用的方法，缺省”GET“
|
||||
* params：对象类型，调用的参数
|
||||
绑定创建的控件添加到target控件中
|
||||
### method
|
||||
需要指定target参数和method参数，
|
||||
* target：类型为字符串或控件类型，
|
||||
如果是字符串，使用“getWidgetById”函数获取控件实例。
|
||||
* method：字符串，target实例的方法，
|
||||
* params：传递给方法的参数
|
||||
method绑定方法，将事件绑定到target控件的一个方法，并用params传递参数
|
||||
|
||||
### script
|
||||
绑定脚本，此方法将事件绑定到一个脚本，支持以下属性
|
||||
* script：字符串，脚本正文
|
||||
* params：对象类型，脚本可以访问params变量来获取参数。
|
||||
|
||||
### registerfunction
|
||||
事件绑定一个注册函数， 参看[RegisterFunction](registerfunction.md)
|
||||
支持以下属性：
|
||||
rfname：字符串，已注册的函数名称
|
||||
params：对象类型，调用注册函数时作为参数传递给注册函数。
|
||||
|
||||
### event
|
||||
绑定事件，需指定target，触发target对象的一个事件
|
||||
支持以下属性
|
||||
dispatch_event：需触发的事件名
|
||||
params：传递给事件的参数，处理函数可以使用evemt.params获得此参数
|
||||
|
||||
作为参数调用target实例的方法
|
||||
|
||||
# 创建控件的Json文件格式说明
|
||||
Bricks在服务器端使用Json文件格式存储控件描述文件，前端获得json文件后转化为json对象，并用词json对象调用widgetBuild函数创建Bricks控件。
|
||||
|
||||
控件描述json文件必须含有“widgettype” 和”options“两个属性。“subwidgets”属性用来定义此控件包含的子控件。“binds”用于定义此控件或其子控件的事件处理
|
||||
|
||||
|
||||
## widgettype说明
|
||||
widgettype是一个字符串属性。其值为Bricks中的所有控件类型或"urlwidget"
|
||||
可用的控件类型可以在[控件类型清单](widgettypes.md)中查找
|
||||
|
||||
## options
|
||||
对象类型，每个控件有特定的options属性，清参看每个控件的说明
|
||||
|
||||
## subwidgets
|
||||
数组类型，数组中的每个元素必须是一个对象类型数据，与desc作用一样。
|
||||
参见widgetBuild函数的desc说明
|
||||
|
||||
## binds
|
||||
一个数组，在控件上定义一到多个事件绑定，数组中的每一个元素定义一个绑定，
|
||||
Bricks支持5种数据绑定
|
||||
每种绑定类型都支持下述属性
|
||||
### wid
|
||||
字符串类型或控件类型，绑定事件的控件，缺省是binds坐在的构造控件。
|
||||
### event
|
||||
字符串类型，事件名称， 绑定针对的事件字符串名称
|
||||
|
||||
### actiontype
|
||||
绑定类型，支持“urlwidget", "method", "script", "registerfunction", "event"
|
||||
|
||||
### conform
|
||||
对象类型，确认控件的options，如存在，则此绑定需要用户确认后再执行
|
||||
|
||||
### 获取实时数据作为参数
|
||||
绑定任务获取实时数据作为参数，需要给定以下属性：
|
||||
* datawidget：字符串或控件类型，获取实时数据的控件
|
||||
* datamethod：字符串类型，控件的方法，使用params作为参数调用，
|
||||
获取实时数据的方法
|
||||
* datascript：字符串类型， js脚本，使用return返回数据
|
||||
* dataparams：参数
|
||||
datamethod 优先datascript，从datawidget控件中通过datamethod
|
||||
|
||||
### target
|
||||
字符串或控件实例，目标控件实例，如果是字符串，使用”getWidgetById“函数获得目标控件实例
|
||||
|
||||
### urlwidget绑定
|
||||
|
||||
urlwidget绑定需要一个options属性和一个mode属性，在此属性中需要
|
||||
* url：字符串类型， 获取desc数据的url
|
||||
* mehtod：字符串类型，url调用的方法，缺省”GET“
|
||||
* params：对象类型，调用的参数
|
||||
绑定创建的控件添加到target控件中
|
||||
### method
|
||||
需要指定target参数和method参数，
|
||||
* target：类型为字符串或控件类型，
|
||||
如果是字符串，使用“getWidgetById”函数获取控件实例。
|
||||
* method：字符串，target实例的方法，
|
||||
* params：传递给方法的参数
|
||||
method绑定方法，将事件绑定到target控件的一个方法，并用params传递参数
|
||||
|
||||
### script
|
||||
绑定脚本，此方法将事件绑定到一个脚本，支持以下属性
|
||||
* script：字符串，脚本正文
|
||||
* params：对象类型，脚本可以访问params变量来获取参数。
|
||||
|
||||
### registerfunction
|
||||
事件绑定一个注册函数， 参看[RegisterFunction](registerfunction.md)
|
||||
支持以下属性：
|
||||
rfname：字符串，已注册的函数名称
|
||||
params：对象类型，调用注册函数时作为参数传递给注册函数。
|
||||
|
||||
### event
|
||||
绑定事件，需指定target，触发target对象的一个事件
|
||||
支持以下属性
|
||||
dispatch_event：需触发的事件名
|
||||
params：传递给事件的参数，处理函数可以使用evemt.params获得此参数
|
||||
|
||||
作为参数调用target实例的方法
|
||||
|
||||
|
||||
116
docs/cn/index.md
116
docs/cn/index.md
@ -1,58 +1,58 @@
|
||||
# bricks
|
||||
像搭积木一样的编写前端应用，bricks希望提供开发者所需的底层显示控件，开发应用时采用简单的组装和插拔方式完成应用的开发
|
||||
|
||||
使用bricks开发应用的好处
|
||||
* 质量和性能可控，开发者开发的应用质量和性能依赖bricks提供的提供底层控件。
|
||||
* 简单的开发方式，开发者以编写json数据文件的形式开发前端应用，以后可以提供一个可视化开发平台
|
||||
|
||||
## Bricks控件描述文件
|
||||
Bricks使用json格式描述控件，具体格式要求请看[控件描述文件](descjson.md)
|
||||
|
||||
## BricksApp
|
||||
Bricks应用类，参见[BricksApp](bricksapp.md)
|
||||
|
||||
## bricks主要函数
|
||||
### widgetBuild
|
||||
创建控件函数，详细说明请看[这里](bricks.md)
|
||||
|
||||
### getWigetById
|
||||
从DOM树查找控件，详细说明请看[这里](bricks.md)
|
||||
|
||||
## bricks控件
|
||||
Bricks的所有控件均继承自JsWidget，控件间的继承关系请看[控件继承树](inherittree.md)
|
||||
|
||||
控件是bricks的基础，每个控件实现了特定显示功能或布局能力，开发者使用这些控件来构建应用
|
||||
|
||||
bricks的开发理念是：应用开发可分为底层控件的开发以及操控底层控件来搭建应用。
|
||||
|
||||
通过这样分工，让精通底层开发的人员专心开发底层控件，而精通操控控件的人员专心搭建应用，从而提高开发效率和开发质量，希望大家参与进来一起做。
|
||||
|
||||
关于控件更多的信息，请看[控件](widgettypes.md)
|
||||
|
||||
## 依赖
|
||||
如果要使用Markdown，需要引用marked模块，
|
||||
|
||||
如果用到图表， 需要引用echarts
|
||||
|
||||
* [Marked](https://github.com/markedjs/marked)
|
||||
|
||||
* [echarts](https://echarts.apache.org/zh/index.html)
|
||||
|
||||
## build
|
||||
bricks 使用uglifyjs 压缩
|
||||
在bricks目录下执行
|
||||
```
|
||||
./build.sh
|
||||
```
|
||||
命令执行完后在项目的dist目录下会生成bricks.js 和bricks.min.js，并将examples和docs目录复制到本机到wwwroot目录
|
||||
|
||||
按照开发者本地web服务器的配置，请修改build.sh的目标路径。
|
||||
## 引用
|
||||
```
|
||||
<link rel="stylesheet" href="/bricks/css/bricks.css" />
|
||||
<script src="/bricks/bricks.js"></script>
|
||||
|
||||
```
|
||||
## 例子
|
||||
配置好本地服务器后，可以使用build.sh将bricks项目内容复制到本地网站后台，之后在网站的examples目录中查看bricks提供的例子程序
|
||||
|
||||
# bricks
|
||||
像搭积木一样的编写前端应用，bricks希望提供开发者所需的底层显示控件，开发应用时采用简单的组装和插拔方式完成应用的开发
|
||||
|
||||
使用bricks开发应用的好处
|
||||
* 质量和性能可控，开发者开发的应用质量和性能依赖bricks提供的提供底层控件。
|
||||
* 简单的开发方式，开发者以编写json数据文件的形式开发前端应用，以后可以提供一个可视化开发平台
|
||||
|
||||
## Bricks控件描述文件
|
||||
Bricks使用json格式描述控件，具体格式要求请看[控件描述文件](descjson.md)
|
||||
|
||||
## BricksApp
|
||||
Bricks应用类，参见[BricksApp](bricksapp.md)
|
||||
|
||||
## bricks主要函数
|
||||
### widgetBuild
|
||||
创建控件函数，详细说明请看[这里](bricks.md)
|
||||
|
||||
### getWigetById
|
||||
从DOM树查找控件，详细说明请看[这里](bricks.md)
|
||||
|
||||
## bricks控件
|
||||
Bricks的所有控件均继承自JsWidget，控件间的继承关系请看[控件继承树](inherittree.md)
|
||||
|
||||
控件是bricks的基础，每个控件实现了特定显示功能或布局能力，开发者使用这些控件来构建应用
|
||||
|
||||
bricks的开发理念是：应用开发可分为底层控件的开发以及操控底层控件来搭建应用。
|
||||
|
||||
通过这样分工，让精通底层开发的人员专心开发底层控件，而精通操控控件的人员专心搭建应用，从而提高开发效率和开发质量，希望大家参与进来一起做。
|
||||
|
||||
关于控件更多的信息，请看[控件](widgettypes.md)
|
||||
|
||||
## 依赖
|
||||
如果要使用Markdown，需要引用marked模块，
|
||||
|
||||
如果用到图表， 需要引用echarts
|
||||
|
||||
* [Marked](https://github.com/markedjs/marked)
|
||||
|
||||
* [echarts](https://echarts.apache.org/zh/index.html)
|
||||
|
||||
## build
|
||||
bricks 使用uglifyjs 压缩
|
||||
在bricks目录下执行
|
||||
```
|
||||
./build.sh
|
||||
```
|
||||
命令执行完后在项目的dist目录下会生成bricks.js 和bricks.min.js，并将examples和docs目录复制到本机到wwwroot目录
|
||||
|
||||
按照开发者本地web服务器的配置，请修改build.sh的目标路径。
|
||||
## 引用
|
||||
```
|
||||
<link rel="stylesheet" href="/bricks/css/bricks.css" />
|
||||
<script src="/bricks/bricks.js"></script>
|
||||
|
||||
```
|
||||
## 例子
|
||||
配置好本地服务器后，可以使用build.sh将bricks项目内容复制到本地网站后台，之后在网站的examples目录中查看bricks提供的例子程序
|
||||
|
||||
|
||||
@ -1,102 +1,102 @@
|
||||
# Bricks控件继承树
|
||||
|
||||
```
|
||||
JsWidget
|
||||
|
|
||||
--- AudioPlayer
|
||||
|
|
||||
--- Image
|
||||
| |
|
||||
| --- Icon
|
||||
|
|
||||
___ BlankIcon
|
||||
|
|
||||
___ Layout
|
||||
| |
|
||||
| --- VBox
|
||||
| | |
|
||||
| | --- Accordion
|
||||
| | |
|
||||
| | --- DataGrid
|
||||
| | |
|
||||
| | --- Form
|
||||
| | |
|
||||
| | --- MarkdownViewer
|
||||
| | |
|
||||
| | --- Menu
|
||||
| | |
|
||||
| | --- Message
|
||||
| | | |
|
||||
| | | --- Error
|
||||
| | |
|
||||
| | --- Popup
|
||||
| | |
|
||||
| | --- ScrollPanel
|
||||
| | |
|
||||
| | --- TreeNode
|
||||
| | |
|
||||
| | --- Tree
|
||||
| | | |
|
||||
| | | --- EditableTree
|
||||
| | |
|
||||
| | --- VideoPlayer
|
||||
| |
|
||||
| --- HBox
|
||||
| | |
|
||||
| | --- MiniForm
|
||||
| |
|
||||
| --- MultipleStateImage
|
||||
| |
|
||||
| --- Toolbar
|
||||
| |
|
||||
| --- TabPanel
|
||||
| |
|
||||
| --- Modal
|
||||
| |
|
||||
| --- HFiller
|
||||
| |
|
||||
| --- VFiller
|
||||
| |
|
||||
| --- Button
|
||||
| |
|
||||
| --- UiType
|
||||
| | |
|
||||
| | --- UiStr
|
||||
| | | |
|
||||
| | | --- UiPassword
|
||||
| | | |
|
||||
| | | --- UiInt
|
||||
| | | | |
|
||||
| | | | --- UiFloat
|
||||
| | | |
|
||||
| | | --- UiTel
|
||||
| | | |
|
||||
| | | --- UiEmail
|
||||
| | | |
|
||||
| | | --- UiFile
|
||||
| | | |
|
||||
| | | --- UiDate
|
||||
| | | |
|
||||
| | | --- UiAudio
|
||||
| | | |
|
||||
| | | --- UiVideo
|
||||
| | |
|
||||
| | --- UiCheck
|
||||
| | |
|
||||
| | --- UiCheckBox
|
||||
| | |
|
||||
| | --- UiText
|
||||
| | |
|
||||
| | --- UiCode
|
||||
|
|
||||
--- MdText
|
||||
|
|
||||
___ Video
|
||||
|
|
||||
--- TextBase
|
||||
|
|
||||
--- Text
|
||||
|
|
||||
--- Title1, Title2, Title3, Title4, Title5, Title6
|
||||
```
|
||||
|
||||
# Bricks控件继承树
|
||||
|
||||
```
|
||||
JsWidget
|
||||
|
|
||||
--- AudioPlayer
|
||||
|
|
||||
--- Image
|
||||
| |
|
||||
| --- Icon
|
||||
|
|
||||
___ BlankIcon
|
||||
|
|
||||
___ Layout
|
||||
| |
|
||||
| --- VBox
|
||||
| | |
|
||||
| | --- Accordion
|
||||
| | |
|
||||
| | --- DataGrid
|
||||
| | |
|
||||
| | --- Form
|
||||
| | |
|
||||
| | --- MarkdownViewer
|
||||
| | |
|
||||
| | --- Menu
|
||||
| | |
|
||||
| | --- Message
|
||||
| | | |
|
||||
| | | --- Error
|
||||
| | |
|
||||
| | --- Popup
|
||||
| | |
|
||||
| | --- ScrollPanel
|
||||
| | |
|
||||
| | --- TreeNode
|
||||
| | |
|
||||
| | --- Tree
|
||||
| | | |
|
||||
| | | --- EditableTree
|
||||
| | |
|
||||
| | --- VideoPlayer
|
||||
| |
|
||||
| --- HBox
|
||||
| | |
|
||||
| | --- MiniForm
|
||||
| |
|
||||
| --- MultipleStateImage
|
||||
| |
|
||||
| --- Toolbar
|
||||
| |
|
||||
| --- TabPanel
|
||||
| |
|
||||
| --- Modal
|
||||
| |
|
||||
| --- HFiller
|
||||
| |
|
||||
| --- VFiller
|
||||
| |
|
||||
| --- Button
|
||||
| |
|
||||
| --- UiType
|
||||
| | |
|
||||
| | --- UiStr
|
||||
| | | |
|
||||
| | | --- UiPassword
|
||||
| | | |
|
||||
| | | --- UiInt
|
||||
| | | | |
|
||||
| | | | --- UiFloat
|
||||
| | | |
|
||||
| | | --- UiTel
|
||||
| | | |
|
||||
| | | --- UiEmail
|
||||
| | | |
|
||||
| | | --- UiFile
|
||||
| | | |
|
||||
| | | --- UiDate
|
||||
| | | |
|
||||
| | | --- UiAudio
|
||||
| | | |
|
||||
| | | --- UiVideo
|
||||
| | |
|
||||
| | --- UiCheck
|
||||
| | |
|
||||
| | --- UiCheckBox
|
||||
| | |
|
||||
| | --- UiText
|
||||
| | |
|
||||
| | --- UiCode
|
||||
|
|
||||
--- MdText
|
||||
|
|
||||
___ Video
|
||||
|
|
||||
--- TextBase
|
||||
|
|
||||
--- Text
|
||||
|
|
||||
--- Title1, Title2, Title3, Title4, Title5, Title6
|
||||
```
|
||||
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
# JsWidget
|
||||
Bricks框架的最原始的控件，所有Bricks的控件均继承自JsWidget或其后代。
|
||||
|
||||
## 构建选项
|
||||
|
||||
## 属性
|
||||
|
||||
### dom_element
|
||||
dom_element是控件对应的dom元素。
|
||||
|
||||
## 方法
|
||||
|
||||
### create()
|
||||
创建dom元素的方法，并将新创建的元素保存在dom_element属性中，JsWidget创建一个”div“的元素， 子类通过提供自己的create（）函数创建自己特定的dom元素。
|
||||
### set_css(css_name, delflg)
|
||||
|
||||
增加或删除一个css类， 当delflg为真时删除一个“css_name”css类，否则增加一个“css_name”类
|
||||
|
||||
### sizable（）
|
||||
sizable函数让当前类有按照bricks_app.charsize的大小设置自身大小的能力，并在charsize变化时改变自身的大小
|
||||
|
||||
### change_fontsize（ts）
|
||||
change_fontsize函数由bricks_app.textsize_bigger()，textsize_smaller（）函数调用，用来改变控件的大小
|
||||
## 事件
|
||||
无
|
||||
# JsWidget
|
||||
Bricks框架的最原始的控件，所有Bricks的控件均继承自JsWidget或其后代。
|
||||
|
||||
## 构建选项
|
||||
|
||||
## 属性
|
||||
|
||||
### dom_element
|
||||
dom_element是控件对应的dom元素。
|
||||
|
||||
## 方法
|
||||
|
||||
### create()
|
||||
创建dom元素的方法，并将新创建的元素保存在dom_element属性中，JsWidget创建一个”div“的元素， 子类通过提供自己的create（）函数创建自己特定的dom元素。
|
||||
### set_css(css_name, delflg)
|
||||
|
||||
增加或删除一个css类， 当delflg为真时删除一个“css_name”css类，否则增加一个“css_name”类
|
||||
|
||||
### sizable（）
|
||||
sizable函数让当前类有按照bricks_app.charsize的大小设置自身大小的能力，并在charsize变化时改变自身的大小
|
||||
|
||||
### change_fontsize（ts）
|
||||
change_fontsize函数由bricks_app.textsize_bigger()，textsize_smaller（）函数调用，用来改变控件的大小
|
||||
## 事件
|
||||
无
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
# XXX
|
||||
|
||||
## 创建选项
|
||||
|
||||
## 属性
|
||||
|
||||
## 方法
|
||||
|
||||
## 事件
|
||||
# XXX
|
||||
|
||||
## 创建选项
|
||||
|
||||
## 属性
|
||||
|
||||
## 方法
|
||||
|
||||
## 事件
|
||||
|
||||
@ -1,45 +1,45 @@
|
||||
# 控件列表
|
||||
Bricks内置许多的显示控件，所有显示控件都继承自JsWidget，容器控件Layout几就继承自JsWidget，其他的容器HBox， VBox继承自Layout
|
||||
|
||||
# 控件继承树
|
||||
|
||||
# 控件清单
|
||||
* [JsWidget](jswidget.md)： 祖先控件，对应于<div>元素
|
||||
* [Accordion](accordion.md)：可折叠控件
|
||||
* [AudioPlayer](audioplayer.md)：音频播放器
|
||||
* [Button](button.md)：按钮控件
|
||||
* [DataGrid](datagrid.md)：数据表格控件
|
||||
* [Form](form.md)：输入表单控件
|
||||
* [Image](image.md)：图片控件
|
||||
* [Icon](icon.md)：图标控件
|
||||
* [BlankIcon](blackicon.js)：空白图标控件
|
||||
* [HBox](hbox.md)：横向布局器
|
||||
* [VBox](vbox.md)：纵向布局器
|
||||
* [HFiller](hfiller.md)：横向填充控件
|
||||
* [VFiller](vfiller.md)：纵向填充控件
|
||||
* [MarkdownViewer](markdonwviewer.md)：markdown文档显示控件
|
||||
* [Menu](menu.md)：菜单控件
|
||||
* [Message](message.md)：消息控件
|
||||
* [Error](error.md)：错误信息控件
|
||||
* [PopupForm](popupform.md)：弹出表单控件
|
||||
* [MiniForm](meniform.md)：多选单一输入表单
|
||||
* [Modal](modal.md)：独占控件
|
||||
* [ModalForm](modalform.md)：独占表单
|
||||
* [MultipleStateImage](multiplestateimage.md)：多状态图像显示控件
|
||||
* [ScrollPanel](scrollpanel.md)：滚动面板
|
||||
* [VScrollPanel](vscrollpanel.md)：纵向滚动面板
|
||||
* [HScrollPanel](hscrollpanel.md)：横向滚动面板
|
||||
* [TabPanel][tabpanel.md)：标签面板控件
|
||||
* [Toolbar](toolbar.md)：工具条控件
|
||||
* [Tree](tree.md)：树状显示控件
|
||||
* [EditableTree](editabletree.md)：可编辑树状显示控件
|
||||
* [VideoPlayer](videoplayer.md)：视频播放器控件
|
||||
* [Text](text.md)：正文控件
|
||||
* [Title1](title1.md)：标题1控件
|
||||
* [Title2](title2.md)：标题2控件
|
||||
* [Title3](title3.md)：标题3控件
|
||||
* [Title4](title4.md)：标题4控件
|
||||
* [Title5](title5.md)：标题5控件
|
||||
* [Title6](title6.md)：标题6控件
|
||||
|
||||
#
|
||||
# 控件列表
|
||||
Bricks内置许多的显示控件，所有显示控件都继承自JsWidget，容器控件Layout几就继承自JsWidget，其他的容器HBox， VBox继承自Layout
|
||||
|
||||
# 控件继承树
|
||||
|
||||
# 控件清单
|
||||
* [JsWidget](jswidget.md)： 祖先控件，对应于<div>元素
|
||||
* [Accordion](accordion.md)：可折叠控件
|
||||
* [AudioPlayer](audioplayer.md)：音频播放器
|
||||
* [Button](button.md)：按钮控件
|
||||
* [DataGrid](datagrid.md)：数据表格控件
|
||||
* [Form](form.md)：输入表单控件
|
||||
* [Image](image.md)：图片控件
|
||||
* [Icon](icon.md)：图标控件
|
||||
* [BlankIcon](blackicon.js)：空白图标控件
|
||||
* [HBox](hbox.md)：横向布局器
|
||||
* [VBox](vbox.md)：纵向布局器
|
||||
* [HFiller](hfiller.md)：横向填充控件
|
||||
* [VFiller](vfiller.md)：纵向填充控件
|
||||
* [MarkdownViewer](markdonwviewer.md)：markdown文档显示控件
|
||||
* [Menu](menu.md)：菜单控件
|
||||
* [Message](message.md)：消息控件
|
||||
* [Error](error.md)：错误信息控件
|
||||
* [PopupForm](popupform.md)：弹出表单控件
|
||||
* [MiniForm](meniform.md)：多选单一输入表单
|
||||
* [Modal](modal.md)：独占控件
|
||||
* [ModalForm](modalform.md)：独占表单
|
||||
* [MultipleStateImage](multiplestateimage.md)：多状态图像显示控件
|
||||
* [ScrollPanel](scrollpanel.md)：滚动面板
|
||||
* [VScrollPanel](vscrollpanel.md)：纵向滚动面板
|
||||
* [HScrollPanel](hscrollpanel.md)：横向滚动面板
|
||||
* [TabPanel][tabpanel.md)：标签面板控件
|
||||
* [Toolbar](toolbar.md)：工具条控件
|
||||
* [Tree](tree.md)：树状显示控件
|
||||
* [EditableTree](editabletree.md)：可编辑树状显示控件
|
||||
* [VideoPlayer](videoplayer.md)：视频播放器控件
|
||||
* [Text](text.md)：正文控件
|
||||
* [Title1](title1.md)：标题1控件
|
||||
* [Title2](title2.md)：标题2控件
|
||||
* [Title3](title3.md)：标题3控件
|
||||
* [Title4](title4.md)：标题4控件
|
||||
* [Title5](title5.md)：标题5控件
|
||||
* [Title6](title6.md)：标题6控件
|
||||
|
||||
#
|
||||
|
||||
44
docs/docs.md
Normal file
44
docs/docs.md
Normal 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
50
docs/editabletree.md
Normal 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>
|
||||
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## widget参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---------- | ---------- | ------ | -------- | --------- | ------ |
|
||||
| widgettype | 控件类型 | String | 是 | urlwidget | --- |
|
||||
| options | 控件配置项 | Object | 是 | --- | --- |
|
||||
|
||||
### options参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | -------- | ------ | -------- | ------ | ------ |
|
||||
| url | 数据来源 | String | 是 | --- | --- |
|
||||
|
||||
**注意:url可以是个json文件**
|
||||
9
docs/error.md
Normal file
9
docs/error.md
Normal file
@ -0,0 +1,9 @@
|
||||
# error
|
||||
|
||||
# 用法
|
||||
|
||||
```html
|
||||
```
|
||||
|
||||
|
||||
|
||||
377
docs/form.md
Normal file
377
docs/form.md
Normal 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>
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## 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
14
docs/hfiller.md
Normal file
@ -0,0 +1,14 @@
|
||||
# Hfiller
|
||||
|
||||
此控件为容器横向排列时,若宽度过宽,自动填充
|
||||
|
||||
## option参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ------- | -------- | ------ | -------- | ------ | ------ |
|
||||
| baseURI | 数据路径 | String | 是 | --- | --- |
|
||||
| tooltip | 提示 | String | 是 | --- | --- |
|
||||
| css | 样式 | String | 否 | --- | --- |
|
||||
| csses | 样式 | String | 否 | --- | --- |
|
||||
|
||||
此控件为样式排列控件
|
||||
55
docs/icon.md
Normal file
55
docs/icon.md
Normal 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>
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## 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
112
docs/image.md
Executable file → Normal file
@ -1,57 +1,55 @@
|
||||
# Image
|
||||
Image widget show image
|
||||
## use case
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../css/bricks.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="../bricks.js"></script>
|
||||
|
||||
<script>
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"widgettype":"Image",
|
||||
"options":{
|
||||
"source":"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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
the result is <br>
|
||||
|
||||
|
||||
## inheritance
|
||||
Image inherited from JsWidget
|
||||
|
||||
## options
|
||||
```
|
||||
{
|
||||
"source":
|
||||
"width":
|
||||
"height":
|
||||
}
|
||||
```
|
||||
### source
|
||||
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
|
||||
|
||||
## method
|
||||
none
|
||||
## event
|
||||
none
|
||||
# Image
|
||||
Image widget show image
|
||||
# 用法
|
||||
```html
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="/bricks/bricks.js"></script>
|
||||
|
||||
<script>
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"widgettype": "Image",
|
||||
"options": {
|
||||
"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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
the result is <br>
|
||||
|
||||
|
||||
## inheritance
|
||||
Image inherited from JsWidget
|
||||
|
||||
## options
|
||||
```
|
||||
{
|
||||
"url":
|
||||
"width":
|
||||
"height":
|
||||
}
|
||||
```
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ------ | -------- | ------ | -------- | ---------- | ------ |
|
||||
| url | 照片路径 | String | 是 | --- | --- |
|
||||
| width | 宽度 | String | 是 | 百分比数值 | --- |
|
||||
| height | 高度 | String | 是 | 百分比数值 | --- |
|
||||
|
||||
|
||||
0
docs/image.png
Executable file → Normal file
0
docs/image.png
Executable file → Normal file
|
Before Width: | Height: | Size: 974 KiB After Width: | Height: | Size: 974 KiB |
BIN
docs/images/accordion.png
Normal file
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
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
BIN
docs/images/button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/images/docs.png
Normal file
BIN
docs/images/docs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
docs/images/editabletree.png
Normal file
BIN
docs/images/editabletree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/images/form.png
Normal file
BIN
docs/images/form.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/images/icon.png
Normal file
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
BIN
docs/images/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 974 KiB |
BIN
docs/images/input.png
Normal file
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
BIN
docs/images/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/images/miniform.png
Normal file
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
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
BIN
docs/images/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/images/text.png
Normal file
BIN
docs/images/text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/images/title.png
Normal file
BIN
docs/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/images/toolbar.png
Normal file
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
BIN
docs/images/tree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/images/video.png
Normal file
BIN
docs/images/video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@ -1 +0,0 @@
|
||||
README.md
|
||||
1
docs/index.md
Normal file
1
docs/index.md
Normal file
@ -0,0 +1 @@
|
||||
README.md
|
||||
79
docs/input.md
Normal file
79
docs/input.md
Normal 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>
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## 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
32
docs/layout.md
Executable file → Normal file
@ -1,16 +1,16 @@
|
||||
# Layout
|
||||
Layout is a layout widget for layout widgets inside it
|
||||
## use case
|
||||
none
|
||||
## inheritance
|
||||
Layout inherited from JsWidget
|
||||
## options
|
||||
## method
|
||||
### add_widget
|
||||
add_widget(w) append a widget name by w, to the caller
|
||||
### remove_widget
|
||||
remove_widget(w) remove widget named by w from caller's children
|
||||
### clear_widgets
|
||||
clear_widgets() remove all children widget.
|
||||
## event
|
||||
none
|
||||
# Layout
|
||||
Layout is a layout widget for layout widgets inside it
|
||||
## use case
|
||||
none
|
||||
## inheritance
|
||||
Layout inherited from JsWidget
|
||||
## options
|
||||
## method
|
||||
### add_widget
|
||||
add_widget(w) append a widget name by w, to the caller
|
||||
### remove_widget
|
||||
remove_widget(w) remove widget named by w from caller's children
|
||||
### clear_widgets
|
||||
clear_widgets() remove all children widget.
|
||||
## event
|
||||
none
|
||||
|
||||
71
docs/markdownviewer.md
Executable file → Normal file
71
docs/markdownviewer.md
Executable file → Normal file
@ -1,13 +1,58 @@
|
||||
# MarkdownView
|
||||
|
||||
## Options attributes
|
||||
MarkdownViewer has following attributes:
|
||||
### md_url
|
||||
md_url is a url address in which it is a markdown text file.
|
||||
|
||||
## Description
|
||||
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.
|
||||
|
||||
## Event
|
||||
none
|
||||
|
||||
# MarkdownView
|
||||
|
||||
**此控件可以完成一个指向md文件的操作**
|
||||
|
||||
# 用法
|
||||
|
||||
```html
|
||||
<html>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<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
143
docs/message.md
Normal 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>
|
||||
```
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
|
||||
## 参数说明
|
||||
|
||||
### 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
135
docs/miniform.md
Normal 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>
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## options参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ----------- | ------------------ | ------ | -------- | ------ | ------ |
|
||||
| label_width | 控件标签的宽度 | String | 是 | --- | --- |
|
||||
| fields | 控件子项的详细信息 | Array | 是 | --- | --- |
|
||||
|
||||
#### options.fields参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ------ | -------------- | ------ | -------- | ----------- | ------ |
|
||||
| name | 控件的原生属性 | String | 是 | --- | --- |
|
||||
| label | 文本标签 | String | 否 | --- | --- |
|
||||
| uitype | 控件类型 | String | 否 | str(字符串) | --- |
|
||||
|
||||
|
||||
|
||||
78
docs/modal.md
Normal file
78
docs/modal.md
Normal 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>
|
||||
```
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
# 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
14
docs/pw.md
Executable file → Normal file
@ -1,7 +1,7 @@
|
||||
# Widget Name
|
||||
description of the Widget
|
||||
## use case
|
||||
## inheritance
|
||||
## options
|
||||
## method
|
||||
## event
|
||||
# Widget Name
|
||||
description of the Widget
|
||||
## use case
|
||||
## inheritance
|
||||
## options
|
||||
## method
|
||||
## event
|
||||
|
||||
113
docs/tab.md
Normal file
113
docs/tab.md
Normal 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
|
||||
## 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
160
docs/text.md
Executable file → Normal file
@ -1,7 +1,153 @@
|
||||
# Text
|
||||
Text is a widget to show text
|
||||
## use case
|
||||
## inheritance
|
||||
## options
|
||||
## method
|
||||
## event
|
||||
# Text
|
||||
|
||||
Text is a widget to show text
|
||||
## 用法
|
||||
|
||||
```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
|
||||
}
|
||||
},
|
||||
{
|
||||
"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>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## 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
92
docs/title1.md
Normal 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>
|
||||
```
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
# options
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | -------------- | ------- | -------- | ---------- | ------ |
|
||||
| text | 标题的文本内容 | String | 是 | --- | --- |
|
||||
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |
|
||||
|
||||
92
docs/title2.md
Normal file
92
docs/title2.md
Normal 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>
|
||||
```
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
# options
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | -------------- | ------- | -------- | ---------- | ------ |
|
||||
| text | 标题的文本内容 | String | 是 | --- | --- |
|
||||
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |
|
||||
|
||||
92
docs/title3.md
Normal file
92
docs/title3.md
Normal 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>
|
||||
```
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
# options
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | -------------- | ------- | -------- | ---------- | ------ |
|
||||
| text | 标题的文本内容 | String | 是 | --- | --- |
|
||||
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |
|
||||
|
||||
92
docs/title4.md
Normal file
92
docs/title4.md
Normal 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>
|
||||
```
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
# options
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | -------------- | ------- | -------- | ---------- | ------ |
|
||||
| text | 标题的文本内容 | String | 是 | --- | --- |
|
||||
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |
|
||||
|
||||
92
docs/title5.md
Normal file
92
docs/title5.md
Normal 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>
|
||||
```
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
# options
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | -------------- | ------- | -------- | ---------- | ------ |
|
||||
| text | 标题的文本内容 | String | 是 | --- | --- |
|
||||
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |
|
||||
|
||||
92
docs/title6.md
Normal file
92
docs/title6.md
Normal 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>
|
||||
```
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
# options
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | -------------- | ------- | -------- | ---------- | ------ |
|
||||
| text | 标题的文本内容 | String | 是 | --- | --- |
|
||||
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |
|
||||
|
||||
210
docs/toolbar.md
Executable file → Normal file
210
docs/toolbar.md
Executable file → Normal file
@ -1,105 +1,105 @@
|
||||
# Toolbar
|
||||
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
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../css/bricks.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="../bricks.js"></script>
|
||||
|
||||
<script>
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"widgettype":"Toolbar",
|
||||
"options":{
|
||||
"target":null,
|
||||
"orientation":"vertical",
|
||||
"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>
|
||||
```
|
||||
and the result like this:<br>
|
||||
|
||||
|
||||
## inheritance
|
||||
Toolbar inherited from BoxLayout
|
||||
|
||||
## options
|
||||
```
|
||||
{
|
||||
orientation:
|
||||
tools:
|
||||
}
|
||||
```
|
||||
### orientation
|
||||
should be 'vertical' means tool widgets will arrange in vertical or 'horizontal' means tool widgets will arrange in horizontal
|
||||
### tools:
|
||||
a array contains a list of tool objects
|
||||
|
||||
### tool object
|
||||
tool object has following properties:
|
||||
```
|
||||
{
|
||||
icon:
|
||||
name:
|
||||
label:
|
||||
removable:
|
||||
}
|
||||
```
|
||||
#### icon is a image url, it is optional, if present, the tool will show a icon before the tool's text
|
||||
#### name
|
||||
name is a itendify field for the tools, it should be unique in this tools of this options scope.
|
||||
#### 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.
|
||||
#### 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.
|
||||
|
||||
|
||||
## method
|
||||
### createTool
|
||||
createTool(toolOptions)
|
||||
|
||||
createTool create a tool widget and append the to end of the toolbar.
|
||||
|
||||
## event
|
||||
toolbar has some events other widgets can bind to, they are:
|
||||
### ready
|
||||
after constructor call finished, and all the tools built, toolbar will fire this event
|
||||
|
||||
### 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"
|
||||
.
|
||||
### remove
|
||||
after user click delete image widget, toolbar delete the tool widget from toolbar, and fire this event.
|
||||
# Toolbar
|
||||
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
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../css/bricks.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="../bricks.js"></script>
|
||||
|
||||
<script>
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"widgettype":"Toolbar",
|
||||
"options":{
|
||||
"target":null,
|
||||
"orientation":"vertical",
|
||||
"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>
|
||||
```
|
||||
and the result like this:<br>
|
||||
|
||||
|
||||
## inheritance
|
||||
Toolbar inherited from BoxLayout
|
||||
|
||||
## options
|
||||
```
|
||||
{
|
||||
orientation:
|
||||
tools:
|
||||
}
|
||||
```
|
||||
### orientation
|
||||
should be 'vertical' means tool widgets will arrange in vertical or 'horizontal' means tool widgets will arrange in horizontal
|
||||
### tools:
|
||||
a array contains a list of tool objects
|
||||
|
||||
### tool object
|
||||
tool object has following properties:
|
||||
```
|
||||
{
|
||||
icon:
|
||||
name:
|
||||
label:
|
||||
removable:
|
||||
}
|
||||
```
|
||||
#### icon is a image url, it is optional, if present, the tool will show a icon before the tool's text
|
||||
#### name
|
||||
name is a itendify field for the tools, it should be unique in this tools of this options scope.
|
||||
#### 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.
|
||||
#### 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.
|
||||
|
||||
|
||||
## method
|
||||
### createTool
|
||||
createTool(toolOptions)
|
||||
|
||||
createTool create a tool widget and append the to end of the toolbar.
|
||||
|
||||
## event
|
||||
toolbar has some events other widgets can bind to, they are:
|
||||
### ready
|
||||
after constructor call finished, and all the tools built, toolbar will fire this event
|
||||
|
||||
### 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"
|
||||
.
|
||||
### remove
|
||||
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
0
docs/toolbar.png
Executable file → Normal file
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
88
docs/toolbarNew.md
Normal file
88
docs/toolbarNew.md
Normal 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>
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## 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
52
docs/tree.md
Normal 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>
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## widget参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---------- | ---------- | ------ | -------- | --------- | ------ |
|
||||
| widgettype | 控件类型 | String | 是 | urlwidget | --- |
|
||||
| options | 控件配置项 | Object | 是 | --- | --- |
|
||||
|
||||
**options为树形结构的数据来源**
|
||||
|
||||
### options
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ---- | ------------ | ------ | -------- | ------ | ------ |
|
||||
| url | 控件数据来源 | String | 是 | --- | --- |
|
||||
|
||||
22
docs/vbox.md
Executable file → Normal file
22
docs/vbox.md
Executable file → Normal file
@ -1,11 +1,11 @@
|
||||
# VBox
|
||||
Vbox is a vertical layout widget, it layout subwidgeta in vertical direction
|
||||
## use case
|
||||
## inheritance
|
||||
VBox inherited fromm BoxLayout
|
||||
## options
|
||||
|
||||
## method
|
||||
none
|
||||
## event
|
||||
none
|
||||
# VBox
|
||||
Vbox is a vertical layout widget, it layout subwidgeta in vertical direction
|
||||
## use case
|
||||
## inheritance
|
||||
VBox inherited fromm BoxLayout
|
||||
## options
|
||||
|
||||
## method
|
||||
none
|
||||
## event
|
||||
none
|
||||
|
||||
14
docs/vfiller.md
Normal file
14
docs/vfiller.md
Normal file
@ -0,0 +1,14 @@
|
||||
# Vfiller
|
||||
|
||||
此控件为容器纵向排列时,若宽度过宽,自动填充
|
||||
|
||||
## option参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ------- | -------- | ------ | -------- | ------ | ------ |
|
||||
| baseURI | 数据路径 | String | 是 | --- | --- |
|
||||
| tooltip | 提示 | String | 是 | --- | --- |
|
||||
| css | 样式 | String | 否 | --- | --- |
|
||||
| csses | 样式 | String | 否 | --- | --- |
|
||||
|
||||
此控件为样式排列控件
|
||||
52
docs/video.md
Normal file
52
docs/video.md
Normal 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>
|
||||
|
||||
```
|
||||
|
||||
## 效果图
|
||||
|
||||
|
||||
|
||||
## 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
174
docs/videoplayer.md
Executable file → Normal file
@ -1,87 +1,87 @@
|
||||
# VideoPlayer
|
||||
|
||||
## Usage
|
||||
### play a mp4 file
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../bricks.js"></script>
|
||||
<script>
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"id":"videoplayer",
|
||||
"widgettype":"VideoPlayer",
|
||||
"options":{
|
||||
"autoplay":true,
|
||||
"url":"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
||||
"type":"mp4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
;
|
||||
const app = new BricksApp(opts);
|
||||
app.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
### play a m3u8 stream
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
|
||||
<script src="../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":"videoplayer",
|
||||
"widgettype":"VideoPlayer",
|
||||
"options":{
|
||||
"autoplay":true,
|
||||
"source":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
|
||||
"srctype":"hls"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
;
|
||||
const app = new BricksApp(opts);
|
||||
app.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
you will see ti like this
|
||||
|
||||
## options
|
||||
to be a VideoPlayer instance, you need to provide a options with contains
|
||||
following attributes
|
||||
### source
|
||||
the url of a video resouce, VideoPlayer can play mp4, m3u8 video
|
||||
### srctype
|
||||
specify the source type, should be 'mp4' or 'hls' for m3u8 'dash' for play a Dash manifest
|
||||
## play avi file
|
||||
!v[sample video](http://kimird.com/video/sample-avi-file.avi)
|
||||
## play flv file
|
||||
!v[sample video](http://kimird.com/video/sample-flv-file.flv)
|
||||
## play mkv file
|
||||
!v[sample video](http://kimird.com/video/sample-mkv-file.mkv)
|
||||
## play mov file
|
||||
!v[sample video](http://kimird.com/video/sample-mov-file.mov)
|
||||
## play mp4 file
|
||||
!v[sample video](http://kimird.com/video/sample-mp4-file.mp4)
|
||||
## play webm file
|
||||
!v[sample video](http://kimird.com/video/sample-webm-file.webm)
|
||||
## play m3u8 file
|
||||
!v[abc news TV](https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8)
|
||||
# VideoPlayer
|
||||
|
||||
## Usage
|
||||
### play a mp4 file
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script src="../bricks.js"></script>
|
||||
<script>
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"id":"videoplayer",
|
||||
"widgettype":"VideoPlayer",
|
||||
"options":{
|
||||
"autoplay":true,
|
||||
"url":"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
||||
"type":"mp4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
;
|
||||
const app = new BricksApp(opts);
|
||||
app.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
### play a m3u8 stream
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
|
||||
<script src="../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":"videoplayer",
|
||||
"widgettype":"VideoPlayer",
|
||||
"options":{
|
||||
"autoplay":true,
|
||||
"source":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
|
||||
"srctype":"hls"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
;
|
||||
const app = new BricksApp(opts);
|
||||
app.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
you will see ti like this
|
||||
|
||||
## options
|
||||
to be a VideoPlayer instance, you need to provide a options with contains
|
||||
following attributes
|
||||
### source
|
||||
the url of a video resouce, VideoPlayer can play mp4, m3u8 video
|
||||
### srctype
|
||||
specify the source type, should be 'mp4' or 'hls' for m3u8 'dash' for play a Dash manifest
|
||||
## play avi file
|
||||
!v[sample video](http://kimird.com/video/sample-avi-file.avi)
|
||||
## play flv file
|
||||
!v[sample video](http://kimird.com/video/sample-flv-file.flv)
|
||||
## play mkv file
|
||||
!v[sample video](http://kimird.com/video/sample-mkv-file.mkv)
|
||||
## play mov file
|
||||
!v[sample video](http://kimird.com/video/sample-mov-file.mov)
|
||||
## play mp4 file
|
||||
!v[sample video](http://kimird.com/video/sample-mp4-file.mp4)
|
||||
## play webm file
|
||||
!v[sample video](http://kimird.com/video/sample-webm-file.webm)
|
||||
## play m3u8 file
|
||||
!v[abc news TV](https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8)
|
||||
|
||||
101
docs/widgets.md
101
docs/widgets.md
@ -1,49 +1,52 @@
|
||||
# Bricks widgets
|
||||
## Accordion
|
||||
## AudioPlayer
|
||||
## BlankIcon
|
||||
## BoxLayout
|
||||
[boxlayout](BoxLayout.md)
|
||||
## Button
|
||||
## DataGrid
|
||||
## EditableTree
|
||||
## Error
|
||||
## Form
|
||||
## HBox
|
||||
[hbox](HBox.md)
|
||||
|
||||
## HFiller
|
||||
## HScrollPanel
|
||||
## Icon
|
||||
## Image
|
||||
[image](image.md)
|
||||
## MarkdownViewer
|
||||
(markdown viewer](markdownviewer.md)
|
||||
## Menu
|
||||
## Message
|
||||
## MiniForm
|
||||
## Modal
|
||||
## ModalForm
|
||||
## MultipleStateImage
|
||||
## PopupForm
|
||||
## TabForm
|
||||
## TabPanel
|
||||
## Text
|
||||
[text](text.md)
|
||||
## Title1
|
||||
## Title2
|
||||
## Title3
|
||||
## Title4
|
||||
## Title5
|
||||
## Title6
|
||||
## Toolbar
|
||||
[Toolbar](toolbar.md)
|
||||
## Tree
|
||||
## VBox
|
||||
[VBox](vbox.md)
|
||||
## VFiller
|
||||
## VScrollPanel
|
||||
## Video
|
||||
## VideoPlayer
|
||||
[VideoPlayer](videoplayer.md)
|
||||
## XTerminal
|
||||
# Bricks widgets
|
||||
## Accordion (完成)
|
||||
## AudioPlayer (完成)
|
||||
## BlankIcon (完成)
|
||||
## BoxLayout
|
||||
[boxlayout](BoxLayout.md)
|
||||
|
||||
## Button (完成)
|
||||
## DataGrid (完成)
|
||||
## EditableTree (完成)
|
||||
## Error
|
||||
## Form (完成)
|
||||
## HBox (完成)
|
||||
[hbox](HBox.md)
|
||||
|
||||
## HFiller (完成)
|
||||
## HScrollPanel
|
||||
## Icon (完成)
|
||||
## Image (完成)
|
||||
[image](image.md)
|
||||
|
||||
## MarkdownViewer (完成)
|
||||
(markdown viewer](markdownviewer.md)
|
||||
## Menu
|
||||
## Message (完成)
|
||||
## MiniForm (完成)
|
||||
## Modal (完成)
|
||||
## ModalForm
|
||||
## MultipleStateImage
|
||||
## PopupForm
|
||||
## TabForm
|
||||
## TabPanel (完成)
|
||||
## Text (完成)
|
||||
[text](text.md)
|
||||
## Title1 (完成)
|
||||
## Title2 (完成)
|
||||
## Title3 (完成)
|
||||
## Title4 (完成)
|
||||
## Title5 (完成)
|
||||
## Title6 (完成)
|
||||
## Toolbar (完成)
|
||||
[Toolbar](toolbar.md)
|
||||
## Tree (完成)
|
||||
## VBox (完成)
|
||||
[VBox](vbox.md)
|
||||
|
||||
## VFiller (完成)
|
||||
## VScrollPanel
|
||||
## Video (完成)
|
||||
## VideoPlayer (与video一样)
|
||||
[VideoPlayer](videoplayer.md)
|
||||
## XTerminal(没有js文件)
|
||||
|
||||
4
xterm/dev.xterm
Normal file
4
xterm/dev.xterm
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"host":"dev.kaiyuancloud.cn",
|
||||
"username":"ymq"
|
||||
}
|
||||
6
xterm/glib.cc.ui
Normal file
6
xterm/glib.cc.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype":"Wterm",
|
||||
"options":{
|
||||
"ws_url":"{{websocket_url('./glib.cc.xterm')}}"
|
||||
}
|
||||
}
|
||||
5
xterm/glib.cc.xterm
Normal file
5
xterm/glib.cc.xterm
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"host":"glib.cc",
|
||||
"username":"ceni",
|
||||
"port":10022
|
||||
}
|
||||
@ -13,9 +13,9 @@ https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js
|
||||
const opts =
|
||||
{
|
||||
"widget": {
|
||||
"widgettype":"Wterm",
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"ws_url":"ws://localhost/test/dev.xterm"
|
||||
"url":"{{entire_url('wterm.ui')}}"
|
||||
}
|
||||
}
|
||||
}
|
||||
6
xterm/kymoz.com.ui
Normal file
6
xterm/kymoz.com.ui
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"widgettype":"Wterm",
|
||||
"options":{
|
||||
"ws_url":"{{websocket_url('./kymoz.com.xterm')}}"
|
||||
}
|
||||
}
|
||||
4
xterm/kymoz.com.xterm
Normal file
4
xterm/kymoz.com.xterm
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"host":"kymoz.com",
|
||||
"username":"ymq"
|
||||
}
|
||||
88
xterm/wterm.ui
Normal file
88
xterm/wterm.ui
Normal 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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user