Browse Source

抽象控件fineUI文档的编写

es6
WoodyJang 7 years ago
parent
commit
537dd6ee1f
  1. 4
      uidoc/base/editor/code_editor.md
  2. 2
      uidoc/base/editor/editor.md
  3. 12
      uidoc/base/editor/formula_editor.md
  4. 2
      uidoc/base/editor/multifile_editor.md
  5. 2
      uidoc/base/editor/textarea_editor.md
  6. 2
      uidoc/base/pager.md
  7. 10
      uidoc/base/svg.md
  8. 74
      uidoc/core/abstract/button_group.md
  9. 57
      uidoc/core/abstract/button_tree.md
  10. 67
      uidoc/core/abstract/collection_view.md
  11. 85
      uidoc/core/abstract/custom_tree.md
  12. 74
      uidoc/core/abstract/grid_view.md
  13. 51
      uidoc/core/abstract/virtual_group.md
  14. 60
      uidoc/core/abstract/virtual_list.md
  15. 88
      uidoc/core/combination/bi.combo.md

4
uidoc/base/editor/code_editor.md

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

2
uidoc/base/editor/editor.md

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

12
uidoc/base/editor/formula_editor.md

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

2
uidoc/base/editor/multifile_editor.md

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

2
uidoc/base/editor/textarea_editor.md

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

2
uidoc/base/pager.md

@ -3,7 +3,7 @@
## 分页控件,基类[BI.Widget](/core/widget.md) ## 分页控件,基类[BI.Widget](/core/widget.md)
{% method %} {% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/) [source](https://jsfiddle.net/fineui/rhhte9b3/)
{% common %} {% common %}
```javascript ```javascript

10
uidoc/base/svg.md

@ -3,16 +3,16 @@
## svg绘图,基类[BI.Widget](/core/widget.md) ## svg绘图,基类[BI.Widget](/core/widget.md)
{% method %} {% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/) [source](https://jsfiddle.net/fineui/1xn8snp3/)
{% common %} {% common %}
```javascript ```javascript
var svg = BI.createWidget({ var svg = BI.createWidget({
type: "bi.svg", type: "bi.svg",
width: 500, width: 500,
height: 600 height: 600
}); });
var circle = svg.circle(100, 100, 10); var circle = svg.circle(100, 100, 10);
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);

74
uidoc/core/abstract/button_group.md

@ -1,2 +1,74 @@
# 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",
ref: function (_ref) {
ref = _ref;
},
chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
layouts: [{
type: "bi.vertical",
items: [{
type: "bi.vtape",
height: 150,
}]
}],
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| 销毁组件|—|
---

57
uidoc/core/abstract/button_tree.md

@ -1,2 +1,57 @@
# 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"
}, {
type: "bi.center_adapt",
}],
items: [{
type: "bi.label",
text: "0",
value: "label1",
height:50,
vgap:10
}, {
type: "bi.button",
text: "1",
value: "按钮1",
height:30
}]
})
```
{% 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 |
---

67
uidoc/core/abstract/collection_view.md

@ -1,2 +1,67 @@
# 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 |
---

85
uidoc/core/abstract/custom_tree.md

@ -1,2 +1,85 @@
# custom_tree # bi.custom_tree
## 自定义树,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/gesh31xg/)
{% common %}
```javascript
var TREEITEMS=[{
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
}];
BI.createWidget({
type: "bi.custom_tree",
el: {
type: "bi.button_tree",
chooseType: 0,
layouts: [{
type: "bi.vertical",
hgap: 30
}]
},
items: BI.deepClone(TREEITEMS)
});
```
{% 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| 清空组件|—|
---

74
uidoc/core/abstract/grid_view.md

@ -1,2 +1,74 @@
# 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 |
---

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 | 渲染列表 | |
---

60
uidoc/core/abstract/virtual_list.md

@ -1,2 +1,60 @@
# virtual_list # bi.virtual_list
## VirtualList,基类[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/L995LrL9/)
{% common %}
```javascript
var ITEMS = BI.map("柳州市城贸金属材料有限责任公司 柳州市建福房屋租赁有限公司 柳州市迅昌数码办公设备有限责任公司 柳州市河海贸易有限责任公司 柳州市花篮制衣厂 柳州市兴溪物资有限公司 柳州市针织总厂 柳州市衡管物资有限公司 柳州市琪成机电设备有限公司 柳州市松林工程机械修理厂".match(/[^\s]+/g), function (i, v) {
return {
text: v,
value: v,
title: v
}
});
BI.createWidget({
type: "bi.virtual_list",
element:"body",
items: BI.map(ITEMS, 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 | 销毁组件 | —|
---

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

@ -1,2 +1,88 @@
# combo # bi.combo
## combo,基类[BI.Widget](/core/widget.md)
{% method %}
[source]()
{% common %}
```javascript
BI.createWidget({
type: "bi.combo",
element: “body”,
adjustLength: 2,
el: {
type: "bi.button",
text: "测试",
height: 25
},
popup: {
el: {
type: "bi.button_group",
items: BI.makeArray(100, {
type: "bi.text_item",
height: 25,
text: "item"
}),
layouts: [{
type: "bi.vertical"
}]
},
maxHeight: 300
}
});
```
{% 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 |||
---

Loading…
Cancel
Save