forked from fanruan/fineui
Browse Source
* commit 'b0f6bcc7d880de8528c285b69f383f2d2738ad04': update return的storeValue deepClone一下 布局文档以及基础控件文档 详细控件 update table add add update bi.table_view update update layout finish detailed table update 补一下详细控件 update detailed tree struct minor change finish bi.table remove paragrah number float_center布局 add expandable pluginmaster
guy
7 years ago
93 changed files with 1885 additions and 828 deletions
File diff suppressed because one or more lines are too long
@ -1,2 +1,40 @@ |
|||||||
# bubble |
# bi.bubble |
||||||
|
|
||||||
|
#### 气泡提示 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/4u705v2v/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.bubble', |
||||||
|
element: "#wrapper", |
||||||
|
height: 30, |
||||||
|
text: "测试" |
||||||
|
}) |
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :---- |:---- |
||||||
|
| direction | 气泡显示位置 | string | | "top" | |
||||||
|
| height | 气泡高度 | number | | 35 | |
||||||
|
| text | 气泡显示内容 | string | | " " | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| setText | 设置文本值 | 需要设置的文本值text| |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,71 @@ |
|||||||
# label |
# bi.label |
||||||
|
|
||||||
|
#### 文本标签 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/47f5ps1j/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
textWidth: 100, |
||||||
|
textHeight: 30, |
||||||
|
text: "基本标签" |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% 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 | |
||||||
|
| textWidth | 文本标签宽度 | number| | null | |
||||||
|
| textHeight | 文本标签宽度 | number| | null | |
||||||
|
| text | 文本内容 | string | | " " | |
||||||
|
|
||||||
|
|
||||||
|
##### 高级属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| textAlign | 文本对齐方式 | string | left,center,right | center | |
||||||
|
| whiteSpace | 元素内空白处理方式 | string| normal,nowrap | nowrap| |
||||||
|
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | true | |
||||||
|
| py | | string | | 空 | |
||||||
|
| keyword | | string | | 空 | |
||||||
|
| disabled | 灰化 | boolean| true,false | 无 | |
||||||
|
| title | 提示title | string | | 空 | |
||||||
|
| warningTitle | 错误提示title | string | | 空 | |
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| doRedMark | 文本标红 | — | |
||||||
|
| unRedMark | 取消文本标红| —| |
||||||
|
| doHighLight | 文本高亮 | —| |
||||||
|
| unHighLight | 取消文本高亮 | —| |
||||||
|
| setText| 设置文本值 | 需要设置的文本值text| |
||||||
|
| getText| 获取文本值 | —| |
||||||
|
| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | |
||||||
|
| setValue | 设置文本值 | 需要设置的文本值text | |
||||||
|
| populate| | —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,39 @@ |
|||||||
# message |
# bi.Msg |
||||||
|
|
||||||
|
#### 消息提示 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source]() |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.button", |
||||||
|
element: "#wrapper", |
||||||
|
text : '点击我弹出一个消息框', |
||||||
|
height : 30, |
||||||
|
handler : function() { |
||||||
|
BI.Msg.confirm('测试消息框',"我是测试消息框的内容"); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| alert | 警告消息框 | title, message, callback| |
||||||
|
| confirm | 确认消息框 | title, message, callback | |
||||||
|
| prompt | 提示消息框 | title, message, value, callback, min_width | |
||||||
|
| toast | toast提示 | message, level, context| |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|||||||
@ -1,2 +1,71 @@ |
|||||||
# collection_table |
# bi.collection_table |
||||||
|
|
||||||
|
### 继承BI.Widget |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/0e7p2ezc/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.collection_table", |
||||||
|
element: "body", |
||||||
|
columnSize: [200,200], |
||||||
|
items: [ |
||||||
|
[{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "第一行第一列" |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "第一行第二列" |
||||||
|
}], |
||||||
|
[{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg3", |
||||||
|
text: "第二行第一列" |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg4", |
||||||
|
text: "第二行第二列" |
||||||
|
}] |
||||||
|
] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ---------------- | ------------- | -------------------- | ----------------- | |
||||||
|
| isNeedFreeze | 是否冻结列 | bool | false | |
||||||
|
| freezeCols | 冻结的列 | array | [] | |
||||||
|
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||||
|
| mergeCols | 合并的单元格列号 | array | [] | |
||||||
|
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||||
|
| columnSize | 单元格宽度集合 | array | [] | |
||||||
|
| headerRowSize | 表头高度 | number | 25 | |
||||||
|
| rowSize | 普通单元格高度 | number | 25 | |
||||||
|
| regionColumnSize | 列项间的 | array | [] | |
||||||
|
| items | 子组件 | array | [] | |
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 用法 | |
||||||
|
| ------------------------- | ----------- | ------------------------------------ | |
||||||
|
| setWidth | 设置宽度 | setWidth(width) | |
||||||
|
| setHeight | 设置高度 | setHeight(height) | |
||||||
|
| setColumnSize | 设置列宽 | setColumnSize(columnSize) | |
||||||
|
| getColumnSize | 得到列宽 | getColumnSize() | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | setRegionColumnSize(columnSize) | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | getRegionColumnSize() | |
||||||
|
| getScrollRegionColumnSize | 获取横向滚动条宽度 | getScrollRegionColumnSize() | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | setVerticalScroll(scrollTop) | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | setLeftHorizontalScroll(scrollLeft) | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | setRightHorizontalScroll(scrollLeft) | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | getVerticalScroll() | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | getLeftHorizontalScroll() | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | getRightHorizontalScroll() | |
||||||
|
| getColumns | 获取列项 | getColumns() | |
||||||
|
| populate | 增加行 | populate(rows) | |
||||||
|
| restore | 存储数据 | restore() | |
||||||
@ -1,2 +1,56 @@ |
|||||||
# grid_table |
# bi.grid_table |
||||||
|
|
||||||
|
### 列表展示的table，继承BI.Widget |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/a936vcvj/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.grid_table", |
||||||
|
element: 'body', |
||||||
|
width: 600, |
||||||
|
height: 500, |
||||||
|
isResizeAdapt: true, |
||||||
|
isNeedResize: true, |
||||||
|
isNeedFreeze: true, |
||||||
|
freezeCols: [0, 1], |
||||||
|
columnSize: [50,50,200,250,400], |
||||||
|
items: items, |
||||||
|
header: header |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ---------------- | ------- | ------ | ----- | |
||||||
|
| isNeedFreeze | 是否需要冻结 | bool | false | |
||||||
|
| freezeCols | 冻结列 | array | [] | |
||||||
|
| columnSize | 单元格宽度集合 | array | [] | |
||||||
|
| headerRowSize | 表头高度 | number | 25 | |
||||||
|
| rowSize | 普通单元格高度 | number | 25 | |
||||||
|
| regionColumnSize | 列项间的 | array | [] | |
||||||
|
| header | 表头 | array | [] | |
||||||
|
| items | 子组件 | array | [] | |
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 用法 | |
||||||
|
| ------------------------ | ----------- | ------------------------------------ | |
||||||
|
| setWidth | 设置宽度 | setWidth(width) | |
||||||
|
| setHeight | 设置高度 | setHeight(height) | |
||||||
|
| getRegionSize | 获取间隙大小 | getRegionSize() | |
||||||
|
| setColumnSize | 设置列宽 | setColumnSize(columnSize) | |
||||||
|
| getColumnSize | 得到列宽 | getColumnSize() | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | setRegionColumnSize(columnSize) | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | getRegionColumnSize() | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | setVerticalScroll(scrollTop) | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | setLeftHorizontalScroll(scrollLeft) | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | setRightHorizontalScroll(scrollLeft) | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | getVerticalScroll() | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | getLeftHorizontalScroll() | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | getRightHorizontalScroll() | |
||||||
|
| populate | 增加行 | populate(rows) | |
||||||
|
| restore | 储存 | restore() | |
||||||
|
|||||||
@ -1,2 +1,74 @@ |
|||||||
# resizable_table |
# bi.resizable_table |
||||||
|
|
||||||
|
### 可调整列宽的grid表格，继承BI.Widget |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/0e7p2ezc/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.resizable_table", |
||||||
|
element: "body", |
||||||
|
columnSize: [200,200], |
||||||
|
items: [ |
||||||
|
[{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "第一行第一列" |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "第一行第二列" |
||||||
|
}], |
||||||
|
[{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg3", |
||||||
|
text: "第二行第一列" |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg4", |
||||||
|
text: "第二行第二列" |
||||||
|
}] |
||||||
|
] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ---------------- | --------- | ------ | ----- | |
||||||
|
| isNeedFreeze | 是否需要冻结列 | bool | false | |
||||||
|
| freezeCols | 冻结的列 | array | [] | |
||||||
|
| isNeedResize | 是否需要调整大小 | bool | false | |
||||||
|
| isResizeAdapt | 是否调整时自适应 | bool | true | |
||||||
|
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||||
|
| mergeCols | 合并的单元格列号 | array | [] | |
||||||
|
| columnSize | 单元格宽度集合 | array | [] | |
||||||
|
| minColumnSize | 最小列宽 | array | [] | |
||||||
|
| maxColumnSize | 最大列宽 | array | [] | |
||||||
|
| headerRowSize | 表头高度 | number | 25 | |
||||||
|
| rowSize | 普通单元格高度 | number | 25 | |
||||||
|
| header | 表头 | array | [] | |
||||||
|
| regionColumnSize | 列项间的 | array | [] | |
||||||
|
| items | 子组件 | array | [] | |
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 用法 | |
||||||
|
| ------------------------ | ----------- | ------------------------------------ | |
||||||
|
| setWidth | 设置宽度 | setWidth() | |
||||||
|
| setHeight | 设置高度 | setHeight() | |
||||||
|
| setColumnSize | 设置列宽 | setColumnSize(columnSize) | |
||||||
|
| getColumnSize | 得到列宽 | getColumnSize() | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | setRegionColumnSize(columnSize) | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | getRegionColumnSize() | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | setVerticalScroll(scrollTop) | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | setLeftHorizontalScroll(scrollLeft) | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | setRightHorizontalScroll(scrollLeft) | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | getVerticalScroll() | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | getLeftHorizontalScroll() | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | getRightHorizontalScroll() | |
||||||
|
| attr | 设置属性 | attr(key, value) | |
||||||
|
| populate | 增加行 | populate(rows) | |
||||||
|
| restore | 保存表 | restore() | |
||||||
@ -1,2 +1,64 @@ |
|||||||
# table_view |
# bi.table_view |
||||||
|
|
||||||
|
### 表格展示控件 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/mbazb80a/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.table_view", |
||||||
|
element: 'body', |
||||||
|
isNeedMerge: true, |
||||||
|
isNeedFreeze: true, |
||||||
|
freezeCols: [0, 1], |
||||||
|
mergeCols: [0, 1], |
||||||
|
columnSize: [100, 200, 300, 400, 500], |
||||||
|
items: [], |
||||||
|
header: [] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ---------------- | ------------- | -------------------- | ----------------- | |
||||||
|
| isNeedResize | 是否需要调整大小 | bool | false | |
||||||
|
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||||
|
| mergeCols | 合并的单元格列号 | array | [] | |
||||||
|
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||||
|
| columnSize | 单元格宽度集合 | array | [] | |
||||||
|
| headerRowSize | 表头高度 | number | 25 | |
||||||
|
| footerRowSize | 表尾高度 | number | 25 | |
||||||
|
| rowSize | 普通单元格高度 | number | 25 | |
||||||
|
| regionColumnSize | 列项间的 | array | false | |
||||||
|
| header | 表头 | array | [] | |
||||||
|
| footer | 表尾 | array | false | |
||||||
|
| items | 子组件 | array | [] | |
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 用法 | |
||||||
|
| ---------------------------- | ---------------- | ------------------------------------ | |
||||||
|
| resize | 调整表格 | resize() | |
||||||
|
| setColumnSize | 设置列宽 | setColumnSize(columnSize) | |
||||||
|
| getColumnSize | 得到列宽 | getColumnSize() | |
||||||
|
| getCalculateColumnSize | 获得计算后的列宽 | getCalculateColumnSize() | |
||||||
|
| setHeaderColumnSize | 设置表头的列宽 | setHeaderColumnSize(columnSize) | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | setRegionColumnSize(columnSize) | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | getRegionColumnSize() | |
||||||
|
| getCalculateRegionColumnSize | 获取计算后的列项之间的间隙 | getCalculateRegionColumnSize() | |
||||||
|
| getCalculateRegionRowSize | 获取计算后的列项上下之间的间隙 | getCalculateRegionRowSize() | |
||||||
|
| getClientRegionColumnSize | 获取浏览器中显示的列项之间的间隙 | getClientRegionColumnSize() | |
||||||
|
| getScrollRegionColumnSize | 获取横向滚动条宽度 | getScrollRegionColumnSize() | |
||||||
|
| getScrollRegionRowSize | 获取纵向滚动条宽度 | getScrollRegionRowSize() | |
||||||
|
| hasVerticalScroll | 是否含有数值滚动条 | hasVerticalScroll() | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | setVerticalScroll(scrollTop) | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | setLeftHorizontalScroll(scrollLeft) | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | setRightHorizontalScroll(scrollLeft) | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | getVerticalScroll() | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | getLeftHorizontalScroll() | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | getRightHorizontalScroll() | |
||||||
|
| getColumns | 获取列项 | getColumns() | |
||||||
|
| populate | 增加行 | populate(rows) | |
||||||
|
|||||||
@ -1,2 +1,42 @@ |
|||||||
# toast |
# bi.toast |
||||||
|
|
||||||
|
#### toast提示 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source]() |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.toast', |
||||||
|
element: "#wrapper", |
||||||
|
height: 30, |
||||||
|
level: "warning", |
||||||
|
text: "toast测试" |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :---- |:---- |
||||||
|
| level | 提示类型 | string | success,warning | "success" | |
||||||
|
| height | 高度 | number | | 30 | |
||||||
|
| text | 显示内容 | string | | " " | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| setText | 设置文本值 | 需要设置的文本值text | |
||||||
|
| setHeight | 设置高度 | 需要设置的高度值height | |
||||||
|
|
||||||
|
--- |
||||||
|
|||||||
@ -1,2 +1,114 @@ |
|||||||
# border |
# bi.border |
||||||
|
|
||||||
|
#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/qtdsdegp/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
Demo = {}; |
||||||
|
Demo._createNorth = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
text: "North", |
||||||
|
cls: "layout-bg1", |
||||||
|
height: 30 |
||||||
|
}) |
||||||
|
}; |
||||||
|
Demo._createWest = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
cls: "layout-bg2", |
||||||
|
items:[{ |
||||||
|
type: "bi.label", |
||||||
|
text: "West", |
||||||
|
whiteSpace: "normal" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
Demo._createCenter = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
cls: "layout-bg3", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
text: "Center", |
||||||
|
whiteSpace: "normal" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
Demo._createEast = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
cls: "layout-bg5", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
text: "East", |
||||||
|
whiteSpace: "normal" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
Demo._createSouth = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
text: "South", |
||||||
|
cls: "layout-bg6", |
||||||
|
height: 50 |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.border', |
||||||
|
element: "#wrapper", |
||||||
|
cls: "", |
||||||
|
items: { |
||||||
|
north: { |
||||||
|
el: Demo._createNorth(), |
||||||
|
height: 30, |
||||||
|
top: 20, |
||||||
|
left: 20, |
||||||
|
right: 20 |
||||||
|
}, |
||||||
|
south: { |
||||||
|
el: Demo._createSouth(), |
||||||
|
height: 50, |
||||||
|
bottom: 20, |
||||||
|
left: 20, |
||||||
|
right: 20 |
||||||
|
}, |
||||||
|
west: { |
||||||
|
el: Demo._createWest(), |
||||||
|
width: 200, |
||||||
|
left: 20 |
||||||
|
}, |
||||||
|
east: { |
||||||
|
el: Demo._createEast(), |
||||||
|
width: 300, |
||||||
|
right: 20 |
||||||
|
}, |
||||||
|
center: Demo._createCenter() |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| items | 子控件对象 | object | north,east,west,south,center | | | |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,75 @@ |
|||||||
# flow |
# bi.flow |
||||||
|
|
||||||
|
#### 靠左/右对齐的自由浮动布局 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/c761a856/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center_adapt", |
||||||
|
element: "#wrapper", |
||||||
|
items: [{ |
||||||
|
type: "bi.left", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Left-1", |
||||||
|
cls: "layout-bg1", |
||||||
|
hgap: 20 |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Left-2", |
||||||
|
cls: "layout-bg2", |
||||||
|
hgap: 20 |
||||||
|
}], |
||||||
|
hgap: 20, |
||||||
|
vgap: 20 |
||||||
|
}, { |
||||||
|
type: "bi.right", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Right-1", |
||||||
|
cls: "layout-bg3", |
||||||
|
hgap: 20 |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Right-2", |
||||||
|
cls: "layout-bg4", |
||||||
|
hgap: 20 |
||||||
|
}], |
||||||
|
hgap: 20, |
||||||
|
vgap: 20 |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% 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 | |
||||||
|
| items | 子控件数组 | array | | | | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,71 @@ |
|||||||
# grid |
# bi.grid |
||||||
|
|
||||||
|
#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/1gwjbpL6/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.grid', |
||||||
|
element: "#wrapper", |
||||||
|
columns: 2, |
||||||
|
rows: 2, |
||||||
|
items: [{ |
||||||
|
column: 0, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-0, row-0", |
||||||
|
cls: "layout-bg1" |
||||||
|
} |
||||||
|
}, { |
||||||
|
column: 1, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-1, row-0", |
||||||
|
cls: "layout-bg2" |
||||||
|
} |
||||||
|
} { |
||||||
|
column: 0, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-0, row-1", |
||||||
|
cls: "layout-bg5" |
||||||
|
} |
||||||
|
}, { |
||||||
|
column: 1, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-1, row-1", |
||||||
|
cls: "layout-bg6" |
||||||
|
} |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| columns | 列的数量 | number | | null | |
||||||
|
| rows | 行的数量 | number | | null | |
||||||
|
| items | 子控件数组 | array | | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,68 @@ |
|||||||
# horizontal |
# bi.horizontal |
||||||
|
|
||||||
|
#### 水平流式布局 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/oj7y7q3o/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.horizontal', |
||||||
|
element: "#wrapper", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "这里设置了lgap,rgap,tgap,bgap", |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0 |
||||||
|
}], |
||||||
|
width: 100, |
||||||
|
height: 30 |
||||||
|
}, { |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "这里设置了lgap,rgap,tgap,bgap", |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0 |
||||||
|
}], |
||||||
|
width: 200, |
||||||
|
height: 30 |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% 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 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
| columnSize | 每列宽度所组成的数组 | array | | | |
||||||
|
| verticalAlign | 元素的垂直对齐方式 | string | | "middle" | |
||||||
|
| scrollx | 设置水平方向是否有滚动条 | boolean | true,false | true | |
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,64 @@ |
|||||||
# htape |
# bi.htape |
||||||
|
|
||||||
|
#### 水平tape布局,两列定宽,一列自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/ry7Lnhgw/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.htape", |
||||||
|
element: "#wrapper", |
||||||
|
items : [ |
||||||
|
{ |
||||||
|
width: 100, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '1', |
||||||
|
cls: "layout-bg1" |
||||||
|
} |
||||||
|
}, { |
||||||
|
width: 200, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '2', |
||||||
|
cls: "layout-bg2" |
||||||
|
} |
||||||
|
}, { |
||||||
|
width: 'fill', |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '3', |
||||||
|
cls: "layout-bg3" |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% 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 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,37 @@ |
|||||||
# table |
# bi.table |
||||||
|
|
||||||
|
### table作为一个列表集合存在，继承BI.Widget |
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/8t2en619/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
element: "body", |
||||||
|
type: "bi.table", |
||||||
|
items: [], |
||||||
|
columnSize: [100, "fill", 200], |
||||||
|
rowSize: [10, 30, 50, 70, 90, 110, 130], |
||||||
|
hgap: 20, |
||||||
|
vgap: 10 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ---------- | --------- | ------------ | ---------------------------------------- | |
||||||
|
| scrolly | 是否出现滚动条 | bool | true | |
||||||
|
| columnSize | 列项宽度 | array/number | [200, 200, 'fill'] | |
||||||
|
| rowSize | 行高 | array/number | 30 | |
||||||
|
| hgap | 内部元素间纵向距离 | number | 0 | |
||||||
|
| vgap | 内部元素间横向距离 | number | 0 | |
||||||
|
| items | 子项 | array | [{width: 100,el: {type: 'bi.button', text: 'button1'}},{width: 'fill',el: {type: 'bi.button', text: 'button2'}},{width: 200,el: {type: 'bi.button', text: 'button3'}}] | |
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 用法 | |
||||||
|
| :------- | ------ | ---------------- | |
||||||
|
| addItem | 增加内容 | addItem(arr) | |
||||||
|
| populate | 更换新的内容 | poplulate(items) | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,38 @@ |
|||||||
# td |
# bi.td |
||||||
|
|
||||||
|
### 单元格控件，继承BI.Layout |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/v4jrz6a3/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.td", |
||||||
|
element: 'body', |
||||||
|
columnSize: [20, 20, 'fill'], |
||||||
|
items: [] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ---------- | ---- | ------ | ---------------------------------------- | |
||||||
|
| columnSize | 列宽 | array | [200, 200, 200] | |
||||||
|
| hgap | 纵向间隙 | number | 0 | |
||||||
|
| vgap | 横向间隙 | number | 0 | |
||||||
|
| items | 内容项 | array | [[{el: {text: 'label1'}},{ el: {text: 'label2'},{ el: {text: 'label3'} | |
||||||
|
|
||||||
|
|
||||||
|
## 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 用法 | |
||||||
|
| -------- | ------ | ---------------- | |
||||||
|
| addItem | 增加内容 | addItem(arr) | |
||||||
|
| populate | 更换新的内容 | poplulate(items) | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,47 @@ |
|||||||
# vertical |
# bi.vertical |
||||||
|
|
||||||
|
#### 垂直流式布局 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/zjyaz9fn/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'demo.vertical', |
||||||
|
element: "#wrapper", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||||
|
height: 30 |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||||
|
height: 30 |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% 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 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
| scrolly | 设置垂直方向是否有滚动条 | boolean | true,false | true | |
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,64 @@ |
|||||||
# vtape |
# bi.vtape |
||||||
|
|
||||||
|
#### 垂直tape布局,两列定高,一列自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/ufpnz53d/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.vtape", |
||||||
|
element: "#wrapper", |
||||||
|
items : [ |
||||||
|
{ |
||||||
|
height: 100, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '1', |
||||||
|
cls: "layout-bg1" |
||||||
|
} |
||||||
|
}, { |
||||||
|
height: 200, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '2', |
||||||
|
cls: "layout-bg2" |
||||||
|
} |
||||||
|
}, { |
||||||
|
height: 'fill', |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '3', |
||||||
|
cls: "layout-bg3" |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% 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 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
# multilayer_select_tree_combo |
||||||
|
|
||||||
@ -0,0 +1,2 @@ |
|||||||
|
# multilayer_single_tree_combo |
||||||
|
|
||||||
@ -0,0 +1,22 @@ |
|||||||
|
# dialog |
||||||
|
|
||||||
|
## 对话框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/9tj0jrpp/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.Msg.alert(title, content) |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| title | 对话框标题 | string | | | |
||||||
|
| content | 对话框内容 | string | | | |
||||||
|
|
||||||
|
--- --- |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
# down_list_combo |
||||||
|
|
||||||
|
## 多层下拉列表的下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/p0hykqo9/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.down_list_combo', |
||||||
|
element: '#wrapper', |
||||||
|
width: 300, |
||||||
|
items: [ |
||||||
|
[{ |
||||||
|
el: { |
||||||
|
text: "column 1111", |
||||||
|
iconCls1: "check-mark-e-font", |
||||||
|
value: 11 |
||||||
|
}, |
||||||
|
children: [{ |
||||||
|
text: "column 1.1", |
||||||
|
value: 21, |
||||||
|
cls: "dot-e-font", |
||||||
|
selected: true |
||||||
|
}, { |
||||||
|
text: "column 1.222222222222222222222222222222222222", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 22, |
||||||
|
}] |
||||||
|
}], |
||||||
|
[{ |
||||||
|
el: { |
||||||
|
type: "bi.icon_text_icon_item", |
||||||
|
text: "column 2", |
||||||
|
iconCls1: "chart-type-e-font", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 12 |
||||||
|
}, |
||||||
|
disabled: true, |
||||||
|
children: [{ |
||||||
|
type: "bi.icon_text_item", |
||||||
|
cls: "dot-e-font", |
||||||
|
height: 25, |
||||||
|
text: "column 2.1", |
||||||
|
value: 11 |
||||||
|
}, { |
||||||
|
text: "column 2.2", |
||||||
|
value: 12, |
||||||
|
cls: "dot-e-font" |
||||||
|
}] |
||||||
|
}] |
||||||
|
] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| el | 自定义下拉框trigger | object | | | |
||||||
|
| trigger | 下拉列表的弹出方式 | string | click, hover | click | |
||||||
|
| direction | 弹出列表和trigger的位置关系 | string | top | bottom | left | right | top,left | top,right | bottom,left | bottom,right | bottom | |
||||||
|
| adjustLength | 弹出列表和trigger的距离 | number | | 0 | |
||||||
|
|
||||||
|
--- --- |
||||||
|
|
||||||
|
##具体配置方法见[Combo](../core/combination/bi.combo.md) |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
# month_combo |
||||||
|
|
||||||
|
## 月份选择下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/u4u04ntn/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.month_combo', |
||||||
|
element: '#wrapper', |
||||||
|
width: 300 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| behaviors | 自定义下拉列表中item项的行为，如高亮，标红等 | object | | {} | |
||||||
|
|
||||||
|
--- --- |
||||||
|
|
||||||
@ -0,0 +1,32 @@ |
|||||||
|
# multi_select_combo |
||||||
|
|
||||||
|
## 带确定的复选下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/oskypvLe/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.multi_select_combo", |
||||||
|
element: '#wrapper', |
||||||
|
width: 500, |
||||||
|
itemsCreator: function(){ |
||||||
|
return { |
||||||
|
items: [], |
||||||
|
hasNext: false |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法 | 说明 | 用法 | |
||||||
|
| ---------------------------- | ---------------- | ------------------------------------ | | |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
# numeric_interval |
||||||
|
|
||||||
|
## 数值区间控件 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/oskypvLe/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.numerical_interval", |
||||||
|
element: '#wrapper', |
||||||
|
width: 500 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| min | 最小值初始值 | number | | 无 | |
||||||
|
| max | 最大值初始值 | number | | 无 | |
||||||
|
| closeMin | 左区间初始状态 | boolean | | true | |
||||||
|
| closeMax | 右区间初始状态 | boolean | | true | |
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法 | 说明 | 用法 | |
||||||
|
| ---------------------------- | ---------------- | ------------------------------------ | |
||||||
|
| isStateValid() | 当前状态是否有效(输入是否合法, 区间是否成立) | | |
||||||
|
| setMinEnable(boolean) | 设置左区间输入框disable状态 | | |
||||||
|
| setCloseMinEnable(boolean) | 设置左区间开闭combo的disable状态 | | |
||||||
|
| setMaxEnable(boolean) | 设置右区间输入框disable状态 | | |
||||||
|
| setCloseMaxEnable(boolean) | 设置右区间开闭combo的disable状态 | | |
||||||
|
| setNumTip(string) | 设置数值区间的tip提示 | | |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
# direction_path_chooser |
||||||
|
|
||||||
@ -0,0 +1,25 @@ |
|||||||
|
# quarter_combo |
||||||
|
|
||||||
|
## 季度选择下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/rw7ubwtj/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.quarter_combo', |
||||||
|
element: '#wrapper', |
||||||
|
width: 300 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| behaviors | 自定义下拉列表中item项的行为，如高亮，标红等 | object | | {} | |
||||||
|
|
||||||
|
--- --- |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
# bi.page_table |
||||||
|
|
||||||
|
### 分页表格 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/4egug10x/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.page_table", |
||||||
|
element: "body", |
||||||
|
columnSize: [200,200], |
||||||
|
items: [], |
||||||
|
pager: { |
||||||
|
horizontal : {}, |
||||||
|
vertical: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 参数设置 |
||||||
|
| 参数 | 二级参数 | 三级参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ----------------------- | ---------- | --------- | ------------------ | -------------------- | ----------------- | |
||||||
|
| pager | | | 分页选项 | object | — | |
||||||
|
| | horizontal | | 水平分页选项 | object | — | |
||||||
|
| | | pages | 显示总页数 | bool | false | |
||||||
|
| | | curr | 当前页 | number | 1 | |
||||||
|
| | | hasPrev | 判断是否有前一页的函数 | function | BI.emptyFn | |
||||||
|
| | | hasNext | 是否有下一页 | function | BI.emptyFn | |
||||||
|
| | | firstPage | 第一页 | number | 1 | |
||||||
|
| | | lastPage | 最后一页 | number/function | BI.emptyFn | |
||||||
|
| | vertical | | 纵向分页，参数与horizontal | object | — | |
||||||
|
| itemsCreator | | | 元素创造器 | function | BI.emptyFn | |
||||||
|
| isNeedFreeze | | | 是否需要冻结表头 | bool | false | |
||||||
|
| freezeCols | | | 冻结的列 | array | [] | |
||||||
|
| isNeedMerge | | | 是否需要合并单元格 | bool | false | |
||||||
|
| mergeCols | | | 合并的单元格列号 | array | [] | |
||||||
|
| mergeRule | | | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||||
|
| columnSize | | | 单元格宽度集合 | array | [] | |
||||||
|
| minColumnSize | | | 最小列宽 | array | [] | |
||||||
|
| maxColumnSize | | | 最大列宽 | array | [] | |
||||||
|
| headerRowSize | | | 表头高度 | number | 25 | |
||||||
|
| rowSize | | | 普通单元格高度 | number | 25 | |
||||||
|
| regionColumnSize | | | 列项间的 | array | [] | |
||||||
|
| headerCellStyleGetter | | | | function | BI.emptyFn | |
||||||
|
| summaryCellStyleGetter | | | | function | BI.emptyFn | |
||||||
|
| sequenceCellStyleGetter | | | | function | BI.emptyFn | |
||||||
|
| header | | | 表头 | array | [] | |
||||||
|
| items | | | 子组件 | array | [] | |
||||||
|
| crossHeader | | | 交叉表头 | array | [] | |
||||||
|
| crossItems | | | 交叉项 | array | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 方法 |
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| ------------------------ | ----------- | ------------------ | |
||||||
|
| setHPage | 设置水平页数 | v: 页码 | |
||||||
|
| setVpage | 设置纵向页数 | v: 页码 | |
||||||
|
| getHPage | 获得水平页数 | — | |
||||||
|
| getVPage | 获得垂直页数 | — | |
||||||
|
| setWidth | 设置宽度 | width: 宽度 | |
||||||
|
| setHeight | 设置高度 | height: 高度 | |
||||||
|
| setColumnSize | 设置列宽 | columnSize: 列宽数组 | |
||||||
|
| getColumnSize | 得到列宽 | — | |
||||||
|
| setRegionColumnSize | 设置列项之间的间隙 | columnSize: 列宽数组 | |
||||||
|
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||||
|
| setVerticalScroll | 设置纵向滚动距离 | scrollTop: 纵向滚动距离 | |
||||||
|
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||||
|
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||||
|
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||||
|
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||||
|
| attr | 设置属性 | key: 键 value: 值 | |
||||||
|
| populate | 增加 | — | |
||||||
|
| destroy | 摧毁表 | — | |
||||||
|
|
||||||
@ -0,0 +1,2 @@ |
|||||||
|
# finetuning_number_editor |
||||||
|
|
||||||
@ -0,0 +1,28 @@ |
|||||||
|
# year_combo |
||||||
|
|
||||||
|
## 年份选择下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/3na3125L/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.year_combo', |
||||||
|
element: '#wrapper', |
||||||
|
width: 300 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| behaviors | 自定义下拉列表中item项的行为，如高亮，标红等 | object | | {} | |
||||||
|
| min | 限定可选日期的下限 | string | | '1900-01-01' | |
||||||
|
| max | 限定可选日期的上限 | string | | '2099-12-31' | |
||||||
|
|
||||||
|
--- --- |
||||||
|
|
||||||
Loading…
Reference in new issue