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 |
||||
FineUI的交互、前端以及视觉文档规范 |
||||
|
||||
####1. 控件都会提供setValue, getValue, populate这几个方法来设置值，获取值(展示类控件除外)和刷新控件 |
||||
####2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能，是否可见，是否有效状态，并且在fineui2.0之后，会自动给子组件设置同样的状态，不要重写这些方法，一些需要在设置状态时的额外操作可以通过重写_setXXX来实现 |
||||
|
||||
@ -1,2 +1,37 @@
|
||||
# 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 |
||||
|
||||
##日期选择下拉框（弹出的年月选择可以进一步选择日期） |
||||
|
||||
{% 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 |
||||
|
||||
##日期选择下拉框的弹出面板 |
||||
|
||||
{% 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 |
||||
|
||||
##年月选择下拉框 |
||||
|
||||
{% 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 |
||||
|
||||
##年季度选择下拉框 |
||||
|
||||
{% 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