fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

各种小组件

es6
gittz 7 years ago
parent
9d28c41e51
commit
6bbb8980c0
9 changed files with 502 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      uidoc/SUMMARY.md
  2. 167
      uidoc/detailed/bi.button/general.md
  3. 61
      uidoc/detailed/bi.button/items.md
  4. 68
      uidoc/detailed/bi.button/node.md
  5. 67
      uidoc/detailed/bi.button/segment.md
  6. 133
      uidoc/detailed/bi.button/tooltip.md
  7. 2
      uidoc/detailed/text_input/bi.clear_editor.md
  8. 2
      uidoc/detailed/text_input/bi.search_editor.md
  9. 2
      uidoc/detailed/text_input/bi.text_editor.md

11
uidoc/SUMMARY.md
Unescape View File

@ -4,13 +4,12 @@
* [文档规范](README.md) * [文档规范](README.md)
## 详细控件 ## 详细控件
* 按钮组 * 各种小组件
* [通用按钮](detailed/bi.button/general.md) * [通用按钮](detailed/bi.button/general.md)
* [带提示的按钮](detailed/bi.button/tooltip.md) * [提示性信息](detailed/bi.button/tooltip.md)
* [单选框](detailed/bi.single_select_item.md) * [各种items](detailed/bi.button/items.md)
* [复选框](detailed/bi.multi_select_item.md) * [各种节点nodes](detailed/bi.button/node.md)
* [node节点](detailed/node.md) * [各种segment](detailed/bi.button/segment.md)
* [segment组件](detailed/bi.segment.md)
* 树形结构 * 树形结构
* [bi.multi_tree_combo](detailed/tree/bi.multi_tree_combo.md) * [bi.multi_tree_combo](detailed/tree/bi.multi_tree_combo.md)
* [bi.switch_tree](detailed/tree/bi.switch_tree.md) * [bi.switch_tree](detailed/tree/bi.switch_tree.md)

167
uidoc/detailed/bi.button/general.md
Unescape View File

@ -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 |
---

61
uidoc/detailed/bi.button/items.md
Unescape View File

@ -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 | | |
--- ---

68
uidoc/detailed/bi.button/node.md
Unescape View File

@ -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 | | |
--- ---

67
uidoc/detailed/bi.button/segment.md
Unescape View File

@ -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 | | |
--- ---

133
uidoc/detailed/bi.button/tooltip.md
Unescape View File

@ -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 | | |
--- ---

2
uidoc/detailed/text_input/bi.clear_editor.md
Unescape View File

@ -38,5 +38,5 @@ BI.createWidget({
| width | 文本框宽度 | number | | | | width | 文本框宽度 | number | | |
| height | 文本框高度 | number | | 30 | | height | 文本框高度 | number | | 30 |
# --- ---

2
uidoc/detailed/text_input/bi.search_editor.md
Unescape View File

@ -55,6 +55,6 @@ BI.createWidget({
| width | 文本框宽度 | number | | | | width | 文本框宽度 | number | | |
| height | 文本框高度 | number | | 30 | | height | 文本框高度 | number | | 30 |
# --- ---

2
uidoc/detailed/text_input/bi.text_editor.md
Unescape View File

@ -85,5 +85,5 @@ BI.createWidget({
| width | 文本框宽度 | number | | | | width | 文本框宽度 | number | | |
| height | 文本框高度 | number | | 30 | | height | 文本框高度 | number | | 30 |
# --- ---

Write Preview
Loading…
Cancel
Save