forked from fanruan/fineui
Browse Source
* commit '909f50d322fef30ee6d5519d90c54e9951d2c7b9': finish detailed 一些修改 finish case/tree update tree update update 锚点 日期的国际化先加载 && 详细控件 upmaster
guy
7 years ago
29 changed files with 573 additions and 143 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,2 +1,5 @@ |
|||||||
# FineUIdocs |
# FineUIdocs |
||||||
FineUI的交互、前端以及视觉文档规范 |
FineUI的交互、前端以及视觉文档规范 |
||||||
|
|
||||||
|
####1. 控件都会提供setValue, getValue, populate这几个方法来设置值，获取值(展示类控件除外)和刷新控件 |
||||||
|
####2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能，是否可见，是否有效状态，并且在fineui2.0之后，会自动给子组件设置同样的状态，不要重写这些方法，一些需要在设置状态时的额外操作可以通过重写_setXXX来实现 |
||||||
|
|||||||
@ -1,2 +1,37 @@ |
|||||||
# complex_canvas |
# complex_canvas |
||||||
|
|
||||||
|
## 复杂的canvas绘图 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/psozjkgn/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
var canvas = BI.createWidget({ |
||||||
|
type: "bi.complex_canvas", |
||||||
|
width: 500, |
||||||
|
height: 600 |
||||||
|
}); |
||||||
|
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, { |
||||||
|
offset: 20, |
||||||
|
strokeStyle: "red", |
||||||
|
lineWidth: 2 |
||||||
|
}); |
||||||
|
|
||||||
|
canvas.stroke(); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| branch | 绘制树枝节点| (x0, y0, x1, y1, x2, y2) （以x0, y0为根节点，分支到x1,y1, x2,y2...）| |
||||||
|
| stroke | 绘制 | | |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,40 @@ |
|||||||
# branch_relation |
# bi.branch_relation |
||||||
|
|
||||||
|
### 表关联树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/z5hLcruk/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.branch_relation", |
||||||
|
element: 'body', |
||||||
|
items: [], |
||||||
|
direction: BI.Direction.Right, |
||||||
|
align: BI.HorizontalAlign.Right, |
||||||
|
centerOffset: -50 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ------------ | ------- | ------ | -------------------- | |
||||||
|
| centerOffset | 重心偏移量 | number | 0 | |
||||||
|
| direction | 根节点所在方向 | string | BI.Direction.Bottom | |
||||||
|
| align | 对齐方向 | string | BI.VerticalAlign.Top | |
||||||
|
| items | 元素 | array | null | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ---- | ----------- | |
||||||
|
| populate | 刷新内容 | items: 子项数组 | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,42 @@ |
|||||||
# display_tree |
# bi.display_tree |
||||||
|
|
||||||
|
### 异步树控件 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/cfL6fpa1/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.display_tree", |
||||||
|
element: 'body', |
||||||
|
}); |
||||||
|
|
||||||
|
tree.initTree({ |
||||||
|
id: 1, |
||||||
|
text: '', |
||||||
|
open: true, |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| -------- | -------------------- | ------ | ---- | |
||||||
|
| — | — | — | — | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ------ | ---- | |
||||||
|
| initTree | 加载tree结构 | node: 节点数组 settings: 配置项 | |
||||||
|
| destroy | 摧毁元素 | — | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +0,0 @@ |
|||||||
# handstand_branch_editor |
|
||||||
|
|
||||||
@ -0,0 +1,46 @@ |
|||||||
|
# bi.branch_tree |
||||||
|
### 纵向分支的树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/c2kaoc7x/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.handstand_branch_tree", |
||||||
|
element: 'body', |
||||||
|
el: {}, |
||||||
|
items: [{ |
||||||
|
el: {}, |
||||||
|
children: [{ |
||||||
|
el: {}, |
||||||
|
children: {}, |
||||||
|
// ... |
||||||
|
}] |
||||||
|
}] |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| -------- | -------------------- | ------ | ---- | |
||||||
|
| expander | branch_expander组件配置项 | object | {} | |
||||||
|
| el | | object | {} | |
||||||
|
| items | 子项 | array | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ------ | ---- | |
||||||
|
| populate | 去掉所有内容 | — | |
||||||
|
| getValue | 获取所选项值 | — | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,2 +1,42 @@ |
|||||||
# level_tree |
# bi.level_tree |
||||||
|
|
||||||
|
### 二级树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/nvvkwhfo/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.level_tree", |
||||||
|
element: 'body', |
||||||
|
items: [], |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| -------- | ----------------- | ------ | ---- | |
||||||
|
| expander | branch_expander配置 | object | {} | |
||||||
|
| items | 元素 | array | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------------- | -------- | ----------- | |
||||||
|
| initTree | 构造树结构 | nodes | |
||||||
|
| stroke | 生成树方法 | nodes | |
||||||
|
| populate | 刷新内容 | items: 子项数组 | |
||||||
|
| setValue | 设置值 | v | |
||||||
|
| getValue | 获得值 | — | |
||||||
|
| getAllLeaves | 获取所有叶节点 | — | |
||||||
|
| getNodeById | 根据Id获取节点 | id | |
||||||
|
| getNodeByValue | 根据值获取节点 | id | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,39 @@ |
|||||||
# simple_tree |
# bi.simple_tree |
||||||
|
|
||||||
|
### 简单的多选树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/5qtobqxb/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.simple_tree", |
||||||
|
element: 'body', |
||||||
|
}); |
||||||
|
|
||||||
|
tree.populate(items); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ------------ | -------- | -------- | ---------- | |
||||||
|
| itemsCreator | items构造器 | function | BI.emptyFn | |
||||||
|
| items | 元素 | array | null | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ---- | ------------------------------ | |
||||||
|
| populate | 刷新内容 | items: 子项数组 keywords: 关键字标红字符串 | |
||||||
|
| setValue | 设置值 | v | |
||||||
|
| getValue | 获得值 | — | |
||||||
|
| empty | 清空树 | — | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,40 @@ |
|||||||
# multilayer_select_tree_combo |
# bi.multilayer_select_tree_combo |
||||||
|
|
||||||
|
### 多层级下拉可选节点树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/conjw6dL/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.multilayer_select_tree_combo", |
||||||
|
element: 'body', |
||||||
|
items: [], |
||||||
|
text: "默认值", |
||||||
|
width: 300, |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ------ | ---- | ------ | ---- | |
||||||
|
| height | 高度 | number | 30 | |
||||||
|
| text | 文本框值 | string | '' | |
||||||
|
| items | 元素 | array | null | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ---- | ----------- | |
||||||
|
| populate | 刷新内容 | items: 子项数组 | |
||||||
|
| setValue | 设置值 | setValue | |
||||||
|
| getValue | 获取值 | getValue | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,40 @@ |
|||||||
# multilayer_single_tree_combo |
# bi.multilayer_single_tree_combo |
||||||
|
|
||||||
|
### 多层级下拉单选树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/o0u3vp83/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.multilayer_single_tree_combo", |
||||||
|
element: 'body', |
||||||
|
items: [], |
||||||
|
text: "默认值", |
||||||
|
width: 300, |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ------------ | ----- | -------- | ---------- | |
||||||
|
| height | 高度 | number | 30 | |
||||||
|
| text | 文本框值 | string | '' | |
||||||
|
| itemsCreator | 元素创造器 | function | BI.emptyFn | |
||||||
|
| items | 元素 | array | null | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ---- | ----------- | |
||||||
|
| populate | 刷新内容 | items: 子项数组 | |
||||||
|
| setValue | 设置值 | setValue | |
||||||
|
| getValue | 获取值 | getValue | |
||||||
@ -1,2 +1,40 @@ |
|||||||
# select_tree_combo |
# bi.select_tree_combo |
||||||
|
|
||||||
|
### 二级可选节点下拉框树 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/Lgqr17tg/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.select_tree_combo", |
||||||
|
element: 'body', |
||||||
|
items: [], |
||||||
|
text: "默认值", |
||||||
|
width: 300, |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ------- | ---- | ------ | ---- | |
||||||
|
| height | 高度 | number | 30 | |
||||||
|
| text | 文本框值 | string | '' | |
||||||
|
| items | 元素 | array | null | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ---- | ----------- | |
||||||
|
| populate | 刷新内容 | items: 子项数组 | |
||||||
|
| setValue | 设置值 | setValue | |
||||||
|
| getValue | 获取值 | getValue | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,41 @@ |
|||||||
# single_tree_combo |
# bi.single_tree_combo |
||||||
|
|
||||||
|
### 二级树下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/oxkb9uw5/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
var tree = BI.createWidget({ |
||||||
|
type: "bi.simple_tree_combo", |
||||||
|
element: 'body', |
||||||
|
items: [], |
||||||
|
text: "默认值", |
||||||
|
width: 300, |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 参数设置 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| ------- | ---- | ------ | ---- | |
||||||
|
| trigger | | object | {} | |
||||||
|
| height | 高度 | number | 30 | |
||||||
|
| text | 文本框值 | string | '' | |
||||||
|
| items | 元素 | array | null | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 方法 |
||||||
|
|
||||||
|
| 方法名 | 说明 | 回调参数 | |
||||||
|
| -------- | ---- | ----------- | |
||||||
|
| populate | 刷新内容 | items: 子项数组 | |
||||||
|
| setValue | 设置值 | setValue | |
||||||
|
| getValue | 获取值 | getValue | |
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,23 @@ |
|||||||
# date_combo |
# date_combo |
||||||
|
|
||||||
|
##日期选择下拉框（弹出的年月选择可以进一步选择日期） |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/ebps32uy/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.date_combo", |
||||||
|
element: "#wrapper", |
||||||
|
width: 300 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
--- --- |
||||||
@ -1,2 +1,26 @@ |
|||||||
# date_pane_widget |
# date_pane_widget |
||||||
|
|
||||||
|
##日期选择下拉框的弹出面板 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/rL9005u6/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.date_pane_widget", |
||||||
|
element: "#wrapper", |
||||||
|
width: 300 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| min | 限定可选日期的下限 | string | | '1900-01-01' | |
||||||
|
| max | 限定可选日期的上限 | string | | '2099-12-31' | |
||||||
|
| selectedTime | 选中的初始年月 | obj({year: y, month: m}) | | | |
||||||
|
--- --- |
||||||
@ -1,2 +1,24 @@ |
|||||||
# year_month_combo |
# year_month_combo |
||||||
|
|
||||||
|
##年月选择下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/ehvjj3xt/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.year_month_combo", |
||||||
|
width: 300 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| yearBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | | |
||||||
|
| monthBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | | |
||||||
|
--- --- |
||||||
@ -1,2 +1,24 @@ |
|||||||
# year_quarter_combo |
# year_quarter_combo |
||||||
|
|
||||||
|
##年季度选择下拉框 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/xe6Lt6mo/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.year_quarter_combo", |
||||||
|
width: 300 |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
##参数 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :-----| :----|:----| |
||||||
|
| yearBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | | |
||||||
|
| monthBehaviors |自定义年份选择的行为(详见[button_group](../../core/abstract/button_group.md)) | object| | | |
||||||
|
--- --- |
||||||
Loading…
Reference in new issue