forked from fanruan/fineui
woodyjang
7 years ago
7 changed files with 394 additions and 29 deletions
@ -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