Browse Source

Merge pull request #88 in FUI/fineui from ~GUY/fineui:master to master

* commit '5e8a2eca63a2fa113892797cc9553bf99e80595e':
  基础控件,抽象控件fineUI文档的编写
  add branch_tree
  css编译
  update
  update
es6
guy 7 years ago
parent
commit
6122f0827d
  1. 24
      bi/widget.css
  2. 24
      dist/bundle.css
  3. 24
      dist/widget.css
  4. 2
      public/less/app.less
  5. 12
      src/css/widget/pagetable/pagetable.cell.css
  6. 12
      src/css/widget/previewtable/previewtable.css
  7. 2
      src/less/base/foundation/bi.message.less
  8. 2
      src/less/resource/app.less
  9. 22
      src/less/typographic.less
  10. 2
      src/less/widget/pagetable/pagetable.cell.less
  11. 2
      src/less/widget/previewtable/previewtable.less
  12. 72
      uidoc/base/button/button.md
  13. 39
      uidoc/base/button/icon_button.md
  14. 49
      uidoc/base/button/image_button.md
  15. 58
      uidoc/base/button/text_button.md
  16. 79
      uidoc/base/canvas.md
  17. 53
      uidoc/base/editor/code_editor.md
  18. 71
      uidoc/base/editor/editor.md
  19. 57
      uidoc/base/editor/formula_editor.md
  20. 46
      uidoc/base/editor/multifile_editor.md
  21. 45
      uidoc/base/editor/textarea_editor.md
  22. 66
      uidoc/base/pager.md
  23. 71
      uidoc/base/svg.md
  24. 68
      uidoc/case/table/adaptive_table.md
  25. 62
      uidoc/case/table/layer_tree_table.md
  26. 62
      uidoc/case/table/tree_table.md
  27. 32
      uidoc/case/tree/branch_tree.md
  28. 47
      uidoc/core/basic_button.md
  29. 70
      uidoc/core/layout/border.md
  30. 12
      uidoc/core/layout/left_right_vertical_adapt.md
  31. 39
      uidoc/core/single.md
  32. 76
      uidoc/core/widget.md
  33. 56
      uidoc/detailed/bi.button/general.md
  34. 41
      uidoc/detailed/date/custom_date_time.md
  35. 43
      uidoc/detailed/file_manager.md
  36. 36
      uidoc/detailed/path/direction_path_chooser.md
  37. 37
      uidoc/detailed/path/path_chooser.md
  38. 31
      uidoc/detailed/relation_view.md

24
bi/widget.css

@ -257,12 +257,12 @@
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.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;
} }
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
@ -278,12 +278,12 @@
max-width: 220px; max-width: 220px;
} }
.bi-preview-table { .bi-preview-table {
-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;
} }
.bi-preview-table > div > table > thead > tr.odd, .bi-preview-table > div > table > thead > tr.odd,
.bi-preview-table > div > div > div > table > thead > tr.odd { .bi-preview-table > div > div > div > table > thead > tr.odd {

24
dist/bundle.css vendored

@ -3026,12 +3026,12 @@ li.CodeMirror-hint-active {
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.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;
} }
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
@ -3047,12 +3047,12 @@ li.CodeMirror-hint-active {
max-width: 220px; max-width: 220px;
} }
.bi-preview-table { .bi-preview-table {
-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;
} }
.bi-preview-table > div > table > thead > tr.odd, .bi-preview-table > div > table > thead > tr.odd,
.bi-preview-table > div > div > div > table > thead > tr.odd { .bi-preview-table > div > div > div > table > thead > tr.odd {

24
dist/widget.css vendored

@ -257,12 +257,12 @@
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
.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;
} }
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
@ -278,12 +278,12 @@
max-width: 220px; max-width: 220px;
} }
.bi-preview-table { .bi-preview-table {
-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;
} }
.bi-preview-table > div > table > thead > tr.odd, .bi-preview-table > div > table > thead > tr.odd,
.bi-preview-table > div > div > div > table > thead > tr.odd { .bi-preview-table > div > div > div > table > thead > tr.odd {

2
public/less/app.less

@ -22,7 +22,7 @@ body {
top: 0; top: 0;
left: 0; left: 0;
background-repeat: repeat; background-repeat: repeat;
.user-select(none); .user-select-disable();
color: @color-bi-text-normal; color: @color-bi-text-normal;
font: normal 12px "Microsoft YaHei", "Hiragino Sans GB W3"; font: normal 12px "Microsoft YaHei", "Hiragino Sans GB W3";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

12
src/css/widget/pagetable/pagetable.cell.css

@ -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;
} }

12
src/css/widget/previewtable/previewtable.css

@ -1,10 +1,10 @@
.bi-preview-table { .bi-preview-table {
-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;
} }
.bi-preview-table > div > table > thead > tr.odd, .bi-preview-table > div > table > thead > tr.odd,
.bi-preview-table > div > div > div > table > thead > tr.odd { .bi-preview-table > div > div > div > table > thead > tr.odd {

2
src/less/base/foundation/bi.message.less

@ -7,7 +7,7 @@
.bi-message-text { .bi-message-text {
font-size: 16px; font-size: 16px;
.user-select(text); .user-select-enable();
} }
.bi-message-content { .bi-message-content {

2
src/less/resource/app.less

@ -22,7 +22,7 @@ body {
top: 0; top: 0;
left: 0; left: 0;
background-repeat: repeat; background-repeat: repeat;
.user-select(none); .user-select-disable();
color: @color-bi-text-normal; color: @color-bi-text-normal;
font: normal 12px "Microsoft YaHei", "Hiragino Sans GB W3"; font: normal 12px "Microsoft YaHei", "Hiragino Sans GB W3";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

22
src/less/typographic.less

@ -25,11 +25,19 @@
overflow-y: hidden; overflow-y: hidden;
white-space:nowrap; white-space:nowrap;
} }
.user-select(@select){ .user-select-disable(){
-webkit-user-select: @select; -webkit-user-select: none;
-khtml-user-select: @select; -khtml-user-select: none;
-moz-user-select: @select; -moz-user-select: none;
-ms-user-select: @select; -ms-user-select: none;
-o-user-select: @select; -o-user-select: none;
user-select: @select; user-select: none;
}
.user-select-enable(){
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
} }

2
src/less/widget/pagetable/pagetable.cell.less

@ -1,5 +1,5 @@
@import "../../bibase"; @import "../../bibase";
.bi-page-table-cell { .bi-page-table-cell {
.user-select(initial); .user-select-enable();
} }

2
src/less/widget/previewtable/previewtable.less

@ -1,7 +1,7 @@
@import "../../bibase"; @import "../../bibase";
.bi-preview-table { .bi-preview-table {
.user-select(initial); .user-select-enable();
& > div > table, & > div > div > div > table { & > div > table, & > div > div > div > table {
& > thead > tr.odd { & > thead > tr.odd {
background-color: @color-bi-background-normal; background-color: @color-bi-background-normal;

72
uidoc/base/button/button.md

@ -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 |
---

39
uidoc/base/button/icon_button.md

@ -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 | 点击事件 | —|
---

49
uidoc/base/button/image_button.md

@ -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 |获取图片路径| — |
---

58
uidoc/base/button/text_button.md

@ -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"} |
---

79
uidoc/base/canvas.md

@ -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 |
---

53
uidoc/base/editor/code_editor.md

@ -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 | 刷新文本框 | —|
---

71
uidoc/base/editor/editor.md

@ -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 | 文本框值是否有效|—|
---

57
uidoc/base/editor/formula_editor.md

@ -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 | 刷新文本框 | —|
---

46
uidoc/base/editor/multifile_editor.md

@ -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 | 重置| —|
---

45
uidoc/base/editor/textarea_editor.md

@ -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 | 文本域失焦|—|
---

66
uidoc/base/pager.md

@ -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 | | —|
---

71
uidoc/base/svg.md

@ -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 |
---

68
uidoc/case/table/adaptive_table.md

@ -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 | 摧毁表 | — |

62
uidoc/case/table/layer_tree_table.md

@ -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 | 摧毁表 | — |

62
uidoc/case/table/tree_table.md

@ -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

32
uidoc/case/tree/branch_tree.md

@ -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 | 获取所选项值 | — |

47
uidoc/core/basic_button.md

@ -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| 销毁组件|—|
---

70
uidoc/core/layout/border.md

@ -7,97 +7,38 @@
{% common %} {% common %}
```javascript ```javascript
Demo = {};
Demo._createNorth = function(){
return BI.createWidget({
type: "bi.label",
text: "North",
cls: "layout-bg1",
height: 30
})
};
Demo._createWest = function(){
return BI.createWidget({
type: "bi.center",
cls: "layout-bg2",
items:[{
type: "bi.label",
text: "West",
whiteSpace: "normal"
}]
})
};
Demo._createCenter = function(){
return BI.createWidget({
type: "bi.center",
cls: "layout-bg3",
items: [{
type: "bi.label",
text: "Center",
whiteSpace: "normal"
}]
})
};
Demo._createEast = function(){
return BI.createWidget({
type: "bi.center",
cls: "layout-bg5",
items: [{
type: "bi.label",
text: "East",
whiteSpace: "normal"
}]
})
};
Demo._createSouth = function(){
return BI.createWidget({
type: "bi.label",
text: "South",
cls: "layout-bg6",
height: 50
})
};
BI.createWidget({ BI.createWidget({
type: 'bi.border', type: 'bi.border',
element: "#wrapper", element: "#wrapper",
cls: "",
items: { items: {
north: { north: {
el: Demo._createNorth(), el: {type: "bi.label"},
height: 30, height: 30,
top: 20, top: 20,
left: 20, left: 20,
right: 20 right: 20
}, },
south: { south: {
el: Demo._createSouth(), el: {type: "bi.label"},
height: 50, height: 50,
bottom: 20, bottom: 20,
left: 20, left: 20,
right: 20 right: 20
}, },
west: { west: {
el: Demo._createWest(), el: {type: "bi.label"},
width: 200, width: 200,
left: 20 left: 20
}, },
east: { east: {
el: Demo._createEast(), el: {type: "bi.label"},
width: 300, width: 300,
right: 20 right: 20
}, },
center: Demo._createCenter() center: {el: {type: "bi.label"}}
} }
}); });
``` ```
{% endmethod %} {% endmethod %}
@ -110,5 +51,4 @@ BI.createWidget({
| :------ |:------------- | :----- | :----|:---- | :------ |:------------- | :----- | :----|:----
| items | 子控件对象 | object | north,east,west,south,center | | | | items | 子控件对象 | object | north,east,west,south,center | | |
--- ---

12
uidoc/core/layout/left_right_vertical_adapt.md

@ -21,12 +21,6 @@ BI.createWidget({
cls: "layout-bg1", cls: "layout-bg1",
width: 100, width: 100,
height: 30 height: 30
}, {
type: "bi.label",
text: "左边的垂直居中",
cls: "layout-bg2",
width: 100,
height: 30
}], }],
right: [{ right: [{
type: "bi.label", type: "bi.label",
@ -34,12 +28,6 @@ BI.createWidget({
cls: "layout-bg1", cls: "layout-bg1",
width: 100, width: 100,
height: 30 height: 30
}, {
type: "bi.label",
text: "右边的垂直居中",
cls: "layout-bg2",
width: 100,
height: 30
}] }]
} }
}); });

39
uidoc/core/single.md

@ -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值| —|
---

76
uidoc/core/widget.md

@ -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 | 销毁组件| —|
---

56
uidoc/detailed/bi.button/general.md

@ -1,60 +1,6 @@
# bi.button # bi.button
##通用按钮 ## 通用按钮,详情见[BI.button](/base/button/button.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
{% common %}
```javascript
BI.createWidget({
type: 'demo.buttons',
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 |
--- ---

41
uidoc/detailed/date/custom_date_time.md

@ -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

43
uidoc/detailed/file_manager.md

@ -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属性 |
--- ---

36
uidoc/detailed/path/direction_path_chooser.md

@ -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| | |
--- ---

37
uidoc/detailed/path/path_chooser.md

@ -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| | |
--- ---

31
uidoc/detailed/relation_view.md

@ -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…
Cancel
Save