Browse Source

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

* commit 'bb6f3d8b945d1bea87f7581316a8dc14703cfc53':
  layer_tree_table
  组合空格键和弹出层
  finish pager
  加事件 和 一些修改
  update case
  组合控件fineUI文档的编写
  提交
  update color_chooser
  抽象控件fineUI文档的编写
es6
guy 7 years ago
parent
commit
6d613556c0
  1. 31
      bi/case.js
  2. 3
      demo/version.js
  3. 35
      dist/bundle.js
  4. 24
      dist/bundle.min.js
  5. 31
      dist/case.js
  6. 3
      dist/demo.js
  7. 4
      public/js/index.js
  8. 32
      src/case/table/table.layertree.cell.js
  9. 2
      uidoc/SUMMARY.md
  10. 2
      uidoc/base/bubble.md
  11. 4
      uidoc/base/editor/code_editor.md
  12. 23
      uidoc/base/editor/editor.md
  13. 12
      uidoc/base/editor/formula_editor.md
  14. 9
      uidoc/base/editor/multifile_editor.md
  15. 2
      uidoc/base/editor/textarea_editor.md
  16. 8
      uidoc/base/pager.md
  17. 26
      uidoc/base/svg.md
  18. 9
      uidoc/base/table/table_view.md
  19. 46
      uidoc/case/calendar.md
  20. 32
      uidoc/case/clipboard.md
  21. 31
      uidoc/case/color_chooser.md
  22. 47
      uidoc/case/pager/all_count_pager.md
  23. 64
      uidoc/case/pager/direction_pager.md
  24. 67
      uidoc/core/abstract/button_group.md
  25. 50
      uidoc/core/abstract/button_tree.md
  26. 71
      uidoc/core/abstract/collection_view.md
  27. 84
      uidoc/core/abstract/custom_tree.md
  28. 77
      uidoc/core/abstract/grid_view.md
  29. 51
      uidoc/core/abstract/virtual_group.md
  30. 52
      uidoc/core/abstract/virtual_list.md
  31. 86
      uidoc/core/combination/bi.combo.md
  32. 52
      uidoc/core/combination/bi.expander.md
  33. 33
      uidoc/core/combination/group_combo.md
  34. 49
      uidoc/core/combination/loader.md
  35. 79
      uidoc/core/combination/navigation.md
  36. 102
      uidoc/core/combination/searcher.md
  37. 83
      uidoc/core/combination/switcher.md
  38. 85
      uidoc/core/combination/tab.md
  39. 63
      uidoc/core/layer/layer_float_box.md
  40. 76
      uidoc/core/layer/layer_popup.md
  41. 40
      uidoc/core/layer/layer_searcher.md
  42. 5
      uidoc/core/widget.md
  43. 11
      uidoc/detailed/combo/single_tree_combo.md
  44. 8
      uidoc/detailed/date/custom_date_time.md
  45. 10
      uidoc/detailed/date/year_month_combo.md
  46. 11
      uidoc/detailed/date/year_quarter_combo.md
  47. 1
      uidoc/detailed/down_list_combo.md
  48. 1
      uidoc/detailed/month_combo.md
  49. 1
      uidoc/detailed/multi_select_combo.md
  50. 1
      uidoc/detailed/numeric_interval.md
  51. 1
      uidoc/detailed/quarter_combo.md
  52. 31
      uidoc/detailed/table/bi.preview_table.md
  53. 31
      uidoc/detailed/table/bi.responsive_table.md
  54. 9
      uidoc/detailed/text_input/bi.clear_editor.md
  55. 25
      uidoc/detailed/text_input/bi.search_editor.md
  56. 51
      uidoc/detailed/text_input/bi.text_editor.md
  57. 27
      uidoc/detailed/text_input/finetuning_number_editor.md
  58. 7
      uidoc/detailed/tree/bi.multi_tree_combo.md
  59. 1
      uidoc/detailed/year_combo.md

31
bi/case.js

@ -11053,6 +11053,37 @@ BI.extend(BI.DynamicSummaryTreeTable, {
});
BI.shortcut("bi.dynamic_summary_tree_table", BI.DynamicSummaryTreeTable);/**
* Created by GUY on 2016/5/7.
* @class BI.LayerTreeTableCell
* @extends BI.Single
*/
BI.LayerTreeTableCell = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.LayerTreeTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-layer-tree-table-cell",
layer: 0,
text: ""
})
},
_init: function () {
BI.LayerTreeTableCell.superclass._init.apply(this, arguments);
var o = this.options;
BI.createWidget({
type: "bi.label",
element: this.element,
textAlign: "left",
whiteSpace: "nowrap",
height: o.height,
text: o.text,
value: o.value,
lgap: 5 + 30 * o.layer,
rgap: 5
})
}
});
$.shortcut("bi.layer_tree_table_cell", BI.LayerTreeTableCell);/**
*
* 层级树状结构的表格
*

3
demo/version.js

@ -28,5 +28,6 @@ BI.i18n = {
"BI-Quarter_4": "第4季度",
"BI-Basic_Value": "值",
"BI-Load_More": "加载更多",
"BI-Select_All": "全选"
"BI-Select_All": "全选",
"BI-No_More_Data": "无更多数据"
};

35
dist/bundle.js vendored

@ -26,7 +26,9 @@ BI.i18n = {
"BI-Quarter_4": "第4季度",
"BI-Basic_Value": "值",
"BI-Load_More": "加载更多",
"BI-Select_All": "全选"
"BI-Select_All": "全选",
"BI-Basic_Auto": "自动",
"BI-No_More_Data": "无更多数据"
};/*!
* jQuery JavaScript Library v1.9.1
* http://jquery.com/
@ -75338,6 +75340,37 @@ BI.extend(BI.DynamicSummaryTreeTable, {
});
BI.shortcut("bi.dynamic_summary_tree_table", BI.DynamicSummaryTreeTable);/**
* Created by GUY on 2016/5/7.
* @class BI.LayerTreeTableCell
* @extends BI.Single
*/
BI.LayerTreeTableCell = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.LayerTreeTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-layer-tree-table-cell",
layer: 0,
text: ""
})
},
_init: function () {
BI.LayerTreeTableCell.superclass._init.apply(this, arguments);
var o = this.options;
BI.createWidget({
type: "bi.label",
element: this.element,
textAlign: "left",
whiteSpace: "nowrap",
height: o.height,
text: o.text,
value: o.value,
lgap: 5 + 30 * o.layer,
rgap: 5
})
}
});
$.shortcut("bi.layer_tree_table_cell", BI.LayerTreeTableCell);/**
*
* 层级树状结构的表格
*

24
dist/bundle.min.js vendored

File diff suppressed because one or more lines are too long

31
dist/case.js vendored

@ -11053,6 +11053,37 @@ BI.extend(BI.DynamicSummaryTreeTable, {
});
BI.shortcut("bi.dynamic_summary_tree_table", BI.DynamicSummaryTreeTable);/**
* Created by GUY on 2016/5/7.
* @class BI.LayerTreeTableCell
* @extends BI.Single
*/
BI.LayerTreeTableCell = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.LayerTreeTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-layer-tree-table-cell",
layer: 0,
text: ""
})
},
_init: function () {
BI.LayerTreeTableCell.superclass._init.apply(this, arguments);
var o = this.options;
BI.createWidget({
type: "bi.label",
element: this.element,
textAlign: "left",
whiteSpace: "nowrap",
height: o.height,
text: o.text,
value: o.value,
lgap: 5 + 30 * o.layer,
rgap: 5
})
}
});
$.shortcut("bi.layer_tree_table_cell", BI.LayerTreeTableCell);/**
*
* 层级树状结构的表格
*

3
dist/demo.js vendored

@ -28,7 +28,8 @@ BI.i18n = {
"BI-Quarter_4": "第4季度",
"BI-Basic_Value": "值",
"BI-Load_More": "加载更多",
"BI-Select_All": "全选"
"BI-Select_All": "全选",
"BI-No_More_Data": "无更多数据"
};$(function () {
var ref;
BI.createWidget({

4
public/js/index.js

@ -26,5 +26,7 @@ BI.i18n = {
"BI-Quarter_4": "第4季度",
"BI-Basic_Value": "值",
"BI-Load_More": "加载更多",
"BI-Select_All": "全选"
"BI-Select_All": "全选",
"BI-Basic_Auto": "自动",
"BI-No_More_Data": "无更多数据"
};

32
src/case/table/table.layertree.cell.js

@ -0,0 +1,32 @@
/**
* Created by GUY on 2016/5/7.
* @class BI.LayerTreeTableCell
* @extends BI.Single
*/
BI.LayerTreeTableCell = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.LayerTreeTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-layer-tree-table-cell",
layer: 0,
text: ""
})
},
_init: function () {
BI.LayerTreeTableCell.superclass._init.apply(this, arguments);
var o = this.options;
BI.createWidget({
type: "bi.label",
element: this.element,
textAlign: "left",
whiteSpace: "nowrap",
height: o.height,
text: o.text,
value: o.value,
lgap: 5 + 30 * o.layer,
rgap: 5
})
}
});
$.shortcut("bi.layer_tree_table_cell", BI.LayerTreeTableCell);

2
uidoc/SUMMARY.md

@ -120,7 +120,7 @@
* [all_count_pager](case/pager/all_count_pager.md)
* [direction_pager](case/pager/direction_pager.md)
* [calendar](case/calendar.md)
* [clipboard](case/shelter_editor.md)
* [clipboard](case/clipboard.md)
* [complex_canvas](case/complex_canvas.md)
* [color_chooser](case/color_chooser.md)
* [segment](case/segment.md)

2
uidoc/base/bubble.md

@ -36,5 +36,5 @@ BI.createWidget({
| :------ |:------------- | :-----
| setText | 设置文本值 | 需要设置的文本值text|
---
---

4
uidoc/base/editor/code_editor.md

@ -1,9 +1,9 @@
# bi.code_editor
## 文本框,基类[BI.Single](/core/single.md)
## 代码文本框,基类[BI.Single](/core/single.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
[source](https://jsfiddle.net/fineui/fx86hLgm/)
{% common %}
```javascript

23
uidoc/base/editor/editor.md

@ -3,7 +3,7 @@
## 文本框,基类[BI.Single](/core/single.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
[source](https://jsfiddle.net/fineui/4eLytgve/)
{% common %}
```javascript
@ -63,7 +63,26 @@ BI.createWidget({
| isEditing | 文本框是否处于编辑状态|—|
| isValid | 文本框值是否有效|—|
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 |
|BI.Editor.EVENT_FOCUS | focus事件 |
|BI.Editor.EVENT_BLUR | blur事件 |
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) |
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 |
|BI.Editor.EVENT_SPACE | 按下空格触发 |
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 |
|BI.Editor.EVENT_START | 开始输入触发 |
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) |
|BI.Editor.EVENT_STOP | 停止输入触发 |
|BI.Editor.EVENT_CONFIRM | 确定输入触发(blur时且输入值有效) |
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 |
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 |
|BI.Editor.EVENT_ENTER | 回车事件 |
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 |
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace |
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 |
---

12
uidoc/base/editor/formula_editor.md

@ -3,16 +3,18 @@
## 公式编辑控件,基类[BI.Single](/core/single.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
[source](https://jsfiddle.net/fineui/qnquz4o0/)
{% common %}
```javascript
BI.createWidget({
type : 'bi.formula_editor',
width : 300,
height : 200,
value : 'SUM(C5, 16, 26)'
type: "bi.formula_editor",
cls: "bi-border",
watermark:'请输入公式',
value: 'SUM(C5, 16, 26)',
width: "100%",
height: "100%"
});

9
uidoc/base/editor/multifile_editor.md

@ -3,7 +3,7 @@
## 多文件,基类[BI.Single](/core/single.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
[source](https://jsfiddle.net/fineui/25r3r5fq/)
{% common %}
```javascript
@ -38,7 +38,12 @@ BI.createWidget({
| upload | 文件上传| —|
| reset | 重置| —|
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.MultifileEditor.EVENT_UPLOADSTART | 开始上传时触发 |
|BI.MultifileEditor.EVENT_PROGRESS | 上传过程中触发 |
|BI.MultifileEditor.EVENT_UPLOADED | 上传结束后触发 |
---

2
uidoc/base/editor/textarea_editor.md

@ -3,7 +3,7 @@
## 文本域,基类[BI.Single](/core/single.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
[source](https://jsfiddle.net/fineui/90721e0a/)
{% common %}
```javascript

8
uidoc/base/pager.md

@ -3,7 +3,7 @@
## 分页控件,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
[source](https://jsfiddle.net/fineui/rhhte9b3/)
{% common %}
```javascript
@ -58,8 +58,10 @@ BI.createWidget({
| attr | 设置属性 | key,value |
| populate | | —|
## 事件
| 名称 | 说明 |
| :------ |:------------- |
| BI.Pager.EVENT_AFTER_POPULATE | pager刷新完成事件 |
---

26
uidoc/base/svg.md

@ -3,36 +3,20 @@
## svg绘图,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
[source](https://jsfiddle.net/fineui/1xn8snp3/)
{% 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");
type: "bi.svg",
width: 500,
height: 600
});
svg.path("M10,10L50,50M50,10L10,50")
.attr({stroke: "red"});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: svg,
left: 100,
top: 50
}]
})
```

9
uidoc/base/table/table_view.md

@ -62,3 +62,12 @@ BI.createWidget({
| getRightHorizontalScroll | 获取右往左横向滚动距离 | getRightHorizontalScroll() |
| getColumns | 获取列项 | getColumns() |
| populate | 增加行 | populate(rows) |
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.Table.EVENT_TABLE_AFTER_INIT | table初始化完成后触发 |
|BI.Table.EVENT_TABLE_RESIZE | table大小调整时触发(窗口变化等) |
|BI.Table.EVENT_TABLE_SCROLL | 滚动事件 |
---

46
uidoc/case/calendar.md

@ -1,2 +1,46 @@
# calendar
# bi.calendar
### 日历控件
{% method %}
[source](https://jsfiddle.net/fineui/4sfsaoma/)
{% common %}
```javascript
BI.createWidget({
type: 'bi.calendar',
min: '1900-01-01', //最小日期
max: '2099-12-31', //最大日期
year: 2015,
month: 7, //7表示八月
day: 25,
});
```
{% endmethod %}
### 参数
| 参数 | 说明 | 类型 | 默认值 |
| ----- | ----- | ------ | ------------ |
| min | 最小日期 | string | '1900-01-01' |
| max | 最大日期 | string | '2099-12-31' |
| year | 设定的年份 | number | 2015 |
| month | 设定的月份 | number | 7 |
| day | 设定的日期 | number | 25 |
### 方法
| 方法名 | 说明 | 参数 |
| ----------- | ------- | -------------------------- |
| isFrontDate | 是否为最小日期 | — |
| isFinalDate | 是否为最大日期 | — |
| setValue | 设置日期 | object: {year, month, day} |
| getVlaue | 获得日期 | — |

32
uidoc/case/clipboard.md

@ -0,0 +1,32 @@
# bi.clipboard
### 剪切板
{% method %}
[source](https://jsfiddle.net/fineui/kLzq99c3/)
{% common %}
```javascript
BI.createWidget({
type: 'bi.clipboard',
width: 100,
height: 100,
copy: function () {},
afterCopy: function () {}
});
```
{% endmethod %}
### 参数
| 参数 | 说明 | 类型 | 默认值 |
| --------- | ---------- | -------- | ---------- |
| copy | 获取需要拷贝的值 | function | BI.emptyFn |
| afterCopy | 完成拷贝后执行的方法 | function | BI.emptyFn |

31
uidoc/case/color_chooser.md

@ -1,2 +1,31 @@
# color_chooser
# bi.color_chooser
### 选色控件
{% method %}
[source](https://jsfiddle.net/fineui/z4fwweg9/)
{% common %}
```javascript
BI.createWidget({
type: "bi.color_chooser",
element: "#wrapper",
width: 30,
height: 30
});
```
{% endmethod %}
### 方法
| 方法名 | 说明 | 参数 |
| ------------- | ------ | ----- |
| isViewVisible | 判断是否显示 | — |
| setValue | 设置颜色值 | color |
| getValue | 获取颜色值 | — |

47
uidoc/case/pager/all_count_pager.md

@ -1,2 +1,47 @@
# all_count_pager
# bi.all_count_pager
### 有总页数和总行数的分页控件
{% method %}
[source](https://jsfiddle.net/fineui/cmtamo5L/)
{% common %}
```javascript
BI.createWidget({
type: 'bi.all_count_pager',
height: 30,
pages: 10, //必选项
curr: 1,
count: 1,
});
```
{% endmethod %}
### 参数
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---- | ------ | ---- |
| height | 控件高度 | number | 30 |
| pages | 总页数 | number | 1 |
| curr | 当前页 | number | 1 |
| count | 总行数 | number | 1 |
### 方法
| 方法名 | 说明 | 参数 |
| --------------- | -------- | ---------- |
| setAllPages | 设置总页数 | v |
| setValue | 设置当前页码 | v |
| setVPage | 设置当前页码 | v |
| setCount | 设置计数 | count |
| getCurrentPage | 获取当前页码 | — |
| hasPrev | 是否有前一页 | — |
| hasNext | 是否有后一页 | — |
| setPagerVisible | 设置页码是否可见 | true/false |
| populate | 清空内容 | — |

64
uidoc/case/pager/direction_pager.md

@ -1,2 +1,64 @@
# direction_pager
# bi.direction_pager
### 显示页码的分页控件
{% method %}
[source](https://jsfiddle.net/fineui/vyc36s2a/)
{% common %}
```javascript
var pager = BI.createWidget({
type: 'bi.direction_pager',
height: 30,
horizontal: {
pages: 10, //必选项
curr: 1, //初始化当前页, pages为数字时可用,
firstPage: 1,
lastPage: 10,
},
vertical: {
pages: 10, //必选项
curr: 1, //初始化当前页, pages为数字时可用,
firstPage: 1,
lastPage: 10,
},
element: 'body',
});
```
{% endmethod %}
### 参数
| 参数 | 二级参数 | 说明 | 类型 | 默认值 |
| ---------- | --------- | ---------------------- | --------------- | ---------- |
| height | | 控件高度 | number | 30 |
| horizontal | | 横向翻页设置 | object | — |
| | pages | 总页数 | number/bool | false |
| | curr | 当前页, pages为数字时可用 | number | 1 |
| | hasPrev | 判断是否有前一页的方法 | function | BI.emptyFn |
| | hasNext | 判断是否有后一页的方法 | function | BI.emptyFn |
| | firstPage | 第一页 | number | 1 |
| | lastPage | 最后一页 | number/function | BI.emptyFn |
| vertical | | 纵向翻页设置,参数与horizontal相同 | object | — |
### 方法
| 方法名 | 说明 | 参数 |
| ---------------- | ---------- | ---- |
| getVPage | 获取纵向页码 | — |
| getHPage | 获取水平向页码 | — |
| setVPage | 获取纵向页码 | v |
| setHPage | 获取水平向页码 | v |
| hasVNext | 纵向坐标是否有下一页 | — |
| hasHNext | 横向坐标是否有下一页 | — |
| hasVPrev | 纵向坐标是否有上一页 | — |
| hasHPrev | 横向坐标是否有上一页 | — |
| setHPagerVisible | 设置横向分页键可见 | — |
| setVPagerVisible | 设置纵向分页键可见 | — |
| populate | 清空内容 | — |

67
uidoc/core/abstract/button_group.md

@ -1,2 +1,67 @@
# button_group
# bi.button_group
## 一组具有相同属性的元素集合,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/te0nLap1/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.button_group",
chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
layouts: [{
type: "bi.vertical"
}],
items: [{
el: {
type: "bi.label",
text: "button_group"
},
height: 50,
}]
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| behaviors | |object | |{ }|
| items | 子组件数组 | array | | [ ] |
| chooseType | 选择类型 | const |CHOOSE_TYPE_SINGLE,CHOOSE_TYPE_MULTI,CHOOSE_TYPE_ALL,CHOOSE_TYPE_NONE,CHOOSE_TYPE_DEFAULT | CHOOSE_TYPE_SINGLE |
| layouts | 布局 | array | | [{type: "bi.center",hgap: 0,vgap: 0}] |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| doBehavior | | —|
| prependItems | 内部前插入 | items |
| addItems | 内部后插入 | items |
| removeItemAt | 移除指定索引处的item | indexs |
| removeItems | 移除制定元素 | values |
| populate | 刷新列表 | items |
| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组|
| setEnabledValue | 设置value值可用| value,可以是单个值也可以是个数组 |
| setValue | 设置value值 | value,可以是单个值也可以是个数组 |
| getNotSelectedValue | 获取没有被选中的值 | —|
| getValue | 获取被选中的值 |—|
| getAllButtons | 获取所有button |—|
| getAllLeaves | 获取所有的叶子节点 | —|
| getSelectedButtons | 获取所有被选中的元素 | —|
| getNotSelectedButtons | 获取所有未被选中的元素 | —|
| getIndexByValue | 根据value值获取value在数组中的索引 | value|
| getNodeById | 根据id获取节点 | id |
| getNodeByValue | 根据value值获取节点 | value |
| empty| 清空组件|—|
| destroy| 销毁组件|—|
---

50
uidoc/core/abstract/button_tree.md

@ -1,2 +1,50 @@
# button_tree
# bi.button_tree
## 一组具有相同属性的元素集合,基类[BI.ButtonGroup](/core/abstract/button_group.md)
{% method %}
[source](https://jsfiddle.net/fineui/pgwpw4n9/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.button_tree",
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
layouts: [{
type: "bi.vertical"
}],
items: [{
type: "bi.label",
text: "0",
value: "label1",
height:50,
vgap:10
}]
})
```
{% endmethod %}
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组|
| setEnabledValue | 设置value值可用| value,可以是单个值也可以是个数组 |
| setValue | 设置value值 | value,可以是单个值也可以是个数组 |
| getNotSelectedValue | 获取没有被选中的值 | —|
| getValue | 获取被选中的值 |—|
| getAllButtons | 获取所有button |—|
| getAllLeaves | 获取所有的叶子节点 | —|
| getSelectedButtons | 获取所有被选中的元素 | —|
| getNotSelectedButtons | 获取所有未被选中的元素 | —|
| getIndexByValue | 根据value值获取value在数组中的索引 | value|
| getNodeById | 根据id获取节点 | id |
| getNodeByValue | 根据value值获取节点 | value |
---

71
uidoc/core/abstract/collection_view.md

@ -1,2 +1,71 @@
# collection_view
# bi.collection_view
## CollectionView,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/cmq0b3v0/)
{% common %}
```javascript
BI.createWidget({
type: "bi.collection_view",
element:"#wrapper",
width: 400,
height: 300,
items: [],
cellSizeAndPositionGetter: function (index) {
return {
x: index % 10 * 50,
y: Math.floor(index / 10) * 50,
width: 50,
height: 50
}
}
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| items | 子组件数组 | array | | [ ] |
| overflowX | 是否显示横向滚动条| boolean | true,false | true |
| overflowY | 是否显示纵向滚动条 | boolean | true,false | true |
| cellSizeAndPositionGetter |设置每个单元格的位置坐标和宽高 | function| | — |
| horizontalOverscanSize | | number | | 0 |
| verticalOverscanSize | | number | | 0 |
| width | 行宽,必设 |number| | — |
| height | 列宽,必设 | number | | — |
| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 |
| scrollTop | 滚动条相对于顶部的偏移 | number | — | 0 |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft|
| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop |
| setOverflowX | 设置是否显示横向滚动条 | b |
| setOverflowY | 设置是否显示横向滚动条 | b|
| getScrollLeft | 获取滚动条相对于左边的偏移 | —|
| getScrollTop | 获取滚动条相对于顶部的偏移 | — |
| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — |
| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—|
| restore | 还原列表设置 | — |
| populate | 刷新列表 | items |
## 事件
| 事件 | 说明 | 回调参数 |
| :------ |:------------- |:------------------------|
|BI.GridView.EVENT_SCROLL| 滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} |
---

84
uidoc/core/abstract/custom_tree.md

@ -1,2 +1,84 @@
# custom_tree
# bi.custom_tree
## 自定义树,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/gesh31xg/)
{% common %}
```javascript
BI.createWidget({
type: "bi.custom_tree",
el: {
type: "bi.button_tree",
chooseType: 0,
layouts: [{
type: "bi.vertical",
hgap: 30
}]
},
items: [{
id: -1,
pId: -2,
value: "根目录",
open: true,
type: "bi.plus_group_node",
height: 25
},
{
id: 1,
pId: -1,
value: "第一级目录1",
type: "bi.plus_group_node",
height: 25
},
{
id: 11,
pId: 1,
value: "第二级文件1",
type: "bi.single_select_item",
height: 25
}]
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| items | 子组件数组 | array | | [ ] |
| itemsCreator| | | | |
| expander | | object | | {el: {},popup: {type: "bi.custom_tree"}}|
| el | | object | | {type: "bi.button_tree",chooseType: 0,layouts: [{type: "bi.vertical"}]}|
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| initTree | 构造树结构 | nodes |
| stroke | 生成树方法 | nodes |
| prependItems | 内部前插入 | items |
| addItems | 内部后插入 | items |
| populate | 刷新列表 | nodes|
| render | 渲染列表 | |
| setValue | 设置value值 | value,可以是单个值也可以是个数组 |
| getValue | 获取被选中的值 |—|
| getAllButtons | 获取所有button |—|
| getAllLeaves | 获取所有的叶子节点 | —|
| getNodeById | 根据id获取节点 | id |
| getNodeByValue | 根据value值获取节点 | value |
| empty| 清空组件|—|
---

77
uidoc/core/abstract/grid_view.md

@ -1,2 +1,77 @@
# grid_view
# bi.grid_view
## GridView,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/fkntzLq5/)
{% common %}
```javascript
BI.createWidget({
type: "bi.grid_view",
width: 400,
height: 300,
estimatedRowSize: 30,
estimatedColumnSize: 100,
items: [],
scrollTop: 100,
rowHeightGetter: function () {
return 30;
},
columnWidthGetter: function () {
return 100;
}
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| items | 子组件数组 | array | | [ ] |
| overflowX | 是否显示横向滚动条| boolean | true,false | true |
| overflowY | 是否显示纵向滚动条 | boolean | true,false | true |
| overscanColumnCount| | number| | 0 |
| overscanRowCount| | number | | 0 |
| width | 行宽,必设 |number| | — |
| height | 列宽,必设 | number | | — |
| rowHeightGetter| 每格行宽 |number,function | | function |
| columnWidthGetter| 每格列宽 | number,function | | function |
| estimatedColumnSize| 每格行宽,columnWidthGetter为function时必设 |number,function | | function |
| estimatedRowSize | 每格列宽,rowHeightGetter为function时必设 | number,function | | function |
| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 |
| scrollTop | 滚动条相对于顶部的偏移 | number | —|0 |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft|
| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop |
| setOverflowX | 设置是否显示横向滚动条 | b |
| setOverflowY | 设置是否显示横向滚动条 | b|
| getScrollLeft | 获取滚动条相对于左边的偏移 | —|
| getScrollTop | 获取滚动条相对于顶部的偏移 | — |
| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — |
| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—|
| setEstimatedColumnSize | 设置列宽 |width|
| setEstimatedRowSize | 设置行宽 | height |
| restore | 还原列表设置 | — |
| populate | 刷新列表 | items |
## 事件
| 事件 | 说明 | 回调参数
| :------ |:------------- |:----------|
|BI.CollectionView.EVENT_SCROLL| 滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} |
---

51
uidoc/core/abstract/virtual_group.md

@ -1,2 +1,51 @@
# virtual_group
# bi.virtual_group
## 一组具有相同属性的元素集合,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/gesh31xg/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.virtual_group",
width: 500,
height: 300,
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
layouts: [{
type: "bi.vertical"
}, {
type: "bi.center_adapt",
}],
items:[]
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| items | 子组件数组 | array | | [ ] |
| layouts | 布局 | array | | [{type: "bi.center",hgap: 0,vgap: 0}] |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| setValue | 设置value值 | value,可以是单个值也可以是个数组 |
| getValue | 获取被选中的值 |—|
| prependItems | 内部前插入 | items |
| addItems | 内部后插入 | items |
| populate | 刷新列表 | items |
| render | 渲染列表 | |
---

52
uidoc/core/abstract/virtual_list.md

@ -1,2 +1,52 @@
# virtual_list
# bi.virtual_list
## VirtualList,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/L995LrL9/)
{% common %}
```javascript
BI.createWidget({
type: "bi.virtual_list",
element:"body",
items: BI.map([{value: "xxxx"}], function (i, item) {
return BI.extend({}, item, {
type: "bi.label",
height: 30,
text: (i + 1) + "." + item.text,
});
})
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| items | 子组件数组 | array | | [ ] |
| blockSize | | number | | 10 |
| overscanHeight | | number | | 100 |
| scrollTop | 滚动条相对于顶部的偏移 | number | — | 0 |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| render | 渲染列表 | —|
| mounted | 组件挂载 | —|
| restore | 还原列表设置 | — |
| populate | 刷新列表 | items |
| destroyed | 销毁组件 | —|
---

86
uidoc/core/combination/bi.combo.md

@ -1,2 +1,86 @@
# combo
# bi.combo
## combo,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/wxykkjou/)
{% common %}
```javascript
BI.createWidget({
type: "bi.combo",
element: "body",
adjustLength: 2,
el: {
type: "bi.button",
text: "测试",
height: 25
},
popup: {}
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| trigger | 事件类型 | string | | "click" |
| toggle | 切换状态 | boolean | true,false | true |
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "bottom"|
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false |
| destroyWhenHide | 隐藏弹窗层是否销毁 | boolean | true,false | false |
| isNeedAdjustHeight | 是否需要高度调整 | boolean | true,false | true |
| isNeedAdjustWidth | 是否需要宽度调整 | boolean | true,false | true |
| stopEvent | 阻止事件冒泡 | boolean | true,false | false |
| stopPropagation | 阻止事件冒泡 | boolean | true,false | false |
| adjustLength | 调整的距离 | number | — | 0 |
| adjustXOffset | 调整横向偏移 | number | — | 0 |
| adjustYOffset |调整纵向偏移 | number | — | 0 |
| hideChecker | | function | | —|
| offsetStyle | 弹出层显示位置 | string | left,right,center | "left,right,center"|
| el | 开启弹出层的元素 | object | — |{ }|
| popup | 弹出层 | object | — | { }|
| comboClass | | string | | "bi-combo-popup" |
| hoverClass | | string | | "bi-combo-hover" |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| adjustWidth | 调整宽度 | —|
| adjustHeight | 调整高度 | —|
| resetListHeight | 重置列表高度 | height |
| resetListWidth | 重置列表宽度 | width |
| populate | 刷新列表 | items |
| setValue |设置combo value值| v |
| getValue | 获取combo value值 | —|
| isViewVisible | 弹窗层是否可见 | —|
| showView | ||
| hideView |||
| getView |||
| getPopupPosition |||
| toggle |||
|destroy |||
## 事件
| 名称 | 说明 |
| :------ |:------------- |
|BI.Combo.EVENT_TRIGGER_CHANGE | trigger发生改变触发 |
|BI.Combo.EVENT_CHANGE | 弹出层点击触发 |
|BI.Combo.EVENT_EXPAND | 下拉框展开触发 |
|BI.Combo.EVENT_COLLAPSE | 下拉框收起触发
|BI.Combo.EVENT_AFTER_INIT | 下拉框初始化后触发 |
|BI.Combo.EVENT_BEFORE_POPUPVIEW | 下拉列表弹出前触发 |
|BI.Combo.EVENT_AFTER_POPUPVIEW | 下拉列表弹出后触发 |
|BI.Combo.EVENT_BEFORE_HIDEVIEW | 下拉列表收起前触发 |
|BI.Combo.EVENT_AFTER_HIDEVIEW | 下拉列表收起后触发 |
---

52
uidoc/core/combination/bi.expander.md

@ -1,2 +1,52 @@
# expander
# bi.expander
## 某个可以展开的节点,基类[BI.Widget](/core/widget.md)
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| trigger | 事件类型 | string | | "click" |
| toggle | 切换状态 | boolean | true,false | true |
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "bottom"|
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false |
| el | 开启弹出层的元素 | object | — |{ }|
| popup | 弹出层 | object | — | { }|
| expanderClass | | string | | "bi-expander-popup" |
| hoverClass | | string | | "bi-expander-hover" |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| populate | 刷新列表 | items |
| setValue | 设置combo value值| v |
| getValue | 获取combo value值 | —|
| isViewVisible | 弹窗层是否可见 | —|
| showView | ||
| hideView |||
| getView |||
| getAllLeaves | 获取所有的叶子节点 | —|
| getNodeById | 根据id获取节点 | id |
| getNodeByValue | 根据value值获取节点 | value |
| isExpanded | 节点是否展开 | |
| destroy | 销毁组件| — |
## 事件
| 名称 | 说明 |
| :------ |:------------- |
|BI.Expander.EVENT_TRIGGER_CHANGE | trigger发生改变触发 |
|BI.Expander.EVENT_CHANGE | 弹出层点击触发 |
|BI.Expander.EVENT_EXPAND | Expander展开触发 |
|BI.Expander.EVENT_COLLAPSE | Expander收起触发
|BI.Expander.EVENT_AFTER_INIT | Expander初始化后触发 |
|BI.Expander.EVENT_BEFORE_POPUPVIEW | 下拉列表弹出前触发 |
|BI.Expander.EVENT_AFTER_POPUPVIEW | 下拉列表弹出后触发 |
|BI.Expander.EVENT_BEFORE_HIDEVIEW | 下拉列表收起前触发 |
|BI.Expander.EVENT_AFTER_HIDEVIEW | 下拉列表收起后触发 |
---

33
uidoc/core/combination/group_combo.md

@ -1,2 +1,33 @@
# group_combo
# bi.combo_group
## 基类[BI.Widget](/core/widget.md)
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| trigger | 事件类型 | string | | "click,hover" |
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "right"|
| childern | 子组件 | array | — | [ ] |
| el | 开启弹出层的元素 | object | — | {type: "bi.text_button", text: "", value: ""}|
| popup | 弹出层 | object | — |{el: {type: "bi.button_tree",chooseType: 0,layouts: [{type: "bi.vertical"}]}}|
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false |
| isNeedAdjustHeight | 是否需要高度调整 | boolean | true,false | false |
| isNeedAdjustWidth | 是否需要宽度调整 | boolean | true,false | false |
| adjustLength | 调整的距离 | number | — | 0 |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| populate | 刷新列表 | items |
| setValue | 设置combo value值| v |
| getValue | 获取combo value值 | — |
---

49
uidoc/core/combination/loader.md

@ -1,2 +1,49 @@
# loader
# bi.loader
## 加载控件,[BI.Widget](/core/widget.md)
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "top"|
| isDefaultInit | 是否默认初始化子数据 |boolean | true,false | true |
| logic | | object | | {dynamic:true,scrolly:true} |
| items| | array | | []|
| itemsCreator | | function | | — |
| onLoaded | | function | | — |
| count | 是否显示总页数 | boolean| true,false|boolean|
| prev | 上一页 | boolean | true,false | boolean |
| next | 下一页 | boolean | true,false | boolean |
| hasPrev | 判断是否有上一页 | function | | — |
| hasNext | 判断是否有下一页 | function | | — |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| hasNext | 判断是否有下一页 | — |
| prependItems | 内部前插入 | items |
| addItems | 内部后插入 | items |
| populate | 刷新列表 | items |
| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组|
| setValue | 设置value值 | value,可以是单个值也可以是个数组 |
| getNotSelectedValue | 获取没有被选中的值 | —|
| getValue | 获取被选中的值 |—|
| getAllButtons | 获取所有button |—|
| getAllLeaves | 获取所有的叶子节点 | —|
| getSelectedButtons | 获取所有被选中的元素 | —|
| getNotSelectedButtons | 获取所有未被选中的元素 | —|
| getIndexByValue | 根据value值获取value在数组中的索引 | value|
| getNodeById | 根据id获取节点 | id |
| getNodeByValue | 根据value值获取节点 | value |
| empty| 清空组件|—|
| destroy| 销毁组件|—|
---

79
uidoc/core/combination/navigation.md

@ -1,2 +1,79 @@
# navigation
# bi.navigation
## 导航栏控件,[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/ubsren48/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.navigation",
tab: {
height: 30,
items: [{
once: false,
text: "后退",
value: -1
}, {
once: false,
text: "前进",
value: 1
}]
},
cardCreator: function(v) {
return BI.createWidget({
type: "bi.label",
cls: "layout-bg" + BI.random(1, 8),
text: "第" + v + "页"
})
}
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| direction | 控件位置 | string | top,bottom,left,right,custom | "bottom"|
| single | 是否为单页 | boolean | true,false | true |
| defaultShowIndex | 是否默认显示 |boolean | true,false | true |
| tab | tab页元素 | boolean | true,false | true |
| defaultShowIndex | 是否默认显示 | boolean | true,false | false |
| logic | | object | | {dynamic:true} |
| cardCreator | 面板构造器 | function | — | v |
| afterCardCreated | 面板构造之后 | function | — | — |
| afterCardShow | 面板显示之后 | function | - | — |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| render | 渲染组件 | — |
| mounted | 挂载组件 | —|
| afterCardCreated | | v |
| afterCardShow | | v |
| setSelect | 设置选中的index | v |
| getSelect | 获取选中的index| —|
| getSelectedCard | | —|
| populate | 刷新列表 | items |
| setValue | 设置value值 | value |
| getValue | 获取被选中的值 |—|
| empty| 清空组件|—|
| destroy| 销毁组件|—|
---

102
uidoc/core/combination/searcher.md

@ -1,2 +1,102 @@
# searcher
# bi.searcher
## 搜索逻辑控件,[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/k6s24et1/)
{% common %}
```javascript
BI.createWidget({
type: "bi.searcher",
element:"#wrapper",
adapter: {
getItems: function () {
return [{
type: "bi.label",
value: "张三"
}]
}
},
popup: {
type: "bi.button_group",
cls: "bi-border",
items: items,
layouts: [{
type: "bi.vertical"
}],
},
masker: false
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| hgap | 效果相当于容器左右padding值 | number | | 0 |
| vgap | 效果相当于容器上下padding值 | number | | 0 |
| lgap | 效果相当于容器left-padding值 | number | | 0 |
| rgap | 效果相当于容器right-padding值 | number | | 0 |
| tgap | 效果相当于容器top-padding值 | number | | 0 |
| bgap | 效果相当于容器bottom-padding值 | number | | 0 |
| chooseType | 选择类型 | const | | CHOOSE_TYPE_SINGLE |
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false |
| isAutoSearch | 是否自动搜索 |boolean | true,false | true |
| isAutoSync | 是否自动同步数据, 即是否保持搜索面板和adapter面板状态值的统一 |boolean | true,false | true |
| onSearch | isAutoSearch为false时启用 | function(op.callback) | | |
| el | 开启弹出层的元素 | object | — | {type: "bi.search_editor"}|
| popup | 弹出层 | object | — |{type: "bi.searcher_view"}|
| adapter | 弹出层显示的位置元素 | object | - | null|
| masker | masker层 | object | — | {offset: {}}|
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| populate | 刷新列表 | result, searchResult, keyword |
| setValue | 设置value值 | value |
| getValue | 获取被选中的值 |—|
| empty| 清空组件|—|
| destroy| 销毁组件|—|
| adapter | | |
| doSearch | 开始搜索 | — |
| stopSearch | 停止搜索 | —|
| isSearching | 是否正在搜索 | —|
| isViewVisible | 组件是否可见 | —|
| getView | 获取搜索列表栏 | —|
| hasMatched | 是否匹配 | —|
| adjustHeight | 调整高度 | —|
| adjustView| 调整搜索列表栏| —|
| getKeyword | 获取搜索关键词| —|
| getKeywords | 获取搜索关键词数组| —|
## 事件方法
| 事件名称| 说明| 回调参数 |
| :------ |:------------- | :-----
| EVENT_START | 开始搜索 | —|
| EVENT_STOP | 停止搜索 | —|
| EVENT_PAUSE | 暂停搜索 | —|
| EVENT_SEARCHING | 搜索中| —|
| EVENT_AFTER_INIT | 初始化之后 | —|
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.Searcher.EVENT_CHANGE | 搜索结果面板发生改变触发 |
|BI.Searcher.EVENT_START | 开始搜索触发 |
|BI.Searcher.EVENT_STOP | 停止搜索触发(搜索框为空) |
|BI.Searcher.EVENT_PAUSE | 搜索暂停触发(搜索文本以空白字符结尾) |
|BI.Searcher.EVENT_SEARCHING | 正在搜索时触发 |
|BI.Searcher.EVENT_AFTER_INIT | 搜索结果面板初始化完成后触发 |
---

83
uidoc/core/combination/switcher.md

@ -1,2 +1,83 @@
# switcher
# bi.switcher
## 切换显示或隐藏面板,[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/4sj60ap0/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.switcher",
el: {
type: "bi.button",
height: 25,
text: "Switcher"
},
popup: {
},
adapter: {
}
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| trigger | 事件类型 | string | | "click" |
| toggle | 切换状态 | boolean | true,false | true |
| direction | 面板显示的位置 | string | — | BI.Direction.Top |
| el | 开启弹出层的元素 | object | — | { }|
| popup | 弹出层 | object | — |{ }|
| adapter | 弹出层的位置 | object | — | null|
| masker | masker层 | | — | { }|
| switcherClass | — | string| —| "bi-switcher-popup" |
| hoverClass | - | string | - | "bi-switcher-hover" |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| setValue | 设置value值 | value |
| getValue | 获取被选中的值 |—|
| empty| 清空组件|—|
| destroy| 销毁组件|—|
| populate | 刷新列表 | items |
| isViewVisible | 弹窗层是否可见 | —|
| showView | 显示弹出层 | —|
| hideView | 隐藏弹出层|—|
| getView | 获取弹出层|—|
| getAllLeaves | 获取所有的叶子节点 | —|
| getNodeById | 根据id获取节点 | id |
| getNodeByValue | 根据value值获取节点 | value |
| isExpanded | 节点是否展开 |— |
| setAdapter | 设置弹出层显示的位置元素|adapter|
| adjustView| 调整弹出层显示的位置元素 |—|
## 事件方法
| 事件名称| 说明| 回调参数 |
| :------ |:------------- | :-----
| EVENT_EXPAND | 面板展开 | —|
| EVENT_COLLAPSE | 面板收起 | —|
| EVENT_TRIGGER_CHANGE | 面板切换 | —|
| EVENT_AFTER_INIT | 初始化之后 | —|
| EVENT_BEFORE_POPUPVIEW | 面板显示之前| —|
| EVENT_AFTER_POPUPVIEW | 面板显示之后| —|
| EVENT_BEFORE_HIDEVIEW | 面板隐藏之前| —|
| EVENT_AFTER_HIDEVIEW | 面板隐藏之后 | —|
---

85
uidoc/core/combination/tab.md

@ -1,2 +1,85 @@
# tab
# bi.switcher
## 切换显示或隐藏面板,[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/72gp1n0p/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.tab",
tab: {
type: "bi.button_group",
height: 30,
items: [{
text: "Tab1",
value: 1,
width: 50
}, {
text: "Tab2",
value: 2,
width: 50
}]
},
cardCreator: function(v) {
switch (v) {
case 1:
return BI.createWidget({
type: "bi.label",
cls: "bi-card",
text: "面板1"
})
case 2:
return BI.createWidget({
type: "bi.label",
cls: "bi-card",
text: "面板2"
})
}
}
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| direction | 控件位置 | string | top,bottom,left,right,custom | "bottom"|
| single | 是否为单页 | boolean | true,false | false |
| defaultShowIndex | 是否默认显示tab页 | boolean | true,false | false |
| tab | tab标签页 | object | — | { } |
| defaultShowIndex ||boolean | true,false | false |
| logic | | object | | {dynamic:false} |
| cardCreator | 面板构造器| function | | function (v) {return BI.createWidget();} |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| render | 渲染组件 | — |
| mounted | 挂载组件 | —|
| removeTab | 移除tab面板页 | cardname |
| getTab | 获取tab面板页 | v |
| setSelect | 设置选中的index | v |
| getSelect | 获取选中的index| —|
| getSelectedTab | 获取选中的tab面板页 | —|
| populate | 刷新列表 | items |
| setValue | 设置value值 | value |
| getValue | 获取被选中的值 |—|
| empty| 清空组件|—|
| destroy| 销毁组件|—|
---

63
uidoc/core/layer/layer_float_box.md

@ -1,2 +1,63 @@
# float_box
# bi.float_box
## floatBox弹出层,[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/72gp1n0p/)
{% common %}
```javascript
var id = BI.UUID();
BI.createWidget({
element: "#wrapper",
type: "bi.text_button",
text: "点击弹出FloatBox",
width: 200,
height: 80,
handler: function() {
BI.Popovers.remove(id);
BI.Popovers.create(id, new BI.BarPopoverSection()).open(id);
}
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| width | 弹出层宽度 | number | — | 600 |
| height | 弹出层高度 | number | — | 500 |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| populate | 刷新列表 | sectionProvider |
| destroyed| 销毁组件|—|
| show | 显示 | —|
| hide | 隐藏 | —|
| open | 打开弹出层 | —|
| close| 关闭弹出层 | —|
| setZindex | 设置z-index| z-index |
## 事件方法
| 事件名称| 说明| 回调参数 |
| :------ |:------------- | :-----
| EVENT_FLOAT_BOX_CLOSED | 关闭弹出层 | —|
| EVENT_FLOAT_BOX_CLOSED | 打开弹出层 | —|
---

76
uidoc/core/layer/layer_popup.md

@ -1,2 +1,76 @@
# popup
# bi.popup_view
## 下拉框弹出层, zIndex在1000w,[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/x95pg143/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.popup_view",
el: {
type: "bi.button_group",
items: [{
text: "aaa",
value: "aaa"
}, {
text: "bbb",
value: "bbb"
}],
layouts: [{
type: "bi.vertical"
}]
}
})
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| maxWidth | 弹出层最大宽度 | number/string | — | "auto" |
| minWidth | 弹出层最小宽度 | number | — | 100 |
| maxHeight | 弹出层最大高度 | number/string | — | — |
| minHeight | 弹出层最小高度 | number | — | 25 |
| hgap | 效果相当于容器左右padding值 | number | | 0 |
| vgap | 效果相当于容器上下padding值 | number | | 0 |
| lgap | 效果相当于容器left-padding值 | number | | 0 |
| rgap | 效果相当于容器right-padding值 | number | | 0 |
| tgap | 效果相当于容器top-padding值 | number | | 0 |
| bgap | 效果相当于容器bottom-padding值 | number | | 0 |
| direction| 工具栏的方向| const | | BI.Direction.Top |
| stopEvent | 是否停止mousedown、mouseup事件 | boolean | true,false | false |
| stopPropagation | 是否停止mousedown、mouseup向上冒泡 | boolean | true,false | false |
| tabs | 导航栏 | array | — | [] |
| logic | | object | | {dynamic:true} |
| tools | 自定义工具栏 |boolean | true,false | false |
| buttons | toolbar栏 | array | — | [] |
| el | 子组件 | object | — |{ type: "bi.button_group",items: [], chooseType: 0,behaviors: {},layouts: [{type: "bi.vertical"}]} |
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| populate | 刷新列表 | items |
| resetWidth | 重置宽度 | width |
| resetHeight | 重置高度 | height|
| setValue | 设置value 值 | value |
| getValue| 获取value值 | —|
| setZindex | 设置z-inex| z-index |
| getView | 获取弹出层 | —|
---

40
uidoc/core/layer/layer_searcher.md

@ -1,2 +1,40 @@
# searcher
# bi.searcher_view
## 搜索面板, [BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/k6s24et1/)
{% common %}
```javascript
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| tipText | title文本 | string | — | BI.i18nText("BI-No_Select") |
| chooseType | 选择类型 | const | | BI.Selection.Single |
| matcher | 完全匹配的构造器 | object | — | {type: "bi.button_group",behaviors: { redmark: function () { return true;} },items: [], layouts: [{ type: "bi.vertical"}]} |
| searcher | | object| — | {type: "bi.button_group",behaviors: {redmark: function () {return true;}}, items: [], layouts: [{ type: "bi.vertical" }]}|
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| populate | 刷新列表 | searchResult, matchResult, keyword |
| setValue | 设置value 值 | value |
| getValue| 获取value值 | —|
| empty | 清空组件 | —|
| hasMatched | 是否有匹配的元素 | —|
---

5
uidoc/core/widget.md

@ -32,7 +32,8 @@
## 对外方法
#####(注: fineui2.0引入生命周期后,widget的实现类不需要重写setEnable,setValid等方法,会自动调用子组件的对应方法
,一些需要在设置状态后做的额外工作可以通过重写_setXXX来实现)
#####,一些需要在设置状态后做的额外工作可以通过重写_setXXX来实现)
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| isMounted | 判断组件是否挂载| — |
@ -71,8 +72,6 @@
---

11
uidoc/detailed/combo/single_tree_combo.md

@ -8,7 +8,7 @@
{% common %}
```javascript
var tree = BI.createWidget({
type: "bi.simple_tree_combo",
type: "bi.single_tree_combo",
element: 'body',
items: [],
text: "默认值",
@ -39,3 +39,12 @@ var tree = BI.createWidget({
| setValue | 设置值 | setValue |
| getValue | 获取值 | getValue |
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW| 下拉框弹出前触发 |
其他事件详见[Input](../../base/editor/editor.md)
---

8
uidoc/detailed/date/custom_date_time.md

@ -20,3 +20,11 @@ BI.createWidget({
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----|
--- ---
##事件
| 事件 | 说明 |
| :------ |:------------- |
| BI.CustomDateTimeCombo.EVENT_CANCEL| 点击取消触发 |
| BI.CustomDateTimeCombo.EVENT_CONFIRM| 点击确认触发 |
---

10
uidoc/detailed/date/year_month_combo.md

@ -21,4 +21,12 @@ BI.createWidget({
| :------ |:------------- | :-----| :----|:----|
| yearBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | |
| monthBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | |
--- ---
--- ---
##事件
| 事件 | 说明 |
| :------ |:------------- |
| BI.YearMonthCombo.EVENT_BEFORE_POPUPVIEW | 弹出框弹出前触发 |
| BI.YearMonthCombo.EVENT_CONFIRM| 点击确认触发 |
---

11
uidoc/detailed/date/year_quarter_combo.md

@ -21,4 +21,13 @@ BI.createWidget({
| :------ |:------------- | :-----| :----|:----|
| yearBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | |
| monthBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | |
--- ---
--- ---
##事件
| 事件 | 说明 |
| :------ |:------------- |
| BI.YearQuarterCombo.EVENT_BEFORE_POPUPVIEW | 弹出框弹出前触发 |
| BI.YearQuarterCombo.EVENT_CONFIRM| 点击确认触发 |
---

1
uidoc/detailed/down_list_combo.md

@ -69,6 +69,7 @@ BI.createWidget({
##事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.DownListCombo.EVENT_CHANGE| 点击一级节点触发 |
|BI.DownListCombo.EVENT_SON_VALUE_CHANGE| 点击二级节点触发 |
|BI.DownListCombo.EVENT_BEFORE_POPUPVIEW| 下拉列表弹出前触发 |

1
uidoc/detailed/month_combo.md

@ -26,6 +26,7 @@ BI.createWidget({
##事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.MonthCombo.EVENT_CONFIRM| 选中日期或者退出编辑状态触发 |
|BI.MonthCombo.EVENT_BEFORE_POPUPVIEW| 选中日期或者退出编辑状态触发 |

1
uidoc/detailed/multi_select_combo.md

@ -32,4 +32,5 @@ BI.createWidget({
| ---------------------------- | ---------------- | ------------------------------------ | |
| 事件 | 说明 |
| :------ |:------------- |
|BI.MultiSelectCombo.EVENT_CONFIRM| 点击确定触发 |

1
uidoc/detailed/numeric_interval.md

@ -37,5 +37,6 @@ BI.createWidget({
##事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.NumericalInterval.EVENT_VALID| 区间合法的状态事件 |
|BI.NumericalInterval.EVENT_ERROR| 区间不合法的状态事件 |

1
uidoc/detailed/quarter_combo.md

@ -26,5 +26,6 @@ BI.createWidget({
##事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.QuarterCombo.EVENT_CONFIRM| 选中日期或者退出编辑状态触发 |
|BI.QuarterCombo.EVENT_BEFORE_POPUPVIEW| 选中日期或者退出编辑状态触发 |

31
uidoc/detailed/table/bi.preview_table.md

@ -7,28 +7,25 @@
{% common %}
```javascript
var items = [[{
text: "第一行第一列"
}, {
text: "第一行第二列"
}, {
text: "第一行第三列"
}]];
var header = [[{
text: "表头1"
}, {
text: "表头2"
}, {
text: "表头3"
}]];
BI.createWidget({
type: "bi.preview_table",
header: header,
header: [[{
text: "表头1"
}, {
text: "表头2"
}, {
text: "表头3"
}]],
element: 'body',
columnSize: [100, "", 50],
items: items
items: [[{
text: "第一行第一列"
}, {
text: "第一行第二列"
}, {
text: "第一行第三列"
}]]
});
```

31
uidoc/detailed/table/bi.responsive_table.md

@ -7,21 +7,6 @@
{% common %}
```javascript
var items = [[{
text: "第一行第一列"
}, {
text: "第一行第二列"
}, {
text: "第一行第三列"
}]];
var header = [[{
text: "表头1"
}, {
text: "表头2"
}, {
text: "表头3"
}]];
BI.createWidget({
type: "bi.responsive_table",
@ -29,8 +14,20 @@ BI.createWidget({
isNeedFreeze: true,
mergeCols: [0, 1],
columnSize: ["", "", ""],
items: items,
header: header,
items: [[{
text: "第一行第一列"
}, {
text: "第一行第二列"
}, {
text: "第一行第三列"
}]],
header: [[{
text: "表头1"
}, {
text: "表头2"
}, {
text: "表头3"
}]],
element: 'body'
});
```

9
uidoc/detailed/text_input/bi.clear_editor.md

@ -40,3 +40,12 @@ BI.createWidget({
--- ---
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.ClearEditor.EVENT_CLEAR| 点击清空按钮触发 |
---
其他事件详见[Input](../../base/editor/editor.md)

25
uidoc/detailed/text_input/bi.search_editor.md

@ -17,24 +17,6 @@ BI.createWidget({
{% endmethod %}
## bi.small_search_editor
### 小一号的搜索框
##### height默认为24
{% method %}
[source](https://jsfiddle.net/fineui/wwzza22k/)
{% common %}
```javascript
BI.createWidget({
type: 'bi.search_editor',
element: '#wrapper',
width: 300,
watermark:"搜索",
});
```
{% endmethod %}
##API
| 参数 | 说明 | 类型 | 可选值 | 默认值
@ -57,4 +39,11 @@ BI.createWidget({
--- ---
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.SearchEditor.EVENT_CLEAR| 点击清空按钮触发 |
---
其他事件详见[Editor](../../base/editor/editor.md)

51
uidoc/detailed/text_input/bi.text_editor.md

@ -19,52 +19,6 @@ BI.createWidget({
{% endmethod %}
## 不可为空输入框
{% method %}
[source](https://jsfiddle.net/fineui/d7td9tfr/)
{% common %}
```javascript
BI.createWidget({
type: "bi.text_editor",
element: "#wrapper",
width: 200,
height: 30,
watermark:"这个不予许空",
value: "这是一个不可为空的输入框",
allowBlank: false,
errorText: "不允许为空"
});
```
{% endmethod %}
## 可为空输入框
{% method %}
[source](https://jsfiddle.net/fineui/kjmyg9ps/)
{% common %}
```javascript
BI.createWidget({
type: "bi.text_editor",
element: "#wrapper",
width: 200,
height: 30,
allowBlank: true,
errorText: "不能输入只输入a!",
validationChecker: function (v) {
if (v == "a") {
return false;
}
return true;
},
});
```
{% endmethod %}
##API
| 参数 | 说明 | 类型 | 可选值 | 默认值
@ -87,3 +41,8 @@ BI.createWidget({
--- ---
## 事件
| 事件 | 说明 |
| :------ |:------------- |
---
其他事件详见[Editor](../../base/editor/editor.md)

27
uidoc/detailed/text_input/finetuning_number_editor.md

@ -1,2 +1,29 @@
# finetuning_number_editor
## 数值微调器
{% method %}
[source](https://jsfiddle.net/fineui/52dhwtfz/)
{% common %}
```javascript
BI.createWidget({
type: 'bi.fine_tuning_number_editor',
element: '#wrapper',
width: 300
});
```
{% endmethod %}
##参数
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----|
| value | 编辑框中的值,-1表示自动 | number | | -1 |
--- ---
##事件
| 事件 | 说明 |
|BI.FineTuningNumberEditor.EVENT_CONFIRM| 点击增加/减少按钮或者编辑框确定时触发 |

7
uidoc/detailed/tree/bi.multi_tree_combo.md

@ -52,6 +52,9 @@ BI.createWidget({
| getValue | 获取文本框值 | getValue() |
| populate | 更改树结构内容 | populate(items) |
##
BI.MultiTreeCombo.EVENT_CONFIRM
## 事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.MultiTreeCombo.EVENT_CONFIRM| 点击一级节点触发 |
---

1
uidoc/detailed/year_combo.md

@ -28,6 +28,7 @@ BI.createWidget({
##事件
| 事件 | 说明 |
| :------ |:------------- |
|BI.YearCombo.EVENT_CONFIRM| 选中日期或者退出编辑状态触发 |
|BI.YearCombo.EVENT_BEFORE_POPUPVIEW| 选中日期或者退出编辑状态触发 |

Loading…
Cancel
Save