forked from fanruan/fineui
WoodyJang
7 years ago
15 changed files with 566 additions and 24 deletions
@ -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| 销毁组件|—| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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| 清空组件|—| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 渲染列表 | | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 销毁组件 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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…
Reference in new issue