From 2b343b30902dd62ed2d5ad59421584c5c5b72450 Mon Sep 17 00:00:00 2001 From: iapyang Date: Mon, 4 Sep 2017 13:47:44 +0800 Subject: [PATCH 1/2] finish pager --- uidoc/case/pager/all_count_pager.md | 47 ++++++++++++++++++++- uidoc/case/pager/direction_pager.md | 64 ++++++++++++++++++++++++++++- 2 files changed, 109 insertions(+), 2 deletions(-) diff --git a/uidoc/case/pager/all_count_pager.md b/uidoc/case/pager/all_count_pager.md index a15870cab..b1a4ffef9 100644 --- a/uidoc/case/pager/all_count_pager.md +++ b/uidoc/case/pager/all_count_pager.md @@ -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 | 清空内容 | — | diff --git a/uidoc/case/pager/direction_pager.md b/uidoc/case/pager/direction_pager.md index 8d79c65ec..7fa793da9 100644 --- a/uidoc/case/pager/direction_pager.md +++ b/uidoc/case/pager/direction_pager.md @@ -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 | 清空内容 | — | From 8d351a467c6873540160a1f245ce38ced53b263d Mon Sep 17 00:00:00 2001 From: woodyjang Date: Mon, 4 Sep 2017 13:52:07 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E7=BB=84=E5=90=88=E7=A9=BA=E6=A0=BC?= =?UTF-8?q?=E9=94=AE=E5=92=8C=E5=BC=B9=E5=87=BA=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- uidoc/core/combination/navigation.md | 50 +++++++++------- uidoc/core/combination/searcher.md | 26 ++++++++- uidoc/core/combination/switcher.md | 83 ++++++++++++++++++++++++++- uidoc/core/combination/tab.md | 85 +++++++++++++++++++++++++++- uidoc/core/layer/layer_float_box.md | 63 ++++++++++++++++++++- uidoc/core/layer/layer_popup.md | 76 ++++++++++++++++++++++++- uidoc/core/layer/layer_searcher.md | 40 ++++++++++++- 7 files changed, 394 insertions(+), 29 deletions(-) diff --git a/uidoc/core/combination/navigation.md b/uidoc/core/combination/navigation.md index 7d35801f8..e0d64635a 100644 --- a/uidoc/core/combination/navigation.md +++ b/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 | - | — | diff --git a/uidoc/core/combination/searcher.md b/uidoc/core/combination/searcher.md index 6045d84fd..2bccff8a4 100644 --- a/uidoc/core/combination/searcher.md +++ b/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 | 初始化之后 | —| diff --git a/uidoc/core/combination/switcher.md b/uidoc/core/combination/switcher.md index f3be2b7a8..828ee5b7b 100644 --- a/uidoc/core/combination/switcher.md +++ b/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 | 面板隐藏之后 | —| + + +--- + diff --git a/uidoc/core/combination/tab.md b/uidoc/core/combination/tab.md index 1978b9032..5da59d153 100644 --- a/uidoc/core/combination/tab.md +++ b/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| 销毁组件|—| + + + + +--- + diff --git a/uidoc/core/layer/layer_float_box.md b/uidoc/core/layer/layer_float_box.md index 6fca9295f..8f2c8178f 100644 --- a/uidoc/core/layer/layer_float_box.md +++ b/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 | 打开弹出层 | —| + + + +--- + diff --git a/uidoc/core/layer/layer_popup.md b/uidoc/core/layer/layer_popup.md index 055d577ab..9c8659ec4 100644 --- a/uidoc/core/layer/layer_popup.md +++ b/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 | 获取弹出层 | —| + + + + + +--- + diff --git a/uidoc/core/layer/layer_searcher.md b/uidoc/core/layer/layer_searcher.md index 9cbd8bb15..168f94c92 100644 --- a/uidoc/core/layer/layer_searcher.md +++ b/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 | 是否有匹配的元素 | —| + + + +--- +