Browse Source

组合空格键和弹出层

es6
woodyjang 7 years ago
parent
commit
8d351a467c
  1. 50
      uidoc/core/combination/navigation.md
  2. 26
      uidoc/core/combination/searcher.md
  3. 83
      uidoc/core/combination/switcher.md
  4. 85
      uidoc/core/combination/tab.md
  5. 63
      uidoc/core/layer/layer_float_box.md
  6. 76
      uidoc/core/layer/layer_popup.md
  7. 40
      uidoc/core/layer/layer_searcher.md

50
uidoc/core/combination/navigation.md

@ -3,33 +3,39 @@
## 导航栏控件,[BI.Widget](/core/widget.md)
{% method %}
[source](https://jsfiddle.net/fineui/kau5pjm8/)
[source](https://jsfiddle.net/fineui/ubsren48/)
{% common %}
```javascript
BI.createWidget({
element: "#wrapper",
type: "bi.navigation",
element: "body",
height:30,
tab: {
height: 30,
items: [{
once: false,
text: "后退",
value: -1,
cls: "mvc-button layout-bg3"
},{
once: false,
text: "前进",
value: 1,
cls: "mvc-button layout-bg4"
}]
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 %}
@ -39,14 +45,14 @@ BI.createWidget({
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| direction | 控件位置 | string | top,bottom,left,right,custom | "bottom"|
| single | | boolean | true,false | true |
| defaultShowIndex | |boolean | true,false | true |
| tab | |boolean | true,false | true |
| defaultShowIndex |||||
| 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 | | | | — |
| afterCardShow | | | | — |
| cardCreator | 面板构造器 | function | | v |
| afterCardCreated | 面板构造之后 | function | | — |
| afterCardShow | 面板显示之后 | function | - | — |

26
uidoc/core/combination/searcher.md

@ -70,8 +70,8 @@ BI.createWidget({
| onSearch | isAutoSearch为false时启用 | function(op.callback) | | |
| el | 开启弹出层的元素 | object | — | {type: "bi.search_editor"}|
| popup | 弹出层 | object | — |{type: "bi.searcher_view"}|
| adapter | | | | null|
| masker | masker层 | | — | {offset: {}}|
| adapter | 弹出层显示的位置元素 | object | - | null|
| masker | masker层 | object | — | {offset: {}}|
## 对外方法
| 名称 | 说明 | 回调参数
@ -81,6 +81,28 @@ BI.createWidget({
| 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 | 初始化之后 | —|

83
uidoc/core/combination/switcher.md

@ -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 | 面板隐藏之后 | —|
---

85
uidoc/core/combination/tab.md

@ -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| 销毁组件|—|
---

63
uidoc/core/layer/layer_float_box.md

@ -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 | 打开弹出层 | —|
---

76
uidoc/core/layer/layer_popup.md

@ -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 | 获取弹出层 | —|
---

40
uidoc/core/layer/layer_searcher.md

@ -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…
Cancel
Save