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