From 537dd6ee1faad2b9061e5f17c644d75bf6f7cd66 Mon Sep 17 00:00:00 2001 From: WoodyJang Date: Fri, 1 Sep 2017 17:48:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E8=B1=A1=E6=8E=A7=E4=BB=B6fineUI?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E7=9A=84=E7=BC=96=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- uidoc/base/editor/code_editor.md | 4 +- uidoc/base/editor/editor.md | 2 +- uidoc/base/editor/formula_editor.md | 12 ++-- uidoc/base/editor/multifile_editor.md | 2 +- uidoc/base/editor/textarea_editor.md | 2 +- uidoc/base/pager.md | 2 +- uidoc/base/svg.md | 10 +-- uidoc/core/abstract/button_group.md | 74 +++++++++++++++++++++- uidoc/core/abstract/button_tree.md | 57 ++++++++++++++++- uidoc/core/abstract/collection_view.md | 67 +++++++++++++++++++- uidoc/core/abstract/custom_tree.md | 85 ++++++++++++++++++++++++- uidoc/core/abstract/grid_view.md | 74 +++++++++++++++++++++- uidoc/core/abstract/virtual_group.md | 51 ++++++++++++++- uidoc/core/abstract/virtual_list.md | 60 +++++++++++++++++- uidoc/core/combination/bi.combo.md | 88 +++++++++++++++++++++++++- 15 files changed, 566 insertions(+), 24 deletions(-) diff --git a/uidoc/base/editor/code_editor.md b/uidoc/base/editor/code_editor.md index 970d2b92b2..2adf0bdd36 100644 --- a/uidoc/base/editor/code_editor.md +++ b/uidoc/base/editor/code_editor.md @@ -1,9 +1,9 @@ # bi.code_editor -## 文本框,基类[BI.Single](/core/single.md) +## 代码文本框,基类[BI.Single](/core/single.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/fx86hLgm/) {% common %} ```javascript diff --git a/uidoc/base/editor/editor.md b/uidoc/base/editor/editor.md index dc577dcd0c..1acde25d7f 100644 --- a/uidoc/base/editor/editor.md +++ b/uidoc/base/editor/editor.md @@ -3,7 +3,7 @@ ## 文本框,基类[BI.Single](/core/single.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/4eLytgve/) {% common %} ```javascript diff --git a/uidoc/base/editor/formula_editor.md b/uidoc/base/editor/formula_editor.md index 5d05260311..9509c3717c 100644 --- a/uidoc/base/editor/formula_editor.md +++ b/uidoc/base/editor/formula_editor.md @@ -3,16 +3,18 @@ ## 公式编辑控件,基类[BI.Single](/core/single.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/qnquz4o0/) {% common %} ```javascript BI.createWidget({ - type : 'bi.formula_editor', - width : 300, - height : 200, - value : 'SUM(C5, 16, 26)' + type: "bi.formula_editor", + cls: "bi-border", + watermark:'请输入公式', + value: 'SUM(C5, 16, 26)', + width: "100%", + height: "100%" }); diff --git a/uidoc/base/editor/multifile_editor.md b/uidoc/base/editor/multifile_editor.md index bb49f39ed5..d6fadc2eb0 100644 --- a/uidoc/base/editor/multifile_editor.md +++ b/uidoc/base/editor/multifile_editor.md @@ -3,7 +3,7 @@ ## 多文件,基类[BI.Single](/core/single.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/25r3r5fq/) {% common %} ```javascript diff --git a/uidoc/base/editor/textarea_editor.md b/uidoc/base/editor/textarea_editor.md index 579748e308..23bcc61f23 100644 --- a/uidoc/base/editor/textarea_editor.md +++ b/uidoc/base/editor/textarea_editor.md @@ -3,7 +3,7 @@ ## 文本域,基类[BI.Single](/core/single.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/90721e0a/) {% common %} ```javascript diff --git a/uidoc/base/pager.md b/uidoc/base/pager.md index f8b64ca466..cef58dbf1f 100644 --- a/uidoc/base/pager.md +++ b/uidoc/base/pager.md @@ -3,7 +3,7 @@ ## 分页控件,基类[BI.Widget](/core/widget.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/rhhte9b3/) {% common %} ```javascript diff --git a/uidoc/base/svg.md b/uidoc/base/svg.md index 8100bf5b27..24a96c4b58 100644 --- a/uidoc/base/svg.md +++ b/uidoc/base/svg.md @@ -3,16 +3,16 @@ ## svg绘图,基类[BI.Widget](/core/widget.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/1xn8snp3/) {% common %} ```javascript var svg = BI.createWidget({ - type: "bi.svg", - width: 500, - height: 600 - }); + type: "bi.svg", + width: 500, + height: 600 +}); var circle = svg.circle(100, 100, 10); circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); diff --git a/uidoc/core/abstract/button_group.md b/uidoc/core/abstract/button_group.md index 7b5236a8b7..71a8f8bb99 100644 --- a/uidoc/core/abstract/button_group.md +++ b/uidoc/core/abstract/button_group.md @@ -1,2 +1,74 @@ -# button_group +# bi.button_group + +## 一组具有相同属性的元素集合,基类[BI.Widget](/core/widget.md) + +{% method %} +[source](https://jsfiddle.net/fineui/te0nLap1/) + +{% common %} +```javascript + +BI.createWidget({ + element: "#wrapper", + type: "bi.button_group", + ref: function (_ref) { + ref = _ref; + }, + chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, + layouts: [{ + type: "bi.vertical", + items: [{ + type: "bi.vtape", + height: 150, + }] + }], + items: [{ + el: { + type: "bi.label", + text: "button_group" + }, + height: 50, + }] +}) + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| behaviors | |object | |{ }| +| items | 子组件数组 | array | | [ ] | +| chooseType | 选择类型 | const |CHOOSE_TYPE_SINGLE,CHOOSE_TYPE_MULTI,CHOOSE_TYPE_ALL,CHOOSE_TYPE_NONE,CHOOSE_TYPE_DEFAULT | CHOOSE_TYPE_SINGLE | +| layouts | 布局 | array | | [{type: "bi.center",hgap: 0,vgap: 0}] | + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| doBehavior | | —| +| prependItems | 内部前插入 | items | +| addItems | 内部后插入 | items | +| removeItemAt | 移除指定索引处的item | indexs | +| removeItems | 移除制定元素 | values | +| populate | 刷新列表 | items | +| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组| +| setEnabledValue | 设置value值可用| value,可以是单个值也可以是个数组 | +| setValue | 设置value值 | value,可以是单个值也可以是个数组 | +| getNotSelectedValue | 获取没有被选中的值 | —| +| getValue | 获取被选中的值 |—| +| getAllButtons | 获取所有button |—| +| getAllLeaves | 获取所有的叶子节点 | —| +| getSelectedButtons | 获取所有被选中的元素 | —| +| getNotSelectedButtons | 获取所有未被选中的元素 | —| +| getIndexByValue | 根据value值获取value在数组中的索引 | value| +| getNodeById | 根据id获取节点 | id | +| getNodeByValue | 根据value值获取节点 | value | +| empty| 清空组件|—| +| destroy| 销毁组件|—| + + +--- + diff --git a/uidoc/core/abstract/button_tree.md b/uidoc/core/abstract/button_tree.md index ac363e0680..c26c87cf3a 100644 --- a/uidoc/core/abstract/button_tree.md +++ b/uidoc/core/abstract/button_tree.md @@ -1,2 +1,57 @@ -# button_tree +# bi.button_tree + +## 一组具有相同属性的元素集合,基类[BI.ButtonGroup](/core/abstract/button_group.md) + +{% method %} +[source](https://jsfiddle.net/fineui/pgwpw4n9/) + +{% common %} +```javascript + +BI.createWidget({ + element: "#wrapper", + type: "bi.button_tree", + chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, + layouts: [{ + type: "bi.vertical" + }, { + type: "bi.center_adapt", + }], + items: [{ + type: "bi.label", + text: "0", + value: "label1", + height:50, + vgap:10 + }, { + type: "bi.button", + text: "1", + value: "按钮1", + height:30 + }] +}) +``` + +{% endmethod %} + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组| +| setEnabledValue | 设置value值可用| value,可以是单个值也可以是个数组 | +| setValue | 设置value值 | value,可以是单个值也可以是个数组 | +| getNotSelectedValue | 获取没有被选中的值 | —| +| getValue | 获取被选中的值 |—| +| getAllButtons | 获取所有button |—| +| getAllLeaves | 获取所有的叶子节点 | —| +| getSelectedButtons | 获取所有被选中的元素 | —| +| getNotSelectedButtons | 获取所有未被选中的元素 | —| +| getIndexByValue | 根据value值获取value在数组中的索引 | value| +| getNodeById | 根据id获取节点 | id | +| getNodeByValue | 根据value值获取节点 | value | + + + +--- + diff --git a/uidoc/core/abstract/collection_view.md b/uidoc/core/abstract/collection_view.md index 2777207ca9..c62d910cf7 100644 --- a/uidoc/core/abstract/collection_view.md +++ b/uidoc/core/abstract/collection_view.md @@ -1,2 +1,67 @@ -# collection_view +# bi.collection_view + +## CollectionView,基类[BI.Widget](/core/widget.md) + +{% method %} +[source](https://jsfiddle.net/fineui/cmq0b3v0/) + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.collection_view", + element:"#wrapper", + width: 400, + height: 300, + items: [], + cellSizeAndPositionGetter: function (index) { + return { + x: index % 10 * 50, + y: Math.floor(index / 10) * 50, + width: 50, + height: 50 + } + } +}); + + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| items | 子组件数组 | array | | [ ] | +| overflowX | 是否显示横向滚动条| boolean | true,false | true | +| overflowY | 是否显示纵向滚动条 | boolean | true,false | true | +| cellSizeAndPositionGetter |设置每个单元格的位置坐标和宽高 | function| | — | +| horizontalOverscanSize | | number | | 0 | +| verticalOverscanSize | | number | | 0 | +| width | 行宽，必设 |number| | — | +| height | 列宽，必设 | number | | — | +| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 | +| scrollTop | 滚动条相对于顶部的偏移 | number | — | 0 | + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft| +| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop | +| setOverflowX | 设置是否显示横向滚动条 | b | +| setOverflowY | 设置是否显示横向滚动条 | b| +| getScrollLeft | 获取滚动条相对于左边的偏移 | —| +| getScrollTop | 获取滚动条相对于顶部的偏移 | — | +| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — | +| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—| +| restore | 还原列表设置 | — | +| populate | 刷新列表 | items | + + + +--- + diff --git a/uidoc/core/abstract/custom_tree.md b/uidoc/core/abstract/custom_tree.md index 34c7a19c8b..53e0b461d0 100644 --- a/uidoc/core/abstract/custom_tree.md +++ b/uidoc/core/abstract/custom_tree.md @@ -1,2 +1,85 @@ -# custom_tree +# bi.custom_tree + +## 自定义树,基类[BI.Widget](/core/widget.md) + +{% method %} +[source](https://jsfiddle.net/fineui/gesh31xg/) + +{% common %} +```javascript + +var TREEITEMS=[{ + id: -1, + pId: -2, + value: "根目录", + open: true, + type: "bi.plus_group_node", + height: 25 +}, +{ + id: 1, + pId: -1, + value: "第一级目录1", + type: "bi.plus_group_node", + height: 25 +}, +{ + id: 11, + pId: 1, + value: "第二级文件1", + type: "bi.single_select_item", + height: 25 +}]; +BI.createWidget({ + type: "bi.custom_tree", + el: { + type: "bi.button_tree", + chooseType: 0, + layouts: [{ + type: "bi.vertical", + hgap: 30 + }] + }, + items: BI.deepClone(TREEITEMS) +}); + + + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| items | 子组件数组 | array | | [ ] | +| itemsCreator| | | | | +| expander | | object | | {el: {},popup: {type: "bi.custom_tree"}}| +| el | | object | | {type: "bi.button_tree",chooseType: 0,layouts: [{type: "bi.vertical"}]}| + + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| initTree | 构造树结构 | nodes | +| stroke | 生成树方法 | nodes | +| prependItems | 内部前插入 | items | +| addItems | 内部后插入 | items | +| populate | 刷新列表 | nodes| +| render | 渲染列表 | | +| setValue | 设置value值 | value,可以是单个值也可以是个数组 | +| getValue | 获取被选中的值 |—| +| getAllButtons | 获取所有button |—| +| getAllLeaves | 获取所有的叶子节点 | —| +| getNodeById | 根据id获取节点 | id | +| getNodeByValue | 根据value值获取节点 | value | +| empty| 清空组件|—| + + + +--- + diff --git a/uidoc/core/abstract/grid_view.md b/uidoc/core/abstract/grid_view.md index c62cdee834..1ae69d2374 100644 --- a/uidoc/core/abstract/grid_view.md +++ b/uidoc/core/abstract/grid_view.md @@ -1,2 +1,74 @@ -# grid_view +# bi.grid_view + +## GridView,基类[BI.Widget](/core/widget.md) + +{% method %} +[source](https://jsfiddle.net/fineui/fkntzLq5/) + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.grid_view", + width: 400, + height: 300, + estimatedRowSize: 30, + estimatedColumnSize: 100, + items: [], + scrollTop: 100, + rowHeightGetter: function () { + return 30; + }, + columnWidthGetter: function () { + return 100; + } +}); + + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| items | 子组件数组 | array | | [ ] | +| overflowX | 是否显示横向滚动条| boolean | true,false | true | +| overflowY | 是否显示纵向滚动条 | boolean | true,false | true | +| overscanColumnCount| | number| | 0 | +| overscanRowCount| | number | | 0 | +| width | 行宽，必设 |number| | — | +| height | 列宽，必设 | number | | — | +| rowHeightGetter| 每格行宽 |number,function | | function | +| columnWidthGetter| 每格列宽 | number,function | | function | +| estimatedColumnSize| 每格行宽，columnWidthGetter为function时必设 |number,function | | function | +| estimatedRowSize | 每格列宽，rowHeightGetter为function时必设 | number,function | | function | +| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 | +| scrollTop | 滚动条相对于顶部的偏移 | number | —|0 | + + + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft| +| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop | +| setOverflowX | 设置是否显示横向滚动条 | b | +| setOverflowY | 设置是否显示横向滚动条 | b| +| getScrollLeft | 获取滚动条相对于左边的偏移 | —| +| getScrollTop | 获取滚动条相对于顶部的偏移 | — | +| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — | +| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—| +| setEstimatedColumnSize | 设置列宽 |width| +| setEstimatedRowSize | 设置行宽 | height | +| restore | 还原列表设置 | — | +| populate | 刷新列表 | items | + + + +--- + diff --git a/uidoc/core/abstract/virtual_group.md b/uidoc/core/abstract/virtual_group.md index 48f3098454..3d97ca641f 100644 --- a/uidoc/core/abstract/virtual_group.md +++ b/uidoc/core/abstract/virtual_group.md @@ -1,2 +1,51 @@ -# virtual_group +# bi.virtual_group + +## 一组具有相同属性的元素集合,基类[BI.Widget](/core/widget.md) + +{% method %} +[source](https://jsfiddle.net/fineui/gesh31xg/) + +{% common %} +```javascript + +BI.createWidget({ + element: "#wrapper", + type: "bi.virtual_group", + width: 500, + height: 300, + chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, + layouts: [{ + type: "bi.vertical" + }, { + type: "bi.center_adapt", + }], + items:[] +}) +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| items | 子组件数组 | array | | [ ] | +| layouts | 布局 | array | | [{type: "bi.center",hgap: 0,vgap: 0}] | + + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| setValue | 设置value值 | value,可以是单个值也可以是个数组 | +| getValue | 获取被选中的值 |—| +| prependItems | 内部前插入 | items | +| addItems | 内部后插入 | items | +| populate | 刷新列表 | items | +| render | 渲染列表 | | + + + +--- + diff --git a/uidoc/core/abstract/virtual_list.md b/uidoc/core/abstract/virtual_list.md index 8458fe73b7..dbcf2f4be7 100644 --- a/uidoc/core/abstract/virtual_list.md +++ b/uidoc/core/abstract/virtual_list.md @@ -1,2 +1,60 @@ -# virtual_list +# bi.virtual_list + +## VirtualList,基类[BI.Widget](/core/widget.md) + +{% method %} +[source](https://jsfiddle.net/fineui/L995LrL9/) + +{% common %} +```javascript + + var ITEMS = BI.map("柳州市城贸金属材料有限责任公司 柳州市建福房屋租赁有限公司 柳州市迅昌数码办公设备有限责任公司 柳州市河海贸易有限责任公司 柳州市花篮制衣厂 柳州市兴溪物资有限公司 柳州市针织总厂 柳州市衡管物资有限公司 柳州市琪成机电设备有限公司 柳州市松林工程机械修理厂".match(/[^\s]+/g), function (i, v) { + return { + text: v, + value: v, + title: v + } +}); + +BI.createWidget({ + type: "bi.virtual_list", + element:"body", + items: BI.map(ITEMS, function (i, item) { + return BI.extend({}, item, { + type: "bi.label", + height: 30, + text: (i + 1) + "." + item.text, + }); + }) + }) + + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| items | 子组件数组 | array | | [ ] | +| blockSize | | number | | 10 | +| overscanHeight | | number | | 100 | +| scrollTop | 滚动条相对于顶部的偏移 | number | — | 0 | + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| render | 渲染列表 | —| +| mounted | 组件挂载 | —| +| restore | 还原列表设置 | — | +| populate | 刷新列表 | items | +| destroyed | 销毁组件 | —| + + + +--- + diff --git a/uidoc/core/combination/bi.combo.md b/uidoc/core/combination/bi.combo.md index ea65d20362..6d092bdee1 100644 --- a/uidoc/core/combination/bi.combo.md +++ b/uidoc/core/combination/bi.combo.md @@ -1,2 +1,88 @@ -# combo +# bi.combo + +## combo,基类[BI.Widget](/core/widget.md) + +{% method %} +[source]() + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.combo", + element: “body”, + adjustLength: 2, + el: { + type: "bi.button", + text: "测试", + height: 25 + }, + popup: { + el: { + type: "bi.button_group", + items: BI.makeArray(100, { + type: "bi.text_item", + height: 25, + text: "item" + }), + layouts: [{ + type: "bi.vertical" + }] + }, + maxHeight: 300 + } +}); + + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| trigger | 事件类型 | string | | "click" | +| toggle | 切换状态 | boolean | true,false | true | +| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "bottom"| +| isDefaultInit | 是否默认初始化 |boolean | true,false | false | +| destroyWhenHide | 隐藏弹窗层是否销毁 | boolean | true,false | false | +| isNeedAdjustHeight | 是否需要高度调整 | boolean | true,false | true | +| isNeedAdjustWidth | 是否需要宽度调整 | boolean | true,false | true | +| stopEvent | 阻止事件冒泡 | boolean | true,false | false | +| stopPropagation | 阻止事件冒泡 | boolean | true,false | false | +| adjustLength | 调整的距离 | number | — | 0 | +| adjustXOffset | 调整横向偏移 | number | — | 0 | +| adjustYOffset |调整纵向偏移 | number | — | 0 | +| hideChecker | | function | | —| +| offsetStyle | 弹出层显示位置 | string | left,right,center | "left,right,center"| +| el | 开启弹出层的元素 | object | — |{ }| +| popup | 弹出层 | object | — | { }| +| comboClass | | string | | "bi-combo-popup" | +| hoverClass | | string | | "bi-combo-hover" | + + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| adjustWidth | 调整宽度 | —| +| adjustHeight | 调整高度 | —| +| resetListHeight | 重置列表高度 | height | +| resetListWidth | 重置列表宽度 | width | +| populate | 刷新列表 | items | +| setValue |设置combo value值| v | +| getValue | 获取combo value值 | —| +| isViewVisible | 弹窗层是否可见 | —| +| showView | || +| hideView ||| +| getView ||| +| getPopupPosition ||| +| toggle ||| +|destroy ||| + + +--- +