forked from fanruan/fineui
WoodyJang
7 years ago
24 changed files with 965 additions and 661 deletions
@ -1,2 +1,40 @@
|
||||
# bubble |
||||
# bi.bubble |
||||
|
||||
#### 气泡提示 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/4u705v2v/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.bubble', |
||||
element: "#wrapper", |
||||
height: 30, |
||||
text: "测试" |
||||
}) |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :---- |:---- |
||||
| direction | 气泡显示位置 | string | | "top" | |
||||
| height | 气泡高度 | number | | 35 | |
||||
| text | 气泡显示内容 | string | | " " | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setText | 设置文本值 | 需要设置的文本值text| |
||||
|
||||
|
||||
--- |
||||
@ -1,2 +1,71 @@
|
||||
# label |
||||
# bi.label |
||||
|
||||
#### 文本标签 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/47f5ps1j/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.label", |
||||
textWidth: 100, |
||||
textHeight: 30, |
||||
text: "基本标签" |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| 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 | |
||||
| textWidth | 文本标签宽度 | number| | null | |
||||
| textHeight | 文本标签宽度 | number| | null | |
||||
| text | 文本内容 | string | | " " | |
||||
|
||||
|
||||
##### 高级属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| textAlign | 文本对齐方式 | string | left,center,right | center | |
||||
| whiteSpace | 元素内空白处理方式 | string| normal,nowrap | nowrap| |
||||
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | true | |
||||
| py | | string | | 空 | |
||||
| keyword | | string | | 空 | |
||||
| disabled | 灰化 | boolean| true,false | 无 | |
||||
| title | 提示title | string | | 空 | |
||||
| warningTitle | 错误提示title | string | | 空 | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setText| 设置文本值 | 需要设置的文本值text| |
||||
| getText| 获取文本值 | —| |
||||
| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | |
||||
| setValue | 设置文本值 | 需要设置的文本值text | |
||||
| populate| | —| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
@ -1,2 +1,39 @@
|
||||
# message |
||||
# bi.Msg |
||||
|
||||
#### 消息提示 |
||||
|
||||
{% method %} |
||||
[source]() |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.button", |
||||
element: "#wrapper", |
||||
text : '点击我弹出一个消息框', |
||||
height : 30, |
||||
handler : function() { |
||||
BI.Msg.confirm('测试消息框',"我是测试消息框的内容"); |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| alert | 警告消息框 | title, message, callback| |
||||
| confirm | 确认消息框 | title, message, callback | |
||||
| prompt | 提示消息框 | title, message, value, callback, min_width | |
||||
| toast | toast提示 | message, level, context| |
||||
|
||||
|
||||
--- |
||||
|
||||
@ -1,2 +1,42 @@
|
||||
# toast |
||||
# bi.toast |
||||
|
||||
#### toast提示 |
||||
|
||||
{% method %} |
||||
[source]() |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.toast', |
||||
element: "#wrapper", |
||||
height: 30, |
||||
level: "warning", |
||||
text: "toast测试" |
||||
}) |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :---- |:---- |
||||
| level | 提示类型 | string | success,warning | "success" | |
||||
| height | 高度 | number | | 30 | |
||||
| text | 显示内容 | string | | " " | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setText | 设置文本值 | 需要设置的文本值text | |
||||
| setHeight | 设置高度 | 需要设置的高度值height | |
||||
|
||||
--- |
||||
|
||||
@ -1,2 +1,114 @@
|
||||
# border |
||||
# bi.border |
||||
|
||||
#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qtdsdegp/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
Demo = {}; |
||||
Demo._createNorth = function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.label", |
||||
text: "North", |
||||
cls: "layout-bg1", |
||||
height: 30 |
||||
}) |
||||
}; |
||||
Demo._createWest = function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg2", |
||||
items:[{ |
||||
type: "bi.label", |
||||
text: "West", |
||||
whiteSpace: "normal" |
||||
}] |
||||
}) |
||||
}; |
||||
|
||||
Demo._createCenter = function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg3", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Center", |
||||
whiteSpace: "normal" |
||||
}] |
||||
}) |
||||
}; |
||||
|
||||
Demo._createEast = function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg5", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "East", |
||||
whiteSpace: "normal" |
||||
}] |
||||
}) |
||||
}; |
||||
|
||||
Demo._createSouth = function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.label", |
||||
text: "South", |
||||
cls: "layout-bg6", |
||||
height: 50 |
||||
}) |
||||
}; |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.border', |
||||
element: "#wrapper", |
||||
cls: "", |
||||
items: { |
||||
north: { |
||||
el: Demo._createNorth(), |
||||
height: 30, |
||||
top: 20, |
||||
left: 20, |
||||
right: 20 |
||||
}, |
||||
south: { |
||||
el: Demo._createSouth(), |
||||
height: 50, |
||||
bottom: 20, |
||||
left: 20, |
||||
right: 20 |
||||
}, |
||||
west: { |
||||
el: Demo._createWest(), |
||||
width: 200, |
||||
left: 20 |
||||
}, |
||||
east: { |
||||
el: Demo._createEast(), |
||||
width: 300, |
||||
right: 20 |
||||
}, |
||||
center: Demo._createCenter() |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| items | 子控件对象 | object | north,east,west,south,center | | | |
||||
|
||||
|
||||
--- |
||||
@ -1,2 +1,75 @@
|
||||
# flow |
||||
# bi.flow |
||||
|
||||
#### 靠左/右对齐的自由浮动布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/c761a856/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.left", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-1", |
||||
cls: "layout-bg1", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-2", |
||||
cls: "layout-bg2", |
||||
hgap: 20 |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}, { |
||||
type: "bi.right", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-1", |
||||
cls: "layout-bg3", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-2", |
||||
cls: "layout-bg4", |
||||
hgap: 20 |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| 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 | |
||||
| items | 子控件数组 | array | | | | |
||||
|
||||
|
||||
|
||||
--- |
||||
@ -1,2 +1,71 @@
|
||||
# grid |
||||
# bi.grid |
||||
|
||||
#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/1gwjbpL6/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.grid', |
||||
element: "#wrapper", |
||||
columns: 2, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-0", |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-0", |
||||
cls: "layout-bg2" |
||||
} |
||||
} { |
||||
column: 0, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-1", |
||||
cls: "layout-bg5" |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-1", |
||||
cls: "layout-bg6" |
||||
} |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| columns | 列的数量 | number | | null | |
||||
| rows | 行的数量 | number | | null | |
||||
| items | 子控件数组 | array | | [] | |
||||
|
||||
|
||||
|
||||
--- |
||||
@ -1,2 +1,68 @@
|
||||
# horizontal |
||||
# bi.horizontal |
||||
|
||||
#### 水平流式布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/oj7y7q3o/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.horizontal', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "layout-bg1", |
||||
text: "这里设置了lgap,rgap,tgap,bgap", |
||||
height: 30 |
||||
}, |
||||
left: 0, |
||||
right: 0 |
||||
}], |
||||
width: 100, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
text: "这里设置了lgap,rgap,tgap,bgap", |
||||
height: 30 |
||||
}, |
||||
left: 0, |
||||
right: 0 |
||||
}], |
||||
width: 200, |
||||
height: 30 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| 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 | |
||||
| items | 子控件数组 | array | | | |
||||
| columnSize | 每列宽度所组成的数组 | array | | | |
||||
| verticalAlign | 元素的垂直对齐方式 | string | | "middle" | |
||||
| scrollx | 设置水平方向是否有滚动条 | boolean | true,false | true | |
||||
|
||||
--- |
||||
@ -1,2 +1,64 @@
|
||||
# htape |
||||
# bi.htape |
||||
|
||||
#### 水平tape布局,两列定宽,一列自适应 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/ry7Lnhgw/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.htape", |
||||
element: "#wrapper", |
||||
items : [ |
||||
{ |
||||
width: 100, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '1', |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
width: 200, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '2', |
||||
cls: "layout-bg2" |
||||
} |
||||
}, { |
||||
width: 'fill', |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '3', |
||||
cls: "layout-bg3" |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| 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 | |
||||
| items | 子控件数组 | array | | | |
||||
|
||||
|
||||
|
||||
--- |
||||
@ -1,2 +1,47 @@
|
||||
# vertical |
||||
# bi.vertical |
||||
|
||||
#### 垂直流式布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/zjyaz9fn/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'demo.vertical', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||
height: 30 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| 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 | |
||||
| items | 子控件数组 | array | | | |
||||
| scrolly | 设置垂直方向是否有滚动条 | boolean | true,false | true | |
||||
|
||||
--- |
||||
@ -1,2 +1,64 @@
|
||||
# vtape |
||||
# bi.vtape |
||||
|
||||
#### 垂直tape布局,两列定高,一列自适应 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/ufpnz53d/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.vtape", |
||||
element: "#wrapper", |
||||
items : [ |
||||
{ |
||||
height: 100, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '1', |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
height: 200, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '2', |
||||
cls: "layout-bg2" |
||||
} |
||||
}, { |
||||
height: 'fill', |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '3', |
||||
cls: "layout-bg3" |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| 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 | |
||||
| items | 子控件数组 | array | | | |
||||
|
||||
|
||||
|
||||
--- |
||||
Loading…
Reference in new issue