From 6bbb8980c069d84ebb87c027133c753d045421ef Mon Sep 17 00:00:00 2001 From: gittz Date: Tue, 29 Aug 2017 15:41:01 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=84=E7=A7=8D=E5=B0=8F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- uidoc/SUMMARY.md | 11 +- uidoc/detailed/bi.button/general.md | 167 +++++++++++++++++- uidoc/detailed/bi.button/items.md | 61 +++++++ uidoc/detailed/bi.button/node.md | 68 +++++++ uidoc/detailed/bi.button/segment.md | 67 +++++++ uidoc/detailed/bi.button/tooltip.md | 133 +++++++++++++- uidoc/detailed/text_input/bi.clear_editor.md | 2 +- uidoc/detailed/text_input/bi.search_editor.md | 2 +- uidoc/detailed/text_input/bi.text_editor.md | 2 +- 9 files changed, 502 insertions(+), 11 deletions(-) create mode 100644 uidoc/detailed/bi.button/items.md create mode 100644 uidoc/detailed/bi.button/node.md create mode 100644 uidoc/detailed/bi.button/segment.md diff --git a/uidoc/SUMMARY.md b/uidoc/SUMMARY.md index bc7b53ac4..9e7b7f628 100644 --- a/uidoc/SUMMARY.md +++ b/uidoc/SUMMARY.md @@ -4,13 +4,12 @@ * [文档规范](README.md) ## 详细控件 -* 按钮组 +* 各种小组件 * [通用按钮](detailed/bi.button/general.md) - * [带提示的按钮](detailed/bi.button/tooltip.md) -* [单选框](detailed/bi.single_select_item.md) -* [复选框](detailed/bi.multi_select_item.md) -* [node节点](detailed/node.md) -* [segment组件](detailed/bi.segment.md) + * [提示性信息](detailed/bi.button/tooltip.md) + * [各种items](detailed/bi.button/items.md) + * [各种节点nodes](detailed/bi.button/node.md) + * [各种segment](detailed/bi.button/segment.md) * 树形结构 * [bi.multi_tree_combo](detailed/tree/bi.multi_tree_combo.md) * [bi.switch_tree](detailed/tree/bi.switch_tree.md) diff --git a/uidoc/detailed/bi.button/general.md b/uidoc/detailed/bi.button/general.md index 94cb76a4b..e583a21c7 100644 --- a/uidoc/detailed/bi.button/general.md +++ b/uidoc/detailed/bi.button/general.md @@ -1,2 +1,167 @@ -# 通用按钮 +# bi.button + +##通用按钮 + +{% method %} +[source](https://jsfiddle.net/fineui/txqwwzLm/) + +{% common %} +```javascript +Demo = {}; +Demo.Buttons = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-button" + }, + render: function () { + var items = [{ + el: { + type: 'bi.button', + text: '一般按钮', + level: 'common', + height: 30 + } + }, + { + el: { + type: 'bi.button', + text: '普通灰化按钮', + disabled: true, + level: 'success', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '带图标的按钮', + //level: 'ignore', + iconClass: "close-font", + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '一般按钮', + block: true, + level: 'common', + height: 30 + } + }, + { + el: { + type: 'bi.button', + text: '普通灰化按钮', + block: true, + disabled: true, + level: 'success', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '带图标的按钮', + block: true, + //level: 'ignore', + iconClass: "close-font", + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '一般按钮', + clear: true, + level: 'common', + height: 30 + } + }, + { + el: { + type: 'bi.button', + text: '普通灰化按钮', + clear: true, + disabled: true, + level: 'success', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '带图标的按钮', + clear: true, + //level: 'ignore', + iconClass: "close-font", + height: 30 + } + }, { + el: { + type: 'bi.text_button', + text: '文字按钮', + height: 30 + } + } + ]; + BI.each(items, function (i, item) { + item.el.handler = function () { + BI.Msg.alert('按钮', this.options.text); + } + }); + return { + type: "bi.left", + vgap: 100, + hgap: 20, + items: items + } + } +}); +BI.shortcut("demo.buttons", Demo.Buttons); +BI.createWidget({ + type: 'demo.buttons', + element: "#wrapper", + text: '一般按钮', + level: 'common', + height: 30 +}); + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | | 10 | +| vgap | 效果相当于文本框上下padding值 | number | | 0 | +| lgap | 效果相当于文本框left-padding值 | number | | 0 | +| rgap | 效果相当于文本框right-padding值 | number | | 0 | +| tgap |效果相当于文本框top-padding值 | number | | 0 | +| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | +| items | 子控件数组 | array | | | +| width | 宽度 | number | | | +| height | 高度 | number | | | + + +##### 高级属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| level |按钮类型 | string| common,success,warning,ignore | common | +| text|按钮文本内容 | string| | | +| disabled|灰化 | boolean| true,false | | +| minWidth | 最小宽度，如果block/clear中某一项为true，此项值为0，否则为90 | number | | 90 | +| shadow | | boolean| true,false | | +| isShadowShowingOnSelected| | boolean| true,false | true | +| readonly | 是否只读 | boolean | true,false | true | +| iconClass | 图标类型 | string| | " "| +| block| 是否块状显示，即不显示边框，没有最小宽度的限制 | boolean| true,false | false | +| clear| 是否去掉边框和背景 |boolean| true,false | false | +| textAlign | 文字布局 | string | left,center,right | cneter | +| whiteSpace | 元素内的空白处理方式 | string | normal,pre,nowrap,pre-wrap,pre-line,inherit | nowrap| +| forceCenter | | boolean | true,false | false | +| textWidth| 按钮文本宽度 | number| | null | +| textHeight | 按钮文本高度 | number| | null | + + + +--- + diff --git a/uidoc/detailed/bi.button/items.md b/uidoc/detailed/bi.button/items.md new file mode 100644 index 000000000..d427bf753 --- /dev/null +++ b/uidoc/detailed/bi.button/items.md @@ -0,0 +1,61 @@ +## 各种items + +{% method %} +[source](https://jsfiddle.net/fineui/jyo0qdwL/) + +{% common %} +```javascript +Demo = {}; +Demo.Items = BI.inherit(BI.Widget, { + render: function () { + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + height: 30, + text: "单选item" + }, { + type: "bi.single_select_item", + text: "单选项" + }, { + type: "bi.label", + height: 30, + text: "复选item" + }, { + type: "bi.multi_select_item", + text: "复选项" + }] + + } + } +}); +BI.shortcut("demo.items", Demo.Items); +BI.createWidget({ + type: 'demo.items', + element: "#wrapper", +}); + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | | 10 | +| vgap | 效果相当于文本框上下padding值 | number | | 0 | +| lgap | 效果相当于文本框left-padding值 | number | | 0 | +| rgap | 效果相当于文本框right-padding值 | number | | 0 | +| tgap |效果相当于文本框top-padding值 | number | | 0 | +| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | +| items | 子控件数组 | array | | | +| width | 宽度 | number | | | +| height | 高度 | number | | | + + + +--- --- + + diff --git a/uidoc/detailed/bi.button/node.md b/uidoc/detailed/bi.button/node.md new file mode 100644 index 000000000..d31067352 --- /dev/null +++ b/uidoc/detailed/bi.button/node.md @@ -0,0 +1,68 @@ +## 各种节点nodes + +{% method %} +[source](https://jsfiddle.net/fineui/jg257cog/) + +{% common %} +```javascript +Demo = {}; +Demo.Nodes = BI.inherit(BI.Widget, { + + render: function (vessel) { + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + height: 30, + text: "十字形的节点" + }, { + type: "bi.plus_group_node", + text: "十字形的节点" + }, { + type: "bi.label", + height: 30, + text: "三角形的节点" + }, { + type: "bi.triangle_group_node", + text: "三角形的节点" + }, { + type: "bi.label", + height: 30, + text: "箭头节点" + }, { + type: "bi.arrow_group_node", + text: "箭头节点" + }] + } + } +}); + +BI.shortcut("demo.nodes", Demo.Nodes); +BI.createWidget({ + type: 'demo.nodes', + element: "#wrapper", +}); + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | | 10 | +| vgap | 效果相当于文本框上下padding值 | number | | 0 | +| lgap | 效果相当于文本框left-padding值 | number | | 0 | +| rgap | 效果相当于文本框right-padding值 | number | | 0 | +| tgap |效果相当于文本框top-padding值 | number | | 0 | +| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | +| items | 子控件数组 | array | | | +| width | 宽度 | number | | | +| height | 高度 | number | | | + + +--- --- + + diff --git a/uidoc/detailed/bi.button/segment.md b/uidoc/detailed/bi.button/segment.md new file mode 100644 index 000000000..912a25890 --- /dev/null +++ b/uidoc/detailed/bi.button/segment.md @@ -0,0 +1,67 @@ +# bi.sgement + +## 各种segment + +{% method %} +[source](https://jsfiddle.net/fineui/7skvd64L/) + +{% common %} +```javascript +Demo = {}; +Demo.Segments = BI.inherit(BI.Widget, { + render: function () { + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + height: 30, + text: "默认风格" + }, { + type: "bi.segment", + items: [{ + text: "tab1", + value: 1, + selected: true + }, { + text: "tab2", + value: 2 + }, { + text: "tab3 disabled", + disabled: true, + value: 3 + }] + }], + hgap: 50, + vgap: 20 + } + } +}); + +BI.shortcut("demo.segments", Demo.Segments); +BI.createWidget({ + type: 'demo.segments', + element: "#wrapper", +}); + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| hgap | 效果相当于文本框左右padding值 | number | | 10 | +| vgap | 效果相当于文本框上下padding值 | number | | 0 | +| lgap | 效果相当于文本框left-padding值 | number | | 0 | +| rgap | 效果相当于文本框right-padding值 | number | | 0 | +| tgap |效果相当于文本框top-padding值 | number | | 0 | +| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | +| items | 子控件数组 | array | | | +| width | 宽度 | number | | | +| height | 高度 | number | | | + + +--- --- + + diff --git a/uidoc/detailed/bi.button/tooltip.md b/uidoc/detailed/bi.button/tooltip.md index 97e017024..485e12c0e 100644 --- a/uidoc/detailed/bi.button/tooltip.md +++ b/uidoc/detailed/bi.button/tooltip.md @@ -1,2 +1,133 @@ -# 带提示的按钮 +## 提示性信息 + +{% method %} +[source](https://jsfiddle.net/fineui/gn25yyrx/) + +{% common %} +```javascript +Demo = {}; +Demo.Tips = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-tips" + }, + render: function () { + var btns = []; + var bubble = BI.createWidget({ + type: "bi.left", + items: [{ + el: { + type: 'bi.button', + text: 'bubble测试', + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble1", "bubble测试", this); + btns.push("singleBubble1"); + } + } + }, { + el: { + type: 'bi.button', + text: 'bubble测试(居中显示)', + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble2", "bubble测试", this, { + offsetStyle: "center" + }); + btns.push("singleBubble2"); + } + } + }, { + el: { + type: 'bi.button', + text: 'bubble测试(右边显示)', + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble3", "bubble测试", this, { + offsetStyle: "right" + }); + btns.push("singleBubble3"); + } + } + }, { + el: { + type: 'bi.button', + text: '隐藏所有 bubble', + height: 30, + cls: "layout-bg2", + handler: function () { + BI.each(btns, function (index, value) { + BI.Bubbles.hide(value); + }) + } + } + }], + hgap: 20, + vgap: 20 + }); + + var title = BI.createWidget({ + type: "bi.vertical", + items: [{ + type: "bi.label", + cls: "layout-bg1", + height: 50, + title: "title提示", + text: "移上去有title提示", + textAlign: "center" + }], + hgap: 20, + vgap: 20 + }); + + var toast = BI.createWidget({ + type: "bi.vertical", + items: [{ + el: { + type: 'bi.button', + text: '简单Toast测试', + height: 30, + handler: function () { + BI.Msg.toast("这是一条简单的数据"); + } + } + }], + vgap: 20 + }); + + return { + type: "bi.horizontal_auto", + vgap: 20, + hgap: 20, + items: [bubble, title, toast] + } + } +}); +BI.shortcut("demo.tips", Demo.Tips); +BI.createWidget({ + type: 'demo.tips', + element: "#wrapper", +}); + + +``` + +{% endmethod %} + +## API +##### 基础属性 +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :-----| :----|:---- +| hgap | 效果相当于文本框左右padding值 | number | | 10 | +| vgap | 效果相当于文本框上下padding值 | number | | 0 | +| lgap | 效果相当于文本框left-padding值 | number | | 0 | +| rgap | 效果相当于文本框right-padding值 | number | | 0 | +| tgap |效果相当于文本框top-padding值 | number | | 0 | +| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | +| items | 子控件数组 | array | | | +| width | 宽度 | number | | | +| height | 高度 | number | | | + + +--- --- + diff --git a/uidoc/detailed/text_input/bi.clear_editor.md b/uidoc/detailed/text_input/bi.clear_editor.md index 2db9d44b4..ea2729dbd 100644 --- a/uidoc/detailed/text_input/bi.clear_editor.md +++ b/uidoc/detailed/text_input/bi.clear_editor.md @@ -38,5 +38,5 @@ BI.createWidget({ | width | 文本框宽度 | number | | | | height | 文本框高度 | number | | 30 | -# +--- --- diff --git a/uidoc/detailed/text_input/bi.search_editor.md b/uidoc/detailed/text_input/bi.search_editor.md index 55a91b098..29bae8661 100644 --- a/uidoc/detailed/text_input/bi.search_editor.md +++ b/uidoc/detailed/text_input/bi.search_editor.md @@ -55,6 +55,6 @@ BI.createWidget({ | width | 文本框宽度 | number | | | | height | 文本框高度 | number | | 30 | -# +--- --- diff --git a/uidoc/detailed/text_input/bi.text_editor.md b/uidoc/detailed/text_input/bi.text_editor.md index eae568c6b..bf2ba48d0 100644 --- a/uidoc/detailed/text_input/bi.text_editor.md +++ b/uidoc/detailed/text_input/bi.text_editor.md @@ -85,5 +85,5 @@ BI.createWidget({ | width | 文本框宽度 | number | | | | height | 文本框高度 | number | | 30 | -# +--- ---