bugfix
This commit is contained in:
yumoqing
parent
b80b7fde5f
commit
0ae53445e0
@ -1,5 +1,11 @@
|
||||
# bricks文档
|
||||
像搭积木一样的编写前端应用，bricks希望提供开发者所需的底层显示控件，
|
||||
开发应用时采用简单的组装和插拔方式完成应用的开发, bricks的API为json格式
|
||||
不需要应用开发者掌握前端开发技术。
|
||||
|
||||
使用bricks开发应用的好处
|
||||
* 质量和性能可控，开发者开发的应用质量和性能依赖bricks提供的提供底层控件。
|
||||
* 简单的开发方式，开发者以编写[json数据文件](descjson.md)的形式开发前端应用
|
||||
## [bricks简介](brief.md)
|
||||
## [bricks安装](install.md)
|
||||
## [控件介绍](widgets.md)
|
||||
|
||||
45
docs/cn/widgets.md
Normal file
45
docs/cn/widgets.md
Normal file
@ -0,0 +1,45 @@
|
||||
# 控件列表
|
||||
Bricks内置许多的显示控件，所有显示控件都继承自JsWidget，容器控件Layout几就继承自JsWidget，其他的容器HBox， VBox继承自Layout
|
||||
|
||||
# 控件继承树
|
||||
|
||||
# 控件清单
|
||||
* [JsWidget](widgets/jswidget.md)： 祖先控件，对应于<div>元素
|
||||
* [Accordion](widgets/accordion.md)：可折叠控件
|
||||
* [AudioPlayer](widgets/audioplayer.md)：音频播放器
|
||||
* [Button](widgets/button.md)：按钮控件
|
||||
* [DataGrid](widgets/datagrid.md)：数据表格控件
|
||||
* [Form](widgets/form.md)：输入表单控件
|
||||
* [Image](widgets/image.md)：图片控件
|
||||
* [Icon](widgets/icon.md)：图标控件
|
||||
* [BlankIcon](widgets/blackicon.js)：空白图标控件
|
||||
* [HBox](widgets/hbox.md)：横向布局器
|
||||
* [VBox](widgets/vbox.md)：纵向布局器
|
||||
* [HFiller](widgets/hfiller.md)：横向填充控件
|
||||
* [VFiller](widgets/vfiller.md)：纵向填充控件
|
||||
* [MarkdownViewer](widgets/markdonwviewer.md)：markdown文档显示控件
|
||||
* [Menu](widgets/menu.md)：菜单控件
|
||||
* [Message](widgets/message.md)：消息控件
|
||||
* [Error](widgets/error.md)：错误信息控件
|
||||
* [PopupForm](widgets/popupform.md)：弹出表单控件
|
||||
* [MiniForm](widgets/meniform.md)：多选单一输入表单
|
||||
* [Modal](widgets/modal.md)：独占控件
|
||||
* [ModalForm](widgets/modalform.md)：独占表单
|
||||
* [MultipleStateImage](widgets/multiplestateimage.md)：多状态图像显示控件
|
||||
* [ScrollPanel](widgets/scrollpanel.md)：滚动面板
|
||||
* [VScrollPanel](widgets/vscrollpanel.md)：纵向滚动面板
|
||||
* [HScrollPanel](widgets/hscrollpanel.md)：横向滚动面板
|
||||
* [TabPanel][widgets/tabpanel.md)：标签面板控件
|
||||
* [Toolbar](widgets/toolbar.md)：工具条控件
|
||||
* [Tree](widgets/tree.md)：树状显示控件
|
||||
* [EditableTree](widgets/editabletree.md)：可编辑树状显示控件
|
||||
* [VideoPlayer](widgets/videoplayer.md)：视频播放器控件
|
||||
* [Text](widgets/text.md)：正文控件
|
||||
* [Title1](widgets/title1.md)：标题1控件
|
||||
* [Title2](widgets/title2.md)：标题2控件
|
||||
* [Title3](widgets/title3.md)：标题3控件
|
||||
* [Title4](widgets/title4.md)：标题4控件
|
||||
* [Title5](widgets/title5.md)：标题5控件
|
||||
* [Title6](widgets/title6.md)：标题6控件
|
||||
|
||||
#
|
||||
21
docs/cn/widgets/BoxLayout.md
Normal file
21
docs/cn/widgets/BoxLayout.md
Normal file
@ -0,0 +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
|
||||
43
docs/cn/widgets/README.md
Normal file
43
docs/cn/widgets/README.md
Normal file
@ -0,0 +1,43 @@
|
||||
# Bricks documentation
|
||||
[中文文档请看这里](cn/README.md)
|
||||
|
||||
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/cn/widgets/accordion.md
Normal file
94
docs/cn/widgets/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/cn/widgets/audio.md
Normal file
55
docs/cn/widgets/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/cn/widgets/blankIcon.md
Normal file
47
docs/cn/widgets/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/cn/widgets/brickindex.md
Normal file
16
docs/cn/widgets/brickindex.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/cn/widgets/button.md
Normal file
118
docs/cn/widgets/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 | 是 | --- | --- |
|
||||
|
||||
44
docs/cn/widgets/docs.md
Normal file
44
docs/cn/widgets/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/cn/widgets/editabletree.md
Normal file
50
docs/cn/widgets/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/cn/widgets/error.md
Normal file
9
docs/cn/widgets/error.md
Normal file
@ -0,0 +1,9 @@
|
||||
# error
|
||||
|
||||
# 用法
|
||||
|
||||
```html
|
||||
```
|
||||
|
||||
|
||||
|
||||
377
docs/cn/widgets/form.md
Normal file
377
docs/cn/widgets/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 | --- |
|
||||
36
docs/cn/widgets/hbox.md
Normal file
36
docs/cn/widgets/hbox.md
Normal file
@ -0,0 +1,36 @@
|
||||
# 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等**
|
||||
|
||||
14
docs/cn/widgets/hfiller.md
Normal file
14
docs/cn/widgets/hfiller.md
Normal file
@ -0,0 +1,14 @@
|
||||
# Hfiller
|
||||
|
||||
此控件为容器横向排列时,若宽度过宽,自动填充
|
||||
|
||||
## option参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ------- | -------- | ------ | -------- | ------ | ------ |
|
||||
| baseURI | 数据路径 | String | 是 | --- | --- |
|
||||
| tooltip | 提示 | String | 是 | --- | --- |
|
||||
| css | 样式 | String | 否 | --- | --- |
|
||||
| csses | 样式 | String | 否 | --- | --- |
|
||||
|
||||
此控件为样式排列控件
|
||||
55
docs/cn/widgets/icon.md
Normal file
55
docs/cn/widgets/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%'**
|
||||
55
docs/cn/widgets/image.md
Normal file
55
docs/cn/widgets/image.md
Normal file
@ -0,0 +1,55 @@
|
||||
# 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 | 是 | 百分比数值 | --- |
|
||||
|
||||
1
docs/cn/widgets/index.md
Normal file
1
docs/cn/widgets/index.md
Normal file
@ -0,0 +1 @@
|
||||
README.md
|
||||
79
docs/cn/widgets/input.md
Normal file
79
docs/cn/widgets/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;
|
||||
|
||||
|
||||
|
||||
16
docs/cn/widgets/layout.md
Normal file
16
docs/cn/widgets/layout.md
Normal file
@ -0,0 +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
|
||||
58
docs/cn/widgets/markdownviewer.md
Normal file
58
docs/cn/widgets/markdownviewer.md
Normal file
@ -0,0 +1,58 @@
|
||||
# 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/cn/widgets/message.md
Normal file
143
docs/cn/widgets/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/cn/widgets/miniform.md
Normal file
135
docs/cn/widgets/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/cn/widgets/modal.md
Normal file
78
docs/cn/widgets/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:在屏幕的右下角
|
||||
|
||||
|
||||
7
docs/cn/widgets/pw.md
Normal file
7
docs/cn/widgets/pw.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Widget Name
|
||||
description of the Widget
|
||||
## use case
|
||||
## inheritance
|
||||
## options
|
||||
## method
|
||||
## event
|
||||
113
docs/cn/widgets/tab.md
Normal file
113
docs/cn/widgets/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
|
||||
|
||||
153
docs/cn/widgets/text.md
Normal file
153
docs/cn/widgets/text.md
Normal file
@ -0,0 +1,153 @@
|
||||
# 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/cn/widgets/title1.md
Normal file
92
docs/cn/widgets/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/cn/widgets/title2.md
Normal file
92
docs/cn/widgets/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/cn/widgets/title3.md
Normal file
92
docs/cn/widgets/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/cn/widgets/title4.md
Normal file
92
docs/cn/widgets/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/cn/widgets/title5.md
Normal file
92
docs/cn/widgets/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/cn/widgets/title6.md
Normal file
92
docs/cn/widgets/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 | --- |
|
||||
|
||||
105
docs/cn/widgets/toolbar.md
Normal file
105
docs/cn/widgets/toolbar.md
Normal file
@ -0,0 +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.
|
||||
88
docs/cn/widgets/toolbarNew.md
Normal file
88
docs/cn/widgets/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/cn/widgets/tree.md
Normal file
52
docs/cn/widgets/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 | 是 | --- | --- |
|
||||
|
||||
11
docs/cn/widgets/vbox.md
Normal file
11
docs/cn/widgets/vbox.md
Normal file
@ -0,0 +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
|
||||
14
docs/cn/widgets/vfiller.md
Normal file
14
docs/cn/widgets/vfiller.md
Normal file
@ -0,0 +1,14 @@
|
||||
# Vfiller
|
||||
|
||||
此控件为容器纵向排列时,若宽度过宽,自动填充
|
||||
|
||||
## option参数说明
|
||||
|
||||
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||
| ------- | -------- | ------ | -------- | ------ | ------ |
|
||||
| baseURI | 数据路径 | String | 是 | --- | --- |
|
||||
| tooltip | 提示 | String | 是 | --- | --- |
|
||||
| css | 样式 | String | 否 | --- | --- |
|
||||
| csses | 样式 | String | 否 | --- | --- |
|
||||
|
||||
此控件为样式排列控件
|
||||
52
docs/cn/widgets/video.md
Normal file
52
docs/cn/widgets/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 | --- |
|
||||
87
docs/cn/widgets/videoplayer.md
Normal file
87
docs/cn/widgets/videoplayer.md
Normal file
@ -0,0 +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)
|
||||
52
docs/cn/widgets/widgets.md
Normal file
52
docs/cn/widgets/widgets.md
Normal file
@ -0,0 +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 (与video一样)
|
||||
[VideoPlayer](videoplayer.md)
|
||||
## XTerminal(没有js文件)
|
||||
@ -1,45 +0,0 @@
|
||||
# 控件列表
|
||||
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控件
|
||||
|
||||
#
|
||||
Loading…
Reference in New Issue
Block a user