forked from fanruan/fineui
windy
7 years ago
9 changed files with 503 additions and 31 deletions
@ -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,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 | 是否有匹配的元素 | —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue