forked from fanruan/fineui
Browse Source
* commit 'bb6f3d8b945d1bea87f7581316a8dc14703cfc53': layer_tree_table 组合空格键和弹出层 finish pager 加事件 和 一些修改 update case 组合控件fineUI文档的编写 提交 update color_chooser 抽象控件fineUI文档的编写es6
guy
7 years ago
59 changed files with 1730 additions and 182 deletions
File diff suppressed because one or more lines are too long
@ -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); |
||||
@ -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 | 获得日期 | — | |
||||
|
||||
|
||||
@ -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 | |
||||
|
||||
@ -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 | 获取颜色值 | — | |
||||
|
||||
|
||||
@ -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 | 清空内容 | — | |
||||
|
||||
|
||||
@ -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 | 清空内容 | — | |
||||
|
||||
|
||||
@ -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| 销毁组件|—| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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} | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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| 清空组件|—| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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} | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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,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 | 销毁组件 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 下拉列表收起后触发 | |
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 下拉列表收起后触发 | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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值 | — | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 搜索结果面板初始化完成后触发 | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 面板隐藏之后 | —| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 打开弹出层 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 获取弹出层 | —| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | 是否有匹配的元素 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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| 点击增加/减少按钮或者编辑框确定时触发 | |
||||
Loading…
Reference in new issue