forked from fanruan/fineui
9 changed files with 502 additions and 11 deletions
@ -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 | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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 | | | |
||||
|
||||
|
||||
|
||||
--- --- |
||||
|
||||
|
||||
@ -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 | | | |
||||
|
||||
|
||||
--- --- |
||||
|
||||
|
||||
@ -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 | | | |
||||
|
||||
|
||||
--- --- |
||||
|
||||
|
||||
@ -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 | | | |
||||
|
||||
|
||||
--- --- |
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue