forked from fanruan/fineui
Browse Source
* commit '5e8a2eca63a2fa113892797cc9553bf99e80595e': 基础控件，抽象控件fineUI文档的编写 add branch_tree css编译 update updatees6
guy
7 years ago
38 changed files with 1336 additions and 210 deletions
@ -1,8 +1,8 @@ |
|||||||
.bi-page-table-cell { |
.bi-page-table-cell { |
||||||
-webkit-user-select: initial; |
-webkit-user-select: text; |
||||||
-khtml-user-select: initial; |
-khtml-user-select: text; |
||||||
-moz-user-select: initial; |
-moz-user-select: text; |
||||||
-ms-user-select: initial; |
-ms-user-select: text; |
||||||
-o-user-select: initial; |
-o-user-select: text; |
||||||
user-select: initial; |
user-select: text; |
||||||
} |
} |
||||||
|
|||||||
@ -1,5 +1,5 @@ |
|||||||
@import "../../bibase"; |
@import "../../bibase"; |
||||||
|
|
||||||
.bi-page-table-cell { |
.bi-page-table-cell { |
||||||
.user-select(initial); |
.user-select-enable(); |
||||||
} |
} |
||||||
@ -1,2 +1,72 @@ |
|||||||
# button |
# bi.button |
||||||
|
|
||||||
|
## 文字类型的按钮,基类[BI.BasicButton](/core/basicButton.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.button', |
||||||
|
element: "#wrapper", |
||||||
|
text: '一般按钮', |
||||||
|
level: 'common', |
||||||
|
height: 30 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | | 10 | |
||||||
|
| vgap | 效果相当于文本框上下padding值 | number | | 0 | |
||||||
|
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||||
|
| tgap |效果相当于文本框top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
| width | 宽度 | number | | | |
||||||
|
| height | 高度 | number | | | | |
||||||
|
|
||||||
|
|
||||||
|
##### 高级属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| level |按钮类型 | string| common,success,warning,ignore | common | |
||||||
|
| text|按钮文本内容 | string| | | |
||||||
|
| disabled|灰化 | boolean| true,false | | |
||||||
|
| minWidth | 最小宽度，如果block/clear中某一项为true，此项值为0，否则为90 | number | | 90 | |
||||||
|
| shadow | | boolean| true,false | | |
||||||
|
| isShadowShowingOnSelected|选中状态下是否显示阴影 | boolean| true,false | true | |
||||||
|
| readonly | 是否只读 | boolean | true,false | true | |
||||||
|
| iconClass | 图标类型 | string| | " "| |
||||||
|
| block| 是否块状显示，即不显示边框，没有最小宽度的限制 | boolean| true,false | false | |
||||||
|
| clear| 是否去掉边框和背景 |boolean| true,false | false | |
||||||
|
| textAlign | 文字布局 | string | left,center,right | cneter | |
||||||
|
| whiteSpace | 元素内的空白处理方式 | string | normal,nowrap | nowrap| |
||||||
|
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | false | |
||||||
|
| textWidth| 按钮文本宽度 | number| | null | |
||||||
|
| textHeight | 按钮文本高度 | number| | null | |
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| doRedMark | 文本标红 | — | |
||||||
|
| unRedMark | 取消文本标红| —| |
||||||
|
| doHighLight | 文本高亮 | —| |
||||||
|
| unHighLight | 取消文本高亮 | —| |
||||||
|
| setText| 设置文本值 | 需要设置的文本值text| |
||||||
|
| doClick | 点击事件 | —| |
||||||
|
| destroy | 销毁事件 |— | |
||||||
|
| setValue | 设置文本值 | 需要设置的文本值text | |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,39 @@ |
|||||||
# icon_button |
# bi.icon_button |
||||||
|
|
||||||
|
## 图标button,基类[BI.BasicButton](/core/basicButton.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/g52u14ay/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.icon_button', |
||||||
|
cls: "close-ha-font", |
||||||
|
width: 20, |
||||||
|
height: 20 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| iconWidth | 图标宽度 | number| | null | |
||||||
|
| iconHeight | 图标高度 | number| | null | |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| doClick | 点击事件 | —| |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,49 @@ |
|||||||
# image_button |
# bi.image_button |
||||||
|
|
||||||
|
## 图片的button,基类[BI.BasicButton](/core/basicButton.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/yc0g9gLw/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.image_button', |
||||||
|
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128", |
||||||
|
width: 100, |
||||||
|
height: 100 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| src |图片路径 |string | |" " | |
||||||
|
| iconWidth | 图标宽度 | number/string| | "100%" | |
||||||
|
| iconHeight | 图标高度 | number/string | | "100%"| |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| doClick | 点击事件 | —| |
||||||
|
| setWidth | 设置按钮宽度| 宽度width | |
||||||
|
| setHeight | 设置按钮高度 | 高度height| |
||||||
|
| setImageWidth | 设置图片宽度| 宽度width | |
||||||
|
| setImageHeight| 设置图片高度| 高度height| |
||||||
|
| getImageWidth | 获取图片宽度| —| |
||||||
|
| getImageHeight | 获取图片高度| —| |
||||||
|
| setSrc| 设置图片路径| src | |
||||||
|
| getSrc |获取图片路径| — | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,58 @@ |
|||||||
# text_button |
# bi.text_button |
||||||
|
|
||||||
|
## 可以点击的一行文字,基类[BI.BasicButton](/core/basicButton.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/5p99L39q/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.text_button', |
||||||
|
text: '文字按钮', |
||||||
|
height: 30 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | | 10 | |
||||||
|
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||||
|
| text|按钮文本内容 | string| | | |
||||||
|
| textWidth| 按钮文本宽度 | number| | null | |
||||||
|
| textHeight | 按钮文本高度 | number| | null | |
||||||
|
|
||||||
|
|
||||||
|
##### 高级属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| py | | string| | " " | |
||||||
|
| textAlign | 文字布局 | string | left,center,right | cneter | |
||||||
|
| whiteSpace | 元素内的空白处理方式 | string | normal,nowrap | nowrap| |
||||||
|
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | false | |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| doRedMark | 文本标红 | — | |
||||||
|
| unRedMark | 取消文本标红| —| |
||||||
|
| doHighLight | 文本高亮 | —| |
||||||
|
| unHighLight | 取消文本高亮 | —| |
||||||
|
| setText| 设置文本值 | 需要设置的文本值text| |
||||||
|
| doClick | 点击事件 | —| |
||||||
|
| setValue | 设置文本值 | 需要设置的文本值text | |
||||||
|
| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,79 @@ |
|||||||
# canvas |
# bi.canvas |
||||||
|
|
||||||
|
## canvas绘图,基类[BI.Widget](/core/widget.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
var canvas = BI.createWidget({ |
||||||
|
type: "bi.complex_canvas", |
||||||
|
width: 500, |
||||||
|
height: 600 |
||||||
|
}); |
||||||
|
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, { |
||||||
|
offset: 20, |
||||||
|
strokeStyle: "red", |
||||||
|
lineWidth: 2 |
||||||
|
}); |
||||||
|
|
||||||
|
canvas.branch(220, 155, 120, 110, 150, 200, { |
||||||
|
offset: 40 |
||||||
|
}); |
||||||
|
|
||||||
|
canvas.stroke(); |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: this, |
||||||
|
items: [{ |
||||||
|
el: canvas, |
||||||
|
left: 100, |
||||||
|
top: 50 |
||||||
|
}] |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| add | 添加对象到json数组 | json | |
||||||
|
| path | 绘制路径 | pathString | |
||||||
|
| image | 绘制图片 | (src,x,y,w,h)分别表示图片路径，绘制的原点横、纵坐标，宽、高 | |
||||||
|
| rect | 绘制矩形 | (x,y,w,h,r)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及矩形的圆角border-radius大小| |
||||||
|
| circle | 绘制圆形 | (x,y,r)分别表示原点的横坐标，纵坐标，以及半径 | |
||||||
|
| ellipse | 绘制椭圆 |(x,y,rx,ry)分别表示原点的横、纵坐标，以及水平半径和垂直半径| |
||||||
|
| text | 绘制文本 | (x,y,text)分别表示绘制的原点横、纵坐标以及要绘制的文本内容| |
||||||
|
| print | 根据制定参数打印出路径 | (x, y, string, font, size, origin, letter_spacing, line_spacing) | |
||||||
|
| setStart | 开始绘制 | | |
||||||
|
| setFinish | 结束绘制 | | |
||||||
|
| setSize | 设置画布尺寸 | (width,height)分别表示画布宽高| |
||||||
|
| setViewBox | 设置画布可视区域 | (x,y,width,height,fit)分别表示可视区域原点坐标以及可视区域宽高，以及是否根据可视区域进行调整 | |
||||||
|
| getById | 根据id返回元素 | id | |
||||||
|
| getElementByPoint | 获根据给定的点坐标返回元素 | (x,y)| |
||||||
|
| getElementsByPoint | 获根据给定的点坐标返回元素 | (x,y) | |
||||||
|
| getFont | 通过给定的参数在已注册的字体中找到字体对象 | (family, weight, style, stretch) | |
||||||
|
| set | 绘制形状的集合 | | |
||||||
|
| remove | 设置总页数 | pages | |
||||||
|
| clear | 判断是否有上一页 | v | |
||||||
|
|
||||||
|
|
||||||
|
| line | 绘制线段| (x0, y0, x1, y1) | |
||||||
|
| rect | 绘制矩形 | (x,y,w,h,color)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及绘制的颜色| |
||||||
|
| circle | 绘制圆形 | (x, y, radius, color)分别表示原点的横坐标，纵坐标，半径以及颜色 | |
||||||
|
| hollow | 填充中空的路径 | | |
||||||
|
| solid | 填充实心的路径 | | |
||||||
|
| gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) | |
||||||
|
| reset | 重置画布 | —| |
||||||
|
| stroke | 绘制 | callback | |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,53 @@ |
|||||||
# code_editor |
# bi.code_editor |
||||||
|
|
||||||
|
## 文本框,基类[BI.Single](/core/single.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.code_editor", |
||||||
|
cls: "mvc-border", |
||||||
|
width: 600, |
||||||
|
height: 400 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| watermark | 文本框placeholder | string | | " " | |
||||||
|
| readOnly | 是否只读 | boolean | true,false | false| |
||||||
|
| lineHeight | 行高 | number|— | 2| |
||||||
|
| value | 文本框值| string| | " "| |
||||||
|
| paramFormatter| 参数显示值构造函数 | function| | value | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| insertParam | 插入参数 | param | |
||||||
|
| insertString | 插入字符串 | str| |
||||||
|
| getValue | 获取文本框值|—| |
||||||
|
| setValue | 设置文本框值|value| |
||||||
|
| focus | 文本框获取焦点| — | |
||||||
|
| blur | 文本框失焦|—| |
||||||
|
| setStyle | 设置文本样式 |需要设置的文本标签样式style,例{"color":"#000"} | |
||||||
|
| getStyle | 获取文本样式 |— | |
||||||
|
| refresh | 刷新文本框 | —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,71 @@ |
|||||||
# editor |
# bi.editor |
||||||
|
|
||||||
|
## 文本框,基类[BI.Single](/core/single.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.editor", |
||||||
|
element: "#wrapper", |
||||||
|
errorText: "字段不可重名!", |
||||||
|
width: 200, |
||||||
|
height: 30 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| hgap | 效果相当于文本框左右padding值 | number | | 4 | |
||||||
|
| vgap | 效果相当于文本框上下padding值 | number | | 2 | |
||||||
|
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||||
|
| tgap |效果相当于文本框top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||||
|
| validationChecker | 输入较验函数 |function| | | |
||||||
|
| quitChecker | 是否允许退出编辑函数 | function | | | |
||||||
|
| mouseOut | | boolean | true,false | false | |
||||||
|
| allowBlank | 是否允许空值 | boolean | true,false | false | |
||||||
|
| watermark | 文本框placeholder | string | | " " | |
||||||
|
| errorText | 错误提示 | string/function | | " "| |
||||||
|
| tipType| 提示类型 | string |success,warning | "warning"| |
||||||
|
| inputType| 输入框类型| string| | "text"| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| setErrorText | 设置错误文本 | text | |
||||||
|
| getErrorText | 获取错误文本 | —| |
||||||
|
| setErrorVisible | 设置错误文本可见|b | |
||||||
|
| disableError | 设置error不可用|— | |
||||||
|
| enableError| 设置error可用| —| |
||||||
|
| disableWaterMark | 设置文本框placeholder不可用| —| |
||||||
|
| enableWaterMark | 恢复文本框placeholder可用| — | |
||||||
|
| focus | 文本框获取焦点| — | |
||||||
|
| blur | 文本框失焦|—| |
||||||
|
| selectAll | 选中文本框文本| —| |
||||||
|
| onKeyDown |按键事件|key| |
||||||
|
| setValue | 设置文本框值|value| |
||||||
|
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||||
|
| resetLastValidValue| 重置文本框最后一次输入的有效值|value| |
||||||
|
| getValue | 获取文本框值|—| |
||||||
|
| isEditing | 文本框是否处于编辑状态|—| |
||||||
|
| isValid | 文本框值是否有效|—| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,57 @@ |
|||||||
# formula_editor |
# bi.formula_editor |
||||||
|
|
||||||
|
## 公式编辑控件,基类[BI.Single](/core/single.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type : 'bi.formula_editor', |
||||||
|
width : 300, |
||||||
|
height : 200, |
||||||
|
value : 'SUM(C5, 16, 26)' |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| value | 文本域的值 | string | | " "| |
||||||
|
| watermark | 文本框placeholder| string | | " " | |
||||||
|
| fieldTextValueMap | | string| | {}| |
||||||
|
| showHint | | | | 2 | |
||||||
|
| lineHeight | 行高 | number | | 2| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| disableWaterMark | 设置文本框placeholder不可用 | — | |
||||||
|
| focus | 文本框获取焦点| — | |
||||||
|
| insertField | 添加字段 | field | |
||||||
|
| insertFunction | | fn | |
||||||
|
| insertOperator | | op| |
||||||
|
| setFunction | | v| |
||||||
|
| insertString | 插入字符串 | str| |
||||||
|
| getFormulaString | |— | |
||||||
|
| getUsedFields | | — | |
||||||
|
| getCheckString | | — | |
||||||
|
| getValue | 获取文本框值|—| |
||||||
|
| setValue | 设置文本框值|value| |
||||||
|
| setFieldTextValueMap | | fieldTextValueMap | |
||||||
|
| refresh | 刷新文本框 | —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,46 @@ |
|||||||
# multifile_editor |
# bi.multifile_editor |
||||||
|
|
||||||
|
## 多文件,基类[BI.Single](/core/single.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.multifile_editor", |
||||||
|
width: 400, |
||||||
|
height: 300 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| multiple | 是否支持多选 | boolean | true,false| false | |
||||||
|
| maxSize | 最大可选数量 | number | | -1 | |
||||||
|
| accept | | string | | " "| |
||||||
|
| url | 文件路径 | string | | " "| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| select | 选择文件 | —| |
||||||
|
| getValue | 获取文件名称 | —| |
||||||
|
| upload | 文件上传| —| |
||||||
|
| reset | 重置| —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,45 @@ |
|||||||
# textarea_editor |
# bi.textarea_editor |
||||||
|
|
||||||
|
## 文本域,基类[BI.Single](/core/single.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.textarea_editor", |
||||||
|
width: 400, |
||||||
|
height: 300 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| value | 文本域的值 | string | | " "| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| getValue | 获取文本域值|—| |
||||||
|
| setValue | 设置文本域值|value| |
||||||
|
| setStyle | 设置文本域样式 |需要设置的文本域样式style,例{"color":"#000"} | |
||||||
|
| getStyle | 获取文本域样式 |— | |
||||||
|
| focus | 文本域获取焦点| — | |
||||||
|
| blur | 文本域失焦|—| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,66 @@ |
|||||||
# pager |
# bi.pager |
||||||
|
|
||||||
|
## 分页控件,基类[BI.Widget](/core/widget.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.pager", |
||||||
|
height: 50, |
||||||
|
pages: 18, |
||||||
|
groups: 5, |
||||||
|
curr: 6, |
||||||
|
first: "首页", |
||||||
|
last: "尾页" |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| behaviors | | object| | {}| |
||||||
|
| layouts | 布局| array | | {type:"bi.horizontal",hgap:10,vgap:0} | |
||||||
|
| dynamicShow | 是否动态显示上一页、下一页、首页、尾页， 若为false，则指对其设置使能状态 | boolean| true,false | true| |
||||||
|
| dynamicShowFirstLast | 是否动态显示首页、尾页,dynamicShow为false时生效| boolean| true,false | false | |
||||||
|
| dynamicShowPrevNext | 是否动态显示上一页、下一页,dynamicShow为false时生效 | boolean| true,false | false| |
||||||
|
| pages | 是否显示总页数 | boolean| true,false|false| |
||||||
|
| curr | 初始化当前页 | function | | function(){return 1;}| |
||||||
|
| groups | 连续显示分页数 | number | | 0 | |
||||||
|
| jump | 页数跳转| function | | | |
||||||
|
| first | 是否显示首页 | boolean | true,false| false| |
||||||
|
| last | 是否显示尾页 | boolean | true,false| false| |
||||||
|
| prev | 上一页 | string,object | |"上一页" | |
||||||
|
| next | 下一页 | sting,object| | "下一页" | |
||||||
|
| firstPage | 第一页 | number| | 1 | |
||||||
|
| lastPage | 最后一页,在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 | function | | function(){ return 1;}| |
||||||
|
| hasPrev | 判断是否有上一页,pages不可用时有效 | function | | — | |
||||||
|
| hasNext | 判断是否有下一页,pages不可用时有效 | function | | — | |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| getCurrentPage | 获取当前页码 | —| |
||||||
|
| setAllPages | 设置总页数 | pages | |
||||||
|
| hasPrev | 判断是否有上一页 | v | |
||||||
|
| hasNext | 判断是否有下一页 | v | |
||||||
|
| setValue | 设置当前页码 | v | |
||||||
|
| getValue | 获取当前页码 | | |
||||||
|
| attr | 设置属性 | key,value | |
||||||
|
| populate | | —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,71 @@ |
|||||||
# svg |
# bi.svg |
||||||
|
|
||||||
|
## svg绘图,基类[BI.Widget](/core/widget.md) |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
var svg = BI.createWidget({ |
||||||
|
type: "bi.svg", |
||||||
|
width: 500, |
||||||
|
height: 600 |
||||||
|
}); |
||||||
|
|
||||||
|
var circle = svg.circle(100, 100, 10); |
||||||
|
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); |
||||||
|
|
||||||
|
var el = svg.rect(10, 200, 300, 200); |
||||||
|
el.transform("t100,100r45t-100,0"); |
||||||
|
|
||||||
|
svg.path("M10,10L50,50M50,10L10,50") |
||||||
|
.attr({stroke: "red"}); |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: this, |
||||||
|
items: [{ |
||||||
|
el: svg, |
||||||
|
left: 100, |
||||||
|
top: 50 |
||||||
|
}] |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| add | 添加对象到json数组 | json | |
||||||
|
| path | 绘制路径 | pathString | |
||||||
|
| image | 绘制图片 | (src,x,y,w,h)分别表示图片路径，绘制的原点横、纵坐标，宽、高 | |
||||||
|
| rect | 绘制矩形 | (x,y,w,h,r)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及矩形的圆角border-radius大小| |
||||||
|
| circle | 绘制圆形 | (x,y,r)分别表示原点的横坐标，纵坐标，以及半径 | |
||||||
|
| ellipse | 绘制椭圆 |(x,y,rx,ry)分别表示原点的横、纵坐标，以及水平半径和垂直半径| |
||||||
|
| text | 绘制文本 | (x,y,text)分别表示绘制的原点横、纵坐标以及要绘制的文本内容| |
||||||
|
| print | 根据制定参数打印出路径 | (x, y, string, font, size, origin, letter_spacing, line_spacing) | |
||||||
|
| setStart | 开始绘制 | | |
||||||
|
| setFinish | 结束绘制 | | |
||||||
|
| setSize | 设置画布尺寸 | (width,height)分别表示画布宽高| |
||||||
|
| setViewBox | 设置画布可视区域 | (x,y,width,height,fit)分别表示可视区域原点坐标以及可视区域宽高，以及是否根据可视区域进行调整 | |
||||||
|
| getById | 根据id返回元素 | id | |
||||||
|
| getElementByPoint | 获根据给定的点坐标返回元素 | (x,y)| |
||||||
|
| getElementsByPoint | 获根据给定的点坐标返回元素 | (x,y) | |
||||||
|
| getFont | 通过给定的参数在已注册的字体中找到字体对象 | (family, weight, style, stretch) | |
||||||
|
| set | 绘制形状的集合 | | |
||||||
|
| remove | 设置总页数 | pages | |
||||||
|
| clear | 判断是否有上一页 | v | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,68 @@ |
|||||||
# adaptive_table |
# bi.adaptive_table |
||||||
|
|
||||||
|
### 自适应宽度的表格 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/pbgnjeg0/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.adaptive_table", |
||||||
|
element: 'body', |
||||||
|
width: 600, |
||||||
|
height: 500, |
||||||
|
isResizeAdapt: true, |
||||||
|
isNeedResize: true, |
||||||
|
isNeedFreeze: true, |
||||||
|
freezeCols: [0, 1], |
||||||
|
columnSize: [50,50,200,250,400], |
||||||
|
header: [], |
||||||
|
items: [], |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ---------------- | ------------- | -------------------- | ----------------- | |
||||||
|
| isNeedResize | 是否可改变列大小 | bool | true | |
||||||
|
| isNeedFreeze | 是否需要冻结表头 | bool | false | |
||||||
|
| freezeCols | 冻结的列 | array | [] | |
||||||
|
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||||
|
| mergeCols | 合并的单元格列号 | array | [] | |
||||||
|
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||||
|
| columnSize | 单元格宽度集合 | array | [] | |
||||||
|
| minColumnSize | 最小列宽 | array | [] | |
||||||
|
| maxColumnSize | 最大列宽 | array | [] | |
||||||
|
| headerRowSize | 表头高度 | number | 25 | |
||||||
|
| rowSize | 普通单元格高度 | number | 25 | |
||||||
|
| regionColumnSize | 列项间的 | array | [] | |
||||||
|
| header | 表头 | array | [] | |
||||||
|
| items | 子组件 | array | [] | |
||||||
|
| crossHeader | 交叉表头 | array | [] | |
||||||
|
| crossItems | 交叉项 | array | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| ------------------------ | ----------- | ------------------ | |
||||||
|
| setWidth | 设置宽度 | width: 宽度 | |
||||||
|
| setHeight | 设置高度 | height: 高度 | |
||||||
|
| setColumnSize | 设置列宽 | columnSize: 列宽数组 | |
||||||
|
| getColumnSize | 得到列宽 | — | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | columnSize: 列宽数组 | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | scrollTop: 纵向滚动距离 | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||||
|
| attr | 设置属性 | key: 键 value: 值 | |
||||||
|
| restore | 存储 | — | |
||||||
|
| populate | 增加项 | items: array | |
||||||
|
| destroy | 摧毁表 | — | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,62 @@ |
|||||||
# layer_tree_table |
# bi.layer_tree_table |
||||||
|
|
||||||
|
### 层级树状结构的表格 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/pqyuLoay/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
// More coming... |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ----------------------- | ------------------------ | -------------------- | ----------------- | |
||||||
|
| isNeedResize | 是否需要调整列宽 | bool | false | |
||||||
|
| isResizeAdapt | 是否需要在调整列宽或区域宽度的时候它们自适应变化 | bool | true | |
||||||
|
| isNeedFreeze | 是否需要冻结表头 | bool | false | |
||||||
|
| freezeCols | 冻结的列 | array | [] | |
||||||
|
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||||
|
| mergeCols | 合并的单元格列号 | array | [] | |
||||||
|
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||||
|
| columnSize | 单元格宽度集合 | array | [] | |
||||||
|
| minColumnSize | 最小列宽 | array | [] | |
||||||
|
| maxColumnSize | 最大列宽 | array | [] | |
||||||
|
| headerRowSize | 表头高度 | number | 25 | |
||||||
|
| headerCellStyleGetter | | function | BI.emptyFn | |
||||||
|
| summaryCellStyleGetter | | function | BI.emptyFn | |
||||||
|
| sequenceCellStyleGetter | | function | BI.emptyFn | |
||||||
|
| rowSize | 普通单元格高度 | number | 25 | |
||||||
|
| regionColumnSize | 列项间的 | array | [] | |
||||||
|
| header | 表头 | array | [] | |
||||||
|
| items | 子组件 | array | [] | |
||||||
|
| crossHeader | 交叉表头 | array | [] | |
||||||
|
| crossItems | 交叉项 | array | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| ------------------------ | ----------- | ------------------ | |
||||||
|
| setWidth | 设置宽度 | width: 宽度 | |
||||||
|
| setHeight | 设置高度 | height: 高度 | |
||||||
|
| setColumnSize | 设置列宽 | columnSize: 列宽数组 | |
||||||
|
| getColumnSize | 得到列宽 | — | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | columnSize: 列宽数组 | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | scrollTop: 纵向滚动距离 | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||||
|
| attr | 设置属性 | key: 键 value: 值 | |
||||||
|
| restore | 存储 | — | |
||||||
|
| populate | 增加项 | items: array | |
||||||
|
| destroy | 摧毁表 | — | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,64 @@ |
|||||||
|
# bi.tree_table |
||||||
|
|
||||||
|
### 树状结构的表格 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/pqyuLoay/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
// More coming... |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ----------------------- | ------------------------ | -------------------- | ----------------- | |
||||||
|
| isNeedResize | 是否需要调整列宽 | bool | false | |
||||||
|
| isResizeAdapt | 是否需要在调整列宽或区域宽度的时候它们自适应变化 | bool | true | |
||||||
|
| isNeedFreeze | 是否需要冻结表头 | bool | false | |
||||||
|
| freezeCols | 冻结的列 | array | [] | |
||||||
|
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||||
|
| mergeCols | 合并的单元格列号 | array | [] | |
||||||
|
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||||
|
| columnSize | 单元格宽度集合 | array | [] | |
||||||
|
| minColumnSize | 最小列宽 | array | [] | |
||||||
|
| maxColumnSize | 最大列宽 | array | [] | |
||||||
|
| headerRowSize | 表头高度 | number | 25 | |
||||||
|
| headerCellStyleGetter | | function | BI.emptyFn | |
||||||
|
| summaryCellStyleGetter | | function | BI.emptyFn | |
||||||
|
| sequenceCellStyleGetter | | function | BI.emptyFn | |
||||||
|
| rowSize | 普通单元格高度 | number | 25 | |
||||||
|
| regionColumnSize | 列项间的 | array | [] | |
||||||
|
| header | 表头 | array | [] | |
||||||
|
| items | 子组件 | array | [] | |
||||||
|
| crossHeader | 交叉表头 | array | [] | |
||||||
|
| crossItems | 交叉项 | array | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| ------------------------ | ----------- | ------------------ | |
||||||
|
| setWidth | 设置宽度 | width: 宽度 | |
||||||
|
| setHeight | 设置高度 | height: 高度 | |
||||||
|
| setColumnSize | 设置列宽 | columnSize: 列宽数组 | |
||||||
|
| getColumnSize | 得到列宽 | — | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | columnSize: 列宽数组 | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | scrollTop: 纵向滚动距离 | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||||
|
| attr | 设置属性 | key: 键 value: 值 | |
||||||
|
| restore | 存储 | — | |
||||||
|
| populate | 增加项 | items: array | |
||||||
|
| destroy | 摧毁表 | — | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# tree_table |
# tree_table |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,32 @@ |
|||||||
# branch_tree |
# bi.branch_tree |
||||||
|
### 横向分支的树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/mLq3e170/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
// More coming... |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| -------- | -------------------- | ------ | ---- | |
||||||
|
| expander | branch_expander组件配置项 | object | {} | |
||||||
|
| el | | object | {} | |
||||||
|
| items | 子项 | array | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ------ | ---- | |
||||||
|
| populate | 去掉所有内容 | — | |
||||||
|
| getValue | 获取所选项值 | — | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,47 @@ |
|||||||
# basic_button |
# bi.basci_button |
||||||
|
|
||||||
|
## 一般的button父级,基类[BI.Single](/core/single.md) |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| value | 组件value值 | string | | null| |
||||||
|
| text | 文本内容 | string | | " " | |
||||||
|
| stopEvent | 阻止冒泡 |boolean | true,false | false | |
||||||
|
| stopPropagation | 阻止冒泡 | boolean | true,false| false | |
||||||
|
| selected | 选中文本值 | boolean | true,false |false | |
||||||
|
| once | 点击一次选中有效,再点无效 | boolean | true,false | false| |
||||||
|
| forceSelected | 点击即选中, 选中了就不会被取消,与once的区别是forceSelected不影响事件的触发| boolean | true,false| false| |
||||||
|
| forceNotSelected | 无论怎么点击都不会被选中 | boolean| true,false | false| |
||||||
|
| disableSelected | 使能选中| boolean | true,false| false| |
||||||
|
| shadow | 是否显示阴影 | boolean| true,false| false| |
||||||
|
| isShadowShowingOnSelected| 选中状态下是否显示阴影|boolean| true,false | false| |
||||||
|
| trigger | 被选元素要触发的事件 | | | null| |
||||||
|
| handler | | | | | |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| bindEvent | 绑定事件| —| |
||||||
|
| beforeClick | 点击事件之前 | —| |
||||||
|
| doClick | 点击事件 | — | |
||||||
|
| handle | 返回该对象 | —| |
||||||
|
| hover | hover事件| —| |
||||||
|
| dishover | 取消hover事件| —| |
||||||
|
|setSelected | 设置选中的文本| b| |
||||||
|
| isSelected | 是否被选中| —| |
||||||
|
| isOnce | 是否只允许点击一次| —| |
||||||
|
| isForceSelected| 判断是否点击即选中| —| |
||||||
|
| isForceNotSelected| 判断是否怎么点击都不会被选中|—| |
||||||
|
| isDisableSelected| 判断是否让选中|—| |
||||||
|
| setText| 设置文本值|—| |
||||||
|
| getText| 获取文本值|—| |
||||||
|
| empty| 清空组件|—| |
||||||
|
| destroy| 销毁组件|—| |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,39 @@ |
|||||||
# single |
# bi.single |
||||||
|
|
||||||
|
## 这仅仅只是一个超类, 所有简单控件的基类,类的控制,title的控制,文字超过边界显示3个点,cursor默认pointor,基类[BI.Widget](/core/widget.md) |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| readonly | 是否只读 | boolean | true,false| false | |
||||||
|
| title | title | string | | null | |
||||||
|
| warningTitle | 错误title | string | | null| |
||||||
|
| tipType | title类型 | string | success,warning | null | |
||||||
|
| value | 组件value值 | string | | null | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| enableHover | 恢复hover可用| opt | |
||||||
|
| disabledHover | 取消hover事件 | —| |
||||||
|
| populate | | —| |
||||||
|
| setTitle | 设置title| title,opt | |
||||||
|
| setWarningTitle | 设置错误title | title,opt| |
||||||
|
| getTipType | 获取tipType|—| |
||||||
|
| isReadOnly | 是否只读| —| |
||||||
|
| getTitle | 获取title|—| |
||||||
|
| getWarningTitle | 获取warningtitle| —| |
||||||
|
| setValue | 设置value值| value| |
||||||
|
|getValue| 获取value值| —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,76 @@ |
|||||||
# widget |
# bi.widget |
||||||
|
|
||||||
|
## Widget超类 |
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:---- |
||||||
|
| root | | boolean | true,false | false | |
||||||
|
| tagName | | string| | "div" | |
||||||
|
| attributes | | | | null | |
||||||
|
| data | | | | null | |
||||||
|
| disabled | 是否可用 | boolean |true,false | false | |
||||||
|
| invisible | | boolean | true,false | false| |
||||||
|
| invalid | 是否有效 | boolean | true,false |false | |
||||||
|
| baseCls | 基础class类 | string | | " "| |
||||||
|
| extraCls | 扩展class类 | string| | " "| |
||||||
|
| cls | class类名 | string | | " "| |
||||||
|
|
||||||
|
## 生命周期函数 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| beforeCreate | 组件实例刚被创建 |— | |
||||||
|
| created | 组件实例创建完成 | —| |
||||||
|
| render | 渲染组件 | — | |
||||||
|
| beforeMounted | 组件挂载之前| —| |
||||||
|
| mounted | 组件挂载 |—| |
||||||
|
| update | 组件更新 | —| |
||||||
|
| beforeDestroyed | 组件销毁前调用| —| |
||||||
|
| destroyed | 组件销毁后调用 | —| |
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| isMounted | 判断组件是否挂载| — | |
||||||
|
| setWidth | 设置组件宽度 | width | |
||||||
|
| setHeight | 设置组件高度 | height | |
||||||
|
| setEnable | 设置组件是否可用 | enable | |
||||||
|
| setVisible | 设置组件是否可见 | visible | |
||||||
|
| setValid | 设置组件是否有效 | valid| |
||||||
|
| doBehavior | | —| |
||||||
|
| getWidth | 获取组件宽度 | —| |
||||||
|
| getHeight| 获取组件高度| —| |
||||||
|
| isValid | 判断是否有效 | —| |
||||||
|
| addWidget | 添加组件 | name,widget| |
||||||
|
| getWidgetByName | 根据组件名称获取组件| name | |
||||||
|
| removeWidget | 移除组件 | nameOrWidget | |
||||||
|
| hasWidget | 判断是否有该组件 | name | |
||||||
|
| getName | 获取组件名称 | | |
||||||
|
| setTag | 设置tag | tag | |
||||||
|
| getTag | 获取tag | —| |
||||||
|
| attr | 设置组件属性 | key,value | |
||||||
|
| getText | 获取text值 | —| |
||||||
|
| setText | 设置text值 | text| |
||||||
|
| getValue | 获取value值 | —| |
||||||
|
|setValue| 设置value值| value| |
||||||
|
| isEnabled | 是否可用 | —| |
||||||
|
| isVisible | 是否可见 | —| |
||||||
|
| disable | 设置组件不可用 | —| |
||||||
|
| enable | 设置组件可用| —| |
||||||
|
| valid | 设置组件有效| —| |
||||||
|
|invalid | 设置组件无效 | —| |
||||||
|
| invisible | 设置组件不可见 | —| |
||||||
|
| visible | 设置组件可见 | —| |
||||||
|
| isolate | | —| |
||||||
|
| empty | 清空组件 | —| |
||||||
|
| destroy | 销毁组件| —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,43 @@ |
|||||||
# custom_date_time |
# custom_date_time |
||||||
|
|
||||||
|
## 带方向的路径选择 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/04h6gsps/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.direction_path_chooser", |
||||||
|
element: "#wrapper", |
||||||
|
items: [[{ |
||||||
|
"region": "合同信息", |
||||||
|
"text": "客户ID", |
||||||
|
"value": "defa1f7ba8b2684a客户ID" |
||||||
|
}, { |
||||||
|
"region": "客户信息", |
||||||
|
"text": "主键", |
||||||
|
"value": "1f4711c201ef1842", |
||||||
|
"direction": -1 |
||||||
|
}, { |
||||||
|
"region": "合同的回款信息", |
||||||
|
"text": "合同ID", |
||||||
|
"value": "e351e9f1d8147947合同ID", |
||||||
|
"direction": -1 |
||||||
|
}]] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| items |二维数组,每个元素代表一条路径,相较于[path_chooser](path_chooser.md)多一个属性direction来指定方向 | array| | | |
||||||
|
--- --- |
||||||
|
type: "bi.year_month_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
self.widget = _ref; |
||||||
|
}, |
||||||
|
width: 300 |
||||||
@ -1,2 +1,45 @@ |
|||||||
# file_manager |
# file_manager |
||||||
|
|
||||||
|
## 文件管理器 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/2g4k0kxh/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.file_manager", |
||||||
|
items: [{ |
||||||
|
id: "1", |
||||||
|
value: "1", |
||||||
|
text: "根目录" |
||||||
|
}, { |
||||||
|
id: "11", |
||||||
|
pId: "1", |
||||||
|
value: "11", |
||||||
|
text: "第一级子目录1" |
||||||
|
}, { |
||||||
|
id: "12", |
||||||
|
pId: "1", |
||||||
|
value: "12", |
||||||
|
text: "第一级子目录2" |
||||||
|
}] |
||||||
|
}) |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
|
||||||
|
--- --- |
||||||
|
|
||||||
|
##方法 |
||||||
|
|
||||||
|
| 方法 | 说明 | |
||||||
|
| :------ |:------------- | |
||||||
|
| getSelectedValue() | 获取当前选中项的value值 | |
||||||
|
| getSelectedId | 获取当前选中项的id属性 | |
||||||
|
--- --- |
||||||
@ -1,2 +1,38 @@ |
|||||||
# direction_path_chooser |
# direction_path_chooser |
||||||
|
|
||||||
|
## 带方向的路径选择 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/04h6gsps/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.direction_path_chooser", |
||||||
|
element: "#wrapper", |
||||||
|
items: [[{ |
||||||
|
"region": "合同信息", |
||||||
|
"text": "客户ID", |
||||||
|
"value": "defa1f7ba8b2684a客户ID" |
||||||
|
}, { |
||||||
|
"region": "客户信息", |
||||||
|
"text": "主键", |
||||||
|
"value": "1f4711c201ef1842", |
||||||
|
"direction": -1 |
||||||
|
}, { |
||||||
|
"region": "合同的回款信息", |
||||||
|
"text": "合同ID", |
||||||
|
"value": "e351e9f1d8147947合同ID", |
||||||
|
"direction": -1 |
||||||
|
}]] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| items |二维数组,每个元素代表一条路径,相较于[path_chooser](path_chooser.md)多一个属性direction来指定方向 | array| | | |
||||||
|
--- --- |
||||||
@ -1,2 +1,39 @@ |
|||||||
# path_chooser |
# path_chooser |
||||||
|
|
||||||
|
## 路径选择 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/5519b4xo/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.path_chooser", |
||||||
|
element: "#wrapper", |
||||||
|
items: [[{ |
||||||
|
"region": "8c4460bc3605685e", |
||||||
|
"regionText": "采购订单XXX", |
||||||
|
"text": "ID", |
||||||
|
"value": "1" |
||||||
|
}, { |
||||||
|
"region": "0fbd0dc648f41e97", |
||||||
|
"regionText": "采购订单", |
||||||
|
"text": "学号", |
||||||
|
"value": "3" |
||||||
|
}, { |
||||||
|
"region": "c6d72d6c7e19a667", |
||||||
|
"regionText": "供应商基本信息", |
||||||
|
"text": "ID", |
||||||
|
"value": "5" |
||||||
|
}]] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| items |二维数组,每个元素代表一条路径 | array| | | |
||||||
|
--- --- |
||||||
@ -1,2 +1,33 @@ |
|||||||
# relation_view |
# relation_view |
||||||
|
|
||||||
|
## 关联视图 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/k19mvL7q/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.relation_view", |
||||||
|
items: [{ |
||||||
|
primary: { |
||||||
|
region: "B", regionText: "比", |
||||||
|
title: "b2...", |
||||||
|
value: "b2", text: "b2字段" |
||||||
|
}, |
||||||
|
foreign: {region: "C", value: "c1", text: "c1字段"} |
||||||
|
}, { |
||||||
|
primary: {region: "A", value: "a1", text: "a1字段"}, |
||||||
|
foreign: {region: "C", value: "c2", text: "c2字段"} |
||||||
|
}] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
|
||||||
|
--- --- |
||||||
Loading…
Reference in new issue