Urthur
7 years ago
133 changed files with 5259 additions and 512 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,32 @@
|
||||
/** |
||||
* Created by GUY on 2016/5/7. |
||||
* @class BI.LayerTreeTableCell |
||||
* @extends BI.Single |
||||
*/ |
||||
BI.LayerTreeTableCell = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.LayerTreeTableCell.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-layer-tree-table-cell", |
||||
layer: 0, |
||||
text: "" |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.LayerTreeTableCell.superclass._init.apply(this, arguments); |
||||
var o = this.options; |
||||
BI.createWidget({ |
||||
type: "bi.label", |
||||
element: this.element, |
||||
textAlign: "left", |
||||
whiteSpace: "nowrap", |
||||
height: o.height, |
||||
text: o.text, |
||||
value: o.value, |
||||
lgap: 5 + 30 * o.layer, |
||||
rgap: 5 |
||||
}) |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.layer_tree_table_cell", BI.LayerTreeTableCell); |
||||
@ -1,8 +1,8 @@
|
||||
.bi-page-table-cell { |
||||
-webkit-user-select: initial; |
||||
-khtml-user-select: initial; |
||||
-moz-user-select: initial; |
||||
-ms-user-select: initial; |
||||
-o-user-select: initial; |
||||
user-select: initial; |
||||
-webkit-user-select: text; |
||||
-khtml-user-select: text; |
||||
-moz-user-select: text; |
||||
-ms-user-select: text; |
||||
-o-user-select: text; |
||||
user-select: text; |
||||
} |
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "../../bibase"; |
||||
|
||||
.bi-page-table-cell { |
||||
.user-select(initial); |
||||
.user-select-enable(); |
||||
} |
||||
@ -0,0 +1,100 @@
|
||||
/** |
||||
* Created by User on 2017/9/5. |
||||
*/ |
||||
BI.CustomFineTuningNumberEditor = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.CustomFineTuningNumberEditor.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-fine-tuning-number-editor bi-border", |
||||
value: 0, |
||||
validationChecker: function () { |
||||
return true; |
||||
}, |
||||
errorText: "" |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.CustomFineTuningNumberEditor.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.editor = BI.createWidget({ |
||||
type: "bi.sign_editor", |
||||
height: o.height, |
||||
value: o.value, |
||||
validationChecker: o.validationChecker, |
||||
errorText: o.errorText |
||||
}); |
||||
this.editor.on(BI.TextEditor.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.CustomFineTuningNumberEditor.EVENT_CHANGE); |
||||
}); |
||||
this.editor.on(BI.TextEditor.EVENT_CONFIRM, function(){ |
||||
self.fireEvent(BI.CustomFineTuningNumberEditor.EVENT_CONFIRM); |
||||
}); |
||||
this.topBtn = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
trigger: "lclick,", |
||||
cls: "column-pre-page-h-font top-button bi-border-left bi-border-bottom" |
||||
}); |
||||
this.topBtn.on(BI.IconButton.EVENT_CHANGE, function(){ |
||||
self._finetuning(1); |
||||
self.fireEvent(BI.CustomFineTuningNumberEditor.EVENT_CHANGE); |
||||
self.fireEvent(BI.CustomFineTuningNumberEditor.EVENT_CONFIRM); |
||||
}); |
||||
this.bottomBtn = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
trigger: "lclick,", |
||||
cls: "column-next-page-h-font bottom-button bi-border-left bi-border-top" |
||||
}); |
||||
this.bottomBtn.on(BI.IconButton.EVENT_CHANGE, function(){ |
||||
self._finetuning(-1); |
||||
self.fireEvent(BI.CustomFineTuningNumberEditor.EVENT_CHANGE); |
||||
self.fireEvent(BI.CustomFineTuningNumberEditor.EVENT_CONFIRM); |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.htape", |
||||
element: this, |
||||
items: [this.editor, { |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this.topBtn |
||||
}, { |
||||
column: 0, |
||||
row: 1, |
||||
el: this.bottomBtn |
||||
}] |
||||
}, |
||||
width: 23 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
//微调
|
||||
_finetuning: function(add){ |
||||
var v = BI.parseFloat(this.editor.getValue()); |
||||
this.editor.setValue(v.add(add)); |
||||
}, |
||||
|
||||
setUpEnable: function (v) { |
||||
this.topBtn.setEnable(!!v); |
||||
}, |
||||
|
||||
setBottomEnable: function (v) { |
||||
this.bottomBtn.setEnable(!!v); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.editor.getValue(); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.editor.setValue(v); |
||||
} |
||||
|
||||
}); |
||||
BI.CustomFineTuningNumberEditor.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.CustomFineTuningNumberEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
BI.shortcut("bi.custom_fine_tuning_number_editor", BI.CustomFineTuningNumberEditor); |
||||
@ -1,2 +1,7 @@
|
||||
# FineUIdocs |
||||
FineUI的交互、前端以及视觉文档规范 |
||||
|
||||
####1. 控件都会提供setValue, getValue, populate这几个方法来设置值，获取值(展示类控件除外)和刷新控件 |
||||
####2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能，是否可见，是否有效状态，并且在fineui2.0之后，会自动给子组件设置同样的状态，不要重写这些方法，一些需要在设置状态时的额外操作可以通过重写_setXXX来实现 |
||||
####3. 使用populate来清空或者重置布局，不要使用empty, 慎用resize |
||||
####4. 谨慎监听和触发BI.Controller.EVENT_CHANGE事件，一般来说，控件都会有一个BI.ClassName.EVENT_CHANGE事件,一些特殊的事件会在对应控件文档中列出 |
||||
@ -1,2 +1,72 @@
|
||||
# button |
||||
# bi.button |
||||
|
||||
## 文字类型的按钮,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.button', |
||||
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,nowrap | nowrap| |
||||
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | false | |
||||
| textWidth| 按钮文本宽度 | number| | null | |
||||
| textHeight | 按钮文本高度 | number| | null | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setText| 设置文本值 | 需要设置的文本值text| |
||||
| doClick | 点击事件 | —| |
||||
| destroy | 销毁事件 |— | |
||||
| setValue | 设置文本值 | 需要设置的文本值text | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,39 @@
|
||||
# icon_button |
||||
# bi.icon_button |
||||
|
||||
## 图标button,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/g52u14ay/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.icon_button', |
||||
cls: "close-ha-font", |
||||
width: 20, |
||||
height: 20 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| iconWidth | 图标宽度 | number| | null | |
||||
| iconHeight | 图标高度 | number| | null | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doClick | 点击事件 | —| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,49 @@
|
||||
# image_button |
||||
# bi.image_button |
||||
|
||||
## 图片的button,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/yc0g9gLw/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.image_button', |
||||
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128", |
||||
width: 100, |
||||
height: 100 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| src |图片路径 |string | |" " | |
||||
| iconWidth | 图标宽度 | number/string| | "100%" | |
||||
| iconHeight | 图标高度 | number/string | | "100%"| |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doClick | 点击事件 | —| |
||||
| setWidth | 设置按钮宽度| 宽度width | |
||||
| setHeight | 设置按钮高度 | 高度height| |
||||
| setImageWidth | 设置图片宽度| 宽度width | |
||||
| setImageHeight| 设置图片高度| 高度height| |
||||
| getImageWidth | 获取图片宽度| —| |
||||
| getImageHeight | 获取图片高度| —| |
||||
| setSrc| 设置图片路径| src | |
||||
| getSrc |获取图片路径| — | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,58 @@
|
||||
# text_button |
||||
# bi.text_button |
||||
|
||||
## 可以点击的一行文字,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/5p99L39q/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.text_button', |
||||
text: '文字按钮', |
||||
height: 30 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | | 10 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||
| text|按钮文本内容 | string| | | |
||||
| textWidth| 按钮文本宽度 | number| | null | |
||||
| textHeight | 按钮文本高度 | number| | null | |
||||
|
||||
|
||||
##### 高级属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| py | | string| | " " | |
||||
| textAlign | 文字布局 | string | left,center,right | cneter | |
||||
| whiteSpace | 元素内的空白处理方式 | string | normal,nowrap | nowrap| |
||||
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | false | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setText| 设置文本值 | 需要设置的文本值text| |
||||
| doClick | 点击事件 | —| |
||||
| setValue | 设置文本值 | 需要设置的文本值text | |
||||
| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,40 @@
|
||||
# canvas |
||||
# bi.canvas |
||||
|
||||
## canvas绘图,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/gcgd1va0/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
var canvas = BI.createWidget({ |
||||
type: "bi.canvas", |
||||
element: "#wrapper", |
||||
width: 500, |
||||
height: 600 |
||||
}); |
||||
canvas.circle(150, 50, 20, "green"); |
||||
canvas.stroke(); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| line | 绘制线段| (x0, y0, x1, y1) | |
||||
| rect | 绘制矩形 | (x,y,w,h,color)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及绘制的颜色| |
||||
| circle | 绘制圆形 | (x, y, radius, color)分别表示原点的横坐标，纵坐标，半径以及颜色 | |
||||
| hollow | 填充中空的路径 | | |
||||
| solid | 填充实心的路径 | | |
||||
| gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) | |
||||
| reset | 重置画布 | —| |
||||
| stroke | 绘制 | callback | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,53 @@
|
||||
# code_editor |
||||
# bi.code_editor |
||||
|
||||
## 代码文本框,基类[BI.Single](/core/single.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/fx86hLgm/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.code_editor", |
||||
cls: "mvc-border", |
||||
width: 600, |
||||
height: 400 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| watermark | 文本框placeholder | string | | " " | |
||||
| readOnly | 是否只读 | boolean | true,false | false| |
||||
| lineHeight | 行高 | number|— | 2| |
||||
| value | 文本框值| string| | " "| |
||||
| paramFormatter| 参数显示值构造函数 | function| | value | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| insertParam | 插入参数 | param | |
||||
| insertString | 插入字符串 | str| |
||||
| getValue | 获取文本框值|—| |
||||
| setValue | 设置文本框值|value| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setStyle | 设置文本样式 |需要设置的文本标签样式style,例{"color":"#000"} | |
||||
| getStyle | 获取文本样式 |— | |
||||
| refresh | 刷新文本框 | —| |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,90 @@
|
||||
# editor |
||||
# bi.editor |
||||
|
||||
## 文本框,基类[BI.Single](/core/single.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/4eLytgve/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.editor", |
||||
element: "#wrapper", |
||||
errorText: "字段不可重名!", |
||||
width: 200, |
||||
height: 30 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||
| validationChecker | 输入较验函数 |function| | | |
||||
| quitChecker | 是否允许退出编辑函数 | function | | | |
||||
| mouseOut | | boolean | true,false | false | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | false | |
||||
| watermark | 文本框placeholder | string | | " " | |
||||
| errorText | 错误提示 | string/function | | " "| |
||||
| tipType| 提示类型 | string |success,warning | "warning"| |
||||
| inputType| 输入框类型| string| | "text"| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| setErrorVisible | 设置错误文本可见|b | |
||||
| disableError | 设置error不可用|— | |
||||
| enableError| 设置error可用| —| |
||||
| disableWaterMark | 设置文本框placeholder不可用| —| |
||||
| enableWaterMark | 恢复文本框placeholder可用| — | |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| selectAll | 选中文本框文本| —| |
||||
| onKeyDown |按键事件|key| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| resetLastValidValue| 重置文本框最后一次输入的有效值|value| |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,59 @@
|
||||
# formula_editor |
||||
# bi.formula_editor |
||||
|
||||
## 公式编辑控件,基类[BI.Single](/core/single.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qnquz4o0/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.formula_editor", |
||||
cls: "bi-border", |
||||
watermark:'请输入公式', |
||||
value: 'SUM(C5, 16, 26)', |
||||
width: "100%", |
||||
height: "100%" |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| value | 文本域的值 | string | | " "| |
||||
| watermark | 文本框placeholder| string | | " " | |
||||
| fieldTextValueMap | | string| | {}| |
||||
| showHint | | | | 2 | |
||||
| lineHeight | 行高 | number | | 2| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| disableWaterMark | 设置文本框placeholder不可用 | — | |
||||
| focus | 文本框获取焦点| — | |
||||
| insertField | 添加字段 | field | |
||||
| insertFunction | | fn | |
||||
| insertOperator | | op| |
||||
| setFunction | | v| |
||||
| insertString | 插入字符串 | str| |
||||
| getFormulaString | |— | |
||||
| getUsedFields | | — | |
||||
| getCheckString | | — | |
||||
| getValue | 获取文本框值|—| |
||||
| setValue | 设置文本框值|value| |
||||
| setFieldTextValueMap | | fieldTextValueMap | |
||||
| refresh | 刷新文本框 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,51 @@
|
||||
# multifile_editor |
||||
# bi.multifile_editor |
||||
|
||||
## 多文件,基类[BI.Single](/core/single.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/25r3r5fq/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.multifile_editor", |
||||
width: 400, |
||||
height: 300 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| multiple | 是否支持多选 | boolean | true,false| false | |
||||
| maxSize | 最大可选数量 | number | | -1 | |
||||
| accept | | string | | " "| |
||||
| url | 文件路径 | string | | " "| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| select | 选择文件 | —| |
||||
| getValue | 获取文件名称 | —| |
||||
| upload | 文件上传| —| |
||||
| reset | 重置| —| |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.MultifileEditor.EVENT_UPLOADSTART | 开始上传时触发 | |
||||
|BI.MultifileEditor.EVENT_PROGRESS | 上传过程中触发 | |
||||
|BI.MultifileEditor.EVENT_UPLOADED | 上传结束后触发 | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,45 @@
|
||||
# textarea_editor |
||||
# bi.textarea_editor |
||||
|
||||
## 文本域,基类[BI.Single](/core/single.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/90721e0a/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.textarea_editor", |
||||
width: 400, |
||||
height: 300 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| value | 文本域的值 | string | | " "| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| getValue | 获取文本域值|—| |
||||
| setValue | 设置文本域值|value| |
||||
| setStyle | 设置文本域样式 |需要设置的文本域样式style,例{"color":"#000"} | |
||||
| getStyle | 获取文本域样式 |— | |
||||
| focus | 文本域获取焦点| — | |
||||
| blur | 文本域失焦|—| |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,68 @@
|
||||
# pager |
||||
# bi.pager |
||||
|
||||
## 分页控件,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/rhhte9b3/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.pager", |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 6, |
||||
first: "首页", |
||||
last: "尾页" |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| behaviors | | object| | {}| |
||||
| layouts | 布局| array | | {type:"bi.horizontal",hgap:10,vgap:0} | |
||||
| dynamicShow | 是否动态显示上一页、下一页、首页、尾页， 若为false，则指对其设置使能状态 | boolean| true,false | true| |
||||
| dynamicShowFirstLast | 是否动态显示首页、尾页,dynamicShow为false时生效| boolean| true,false | false | |
||||
| dynamicShowPrevNext | 是否动态显示上一页、下一页,dynamicShow为false时生效 | boolean| true,false | false| |
||||
| pages | 是否显示总页数 | boolean| true,false|false| |
||||
| curr | 初始化当前页 | function | | function(){return 1;}| |
||||
| groups | 连续显示分页数 | number | | 0 | |
||||
| jump | 页数跳转| function | | | |
||||
| first | 是否显示首页 | boolean | true,false| false| |
||||
| last | 是否显示尾页 | boolean | true,false| false| |
||||
| prev | 上一页 | string,object | |"上一页" | |
||||
| next | 下一页 | sting,object| | "下一页" | |
||||
| firstPage | 第一页 | number| | 1 | |
||||
| lastPage | 最后一页,在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 | function | | function(){ return 1;}| |
||||
| hasPrev | 判断是否有上一页,pages不可用时有效 | function | | — | |
||||
| hasNext | 判断是否有下一页,pages不可用时有效 | function | | — | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| getCurrentPage | 获取当前页码 | —| |
||||
| setAllPages | 设置总页数 | pages | |
||||
| hasPrev | 判断是否有上一页 | v | |
||||
| hasNext | 判断是否有下一页 | v | |
||||
| setValue | 设置当前页码 | v | |
||||
| getValue | 获取当前页码 | | |
||||
| attr | 设置属性 | key,value | |
||||
| populate | | —| |
||||
|
||||
## 事件 |
||||
| 名称 | 说明 | |
||||
| :------ |:------------- | |
||||
| BI.Pager.EVENT_AFTER_POPULATE | pager刷新完成事件 | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,55 @@
|
||||
# svg |
||||
# bi.svg |
||||
|
||||
## svg绘图,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/1xn8snp3/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
var svg = BI.createWidget({ |
||||
type: "bi.svg", |
||||
width: 500, |
||||
height: 600 |
||||
}); |
||||
|
||||
svg.path("M10,10L50,50M50,10L10,50") |
||||
.attr({stroke: "red"}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| add | 添加对象到json数组 | json | |
||||
| path | 绘制路径 | pathString | |
||||
| image | 绘制图片 | (src,x,y,w,h)分别表示图片路径，绘制的原点横、纵坐标，宽、高 | |
||||
| rect | 绘制矩形 | (x,y,w,h,r)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及矩形的圆角border-radius大小| |
||||
| circle | 绘制圆形 | (x,y,r)分别表示原点的横坐标，纵坐标，以及半径 | |
||||
| ellipse | 绘制椭圆 |(x,y,rx,ry)分别表示原点的横、纵坐标，以及水平半径和垂直半径| |
||||
| text | 绘制文本 | (x,y,text)分别表示绘制的原点横、纵坐标以及要绘制的文本内容| |
||||
| print | 根据制定参数打印出路径 | (x, y, string, font, size, origin, letter_spacing, line_spacing) | |
||||
| setStart | 开始绘制 | | |
||||
| setFinish | 结束绘制 | | |
||||
| setSize | 设置画布尺寸 | (width,height)分别表示画布宽高| |
||||
| setViewBox | 设置画布可视区域 | (x,y,width,height,fit)分别表示可视区域原点坐标以及可视区域宽高，以及是否根据可视区域进行调整 | |
||||
| getById | 根据id返回元素 | id | |
||||
| getElementByPoint | 获根据给定的点坐标返回元素 | (x,y)| |
||||
| getElementsByPoint | 获根据给定的点坐标返回元素 | (x,y) | |
||||
| getFont | 通过给定的参数在已注册的字体中找到字体对象 | (family, weight, style, stretch) | |
||||
| set | 绘制形状的集合 | | |
||||
| remove | 设置总页数 | pages | |
||||
| clear | 判断是否有上一页 | v | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,53 @@
|
||||
# multi_select_item |
||||
# bi.multi_select_item |
||||
|
||||
## 复选框item,基类[BI.BasicButton](/core/basic_button.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/0z1fud88/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.vertical', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "复选item" |
||||
}, { |
||||
type: "bi.multi_select_item", |
||||
text: "复选项" |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 30 |
||||
| logic | | object | | {dynamic:false} | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setSelected| 设置选中值| v | |
||||
| doRedMark | 标红 |—| |
||||
| unRedMark | 取消标红 | — | |
||||
| doClick | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,54 @@
|
||||
# single_select_item |
||||
# bi.single_select_item |
||||
|
||||
## 复选框item,基类[BI.BasicButton](/core/basic_button.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/19qqcej4/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.vertical', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "复选item" |
||||
}, { |
||||
type: "bi.single_select_item", |
||||
text: "复选项" |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 25 |
||||
| hgap | 效果相当于文本框左右padding值 |number | —| 10 | |
||||
|textAlign |文本对齐方式 |string |left,center,right |"left" |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setSelected| 设置选中值| v | |
||||
| doRedMark | 标红 |—| |
||||
| unRedMark | 取消标红 | — | |
||||
| doClick | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,55 @@
|
||||
# single_select_radio_item |
||||
# bi.single_select_radio_item |
||||
|
||||
## 单选框item,基类[BI.BasicButton](/core/basic_button.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/d3vw4438/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.vertical', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "单选item" |
||||
}, { |
||||
type: "bi.single_select_radio_item", |
||||
text: "单选项" |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 25 |
||||
| hgap | 效果相当于文本框左右padding值 |number | —| 10 | |
||||
|textAlign |文本对齐方式 |string |left,center,right |"left" |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setSelected| 设置选中值| v | |
||||
| doRedMark | 标红 |—| |
||||
| unRedMark | 取消标红 | — | |
||||
| doClick | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,46 @@
|
||||
# calendar |
||||
# bi.calendar |
||||
|
||||
### 日历控件 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/4sfsaoma/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.calendar', |
||||
min: '1900-01-01', //最小日期 |
||||
max: '2099-12-31', //最大日期 |
||||
year: 2015, |
||||
month: 7, //7表示八月 |
||||
day: 25, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----- | ----- | ------ | ------------ | |
||||
| min | 最小日期 | string | '1900-01-01' | |
||||
| max | 最大日期 | string | '2099-12-31' | |
||||
| year | 设定的年份 | number | 2015 | |
||||
| month | 设定的月份 | number | 7 | |
||||
| day | 设定的日期 | number | 25 | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| ----------- | ------- | -------------------------- | |
||||
| isFrontDate | 是否为最小日期 | — | |
||||
| isFinalDate | 是否为最大日期 | — | |
||||
| setValue | 设置日期 | object: {year, month, day} | |
||||
| getVlaue | 获得日期 | — | |
||||
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
# bi.clipboard |
||||
|
||||
### 剪切板 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/kLzq99c3/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.clipboard', |
||||
width: 100, |
||||
height: 100, |
||||
copy: function () {}, |
||||
|
||||
afterCopy: function () {} |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| --------- | ---------- | -------- | ---------- | |
||||
| copy | 获取需要拷贝的值 | function | BI.emptyFn | |
||||
| afterCopy | 完成拷贝后执行的方法 | function | BI.emptyFn | |
||||
|
||||
@ -1,2 +1,31 @@
|
||||
# color_chooser |
||||
# bi.color_chooser |
||||
|
||||
### 选色控件 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/z4fwweg9/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.color_chooser", |
||||
element: "#wrapper", |
||||
width: 30, |
||||
height: 30 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| ------------- | ------ | ----- | |
||||
| isViewVisible | 判断是否显示 | — | |
||||
| setValue | 设置颜色值 | color | |
||||
| getValue | 获取颜色值 | — | |
||||
|
||||
|
||||
@ -1,2 +1,86 @@
|
||||
# bubble_combo |
||||
# bi.bubble_combo |
||||
|
||||
## 表示一个可以展开的节点, 不仅有选中状态而且有展开状态, 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/urvt04so/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.bubble_combo", |
||||
element:"#wrapper", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "测试", |
||||
height: 25 |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_group", |
||||
items: BI.makeArray(100, { |
||||
type: "bi.text_item", |
||||
height: 25, |
||||
text: "item" |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
}, |
||||
maxHeight: 200 |
||||
} |
||||
}) |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| text | | string | | "" | |
||||
| value | 组件value值 | string | |""| |
||||
| stopEvent | 阻止事件 |boolean | true,false | false | |
||||
| stopPropagation | 阻止冒泡 | boolean | true,false| false | |
||||
| selected | button的选中状态 | boolean | true,false |false | |
||||
| once | 点击一次选中有效,再点无效 | boolean | true,false | false| |
||||
| forceSelected | 点击即选中, 选中了就不会被取消,与once的区别是forceSelected不影响事件的触发| boolean | true,false| false| |
||||
| forceNotSelected | 无论怎么点击都不会被选中 | boolean| true,false | false| |
||||
| disableSelected | 使能选中| boolean | true,false| false| |
||||
| shadow | 是否显示阴影 | boolean| true,false| false| |
||||
| isShadowShowingOnSelected| 选中状态下是否显示阴影|boolean| true,false | false| |
||||
| trigger | 被选元素要触发的事件 | string | mousedown, mouseup, click, dblclick, lclick | null| |
||||
| handler | 点击事件回调 | function | | BI.emptyFn | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| bindEvent | 绑定事件| —| |
||||
| beforeClick | 点击事件之前 | —| |
||||
| doClick | 点击事件 | — | |
||||
| handle | 返回该对象 | —| |
||||
| hover | hover事件| —| |
||||
| dishover | 取消hover事件| —| |
||||
|setSelected | 设置选中的文本| b| |
||||
| isSelected | 是否被选中| —| |
||||
| isOnce | 是否只允许点击一次| —| |
||||
| isForceSelected| 判断是否点击即选中| —| |
||||
| isForceNotSelected| 判断是否怎么点击都不会被选中|—| |
||||
| isDisableSelected| 判断是否让选中|—| |
||||
| setText| 设置文本值|—| |
||||
| getText| 获取文本值|—| |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,38 @@
|
||||
# formula_combo |
||||
# bi.formula_combo_trigger |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/urvt04so/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | —| 30 |
||||
| items | 子组件 | array | [ ]| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,53 @@
|
||||
# icon_combo |
||||
# bi.icon_combo |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/urvt04so/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| width | 宽度 | number | — | 24 |
||||
| height | 高度 | number | — | 24 |
||||
| iconClass | icon的类名 | string | " "| |
||||
| el | 开启弹出层的元素| object | { } | |
||||
| popup | 弹出层| object | —| { } |
||||
| minWidth| 最小宽度| number | —|100| |
||||
| maxWidth | 最大宽度 | string/number | — | "auto"| |
||||
| maxHeight | 最大高度 | number | —| 300 |
||||
| adjustLength | 调整的距离 | number | — | 0 | |
||||
| adjustXOffset | 调整横向偏移 | number | — | 0 | |
||||
| adjustYOffset |调整纵向偏移 | number | — | 0 | |
||||
| offsetStyle | 弹出层显示位置 | string | left,right,center | "left,right,center"| |
||||
| chooseType | 选择类型 | const | | BI.ButtonGroup.CHOOSE_TYPE_SINGLE | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
| showView | 显示弹出层 | —| |
||||
| hideView | 隐藏弹出层 |—| |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,43 @@
|
||||
# static_combo |
||||
# bi.static_combo |
||||
|
||||
## 单选combo,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/urvt04so/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 24 |
||||
| el | 开启弹出层的元素| object | { } | |
||||
| items | 子组件 | array | — | [ ] |
||||
| text | 文本内容 | string | — | " " | |
||||
| chooseType | 选择类型 | const | | BI.ButtonGroup.CHOOSE_TYPE_SINGLE | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,40 @@
|
||||
# text_value_downlist_combo |
||||
# bi.text_value_down_list_combo |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/urvt04so/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 30 |
||||
| text | 文本内容 | string | — | " " | |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -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,96 @@
|
||||
# shelter_editor |
||||
# bi.shelter_editor |
||||
|
||||
## 带标记的文本框,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/9Lbx6kga/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.shelter_editor", |
||||
cls: "bi-border", |
||||
ref:function(_ref){ |
||||
editor=_ref; |
||||
}, |
||||
width: 300, |
||||
watermark: "这个是带标记的" |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||
| validationChecker | 输入较验函数 |function| | | |
||||
| quitChecker | 是否允许退出编辑函数 | function | | | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | | " " | |
||||
| errorText | 错误提示 | string/function | | " "| |
||||
| height| 高度| number |— | 30| |
||||
| textAlign| 对齐方式 | left,center,righta| | "left"| |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| onKeyDown |按键事件|key| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| setTextStyle| 设置文本框样式| style | |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setTitle| 设置title | title| |
||||
| setWarningTitle| 设置错误title | title | |
||||
| setState | 设置文本框值 |— |
||||
| getState | 获取文本框值 | — |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,91 @@
|
||||
# sign_editor |
||||
# bi.sign_editor |
||||
|
||||
## 带标记的文本框,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/tmdedu5t/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.sign_editor", |
||||
cls:"layout-bg5", |
||||
value: "123", |
||||
text: "456", |
||||
width: 300 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||
| validationChecker | 输入较验函数 |function| | | |
||||
| quitChecker | 是否允许退出编辑函数 | function | | | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | | " " | |
||||
| errorText | 错误提示 | string/function | | " "| |
||||
| height| 高度| number |— | 30| |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setTitle| 设置title | title| |
||||
| setWarningTitle| 设置错误title | title | |
||||
| setState | 设置文本框值 |— |
||||
| getState | 获取文本框值 | — |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,92 @@
|
||||
# sign_initial_editor |
||||
# bi.sign_initial_editor |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/9vjghevp/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.sign_initial_editor", |
||||
cls: "layout-bg5", |
||||
text: "原始值", |
||||
width: 300 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||
| validationChecker | 输入较验函数 |function| | | |
||||
| quitChecker | 是否允许退出编辑函数 | function | | | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | | " " | |
||||
| errorText | 错误提示 | string/function | | " "| |
||||
| height| 高度| number |— | 30| |
||||
| text | 文本内容 | string | | " " | |
||||
| value | 文本value值 | string | | " " | |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setTitle| 设置title | title| |
||||
| setWarningTitle| 设置错误title | title | |
||||
| setState | 设置文本框值 |— |
||||
| getState | 获取文本框值 | — |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,89 @@
|
||||
# state_editor |
||||
# bi.state_editor |
||||
|
||||
## 记录状态的输入框，基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/p68bwkmv/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.state_editor", |
||||
value: "123", |
||||
text: "456", |
||||
width: 300 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||
| validationChecker | 输入较验函数 |function| | | |
||||
| quitChecker | 是否允许退出编辑函数 | function | | | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | | " " | |
||||
| errorText | 错误提示 | string/function | | " "| |
||||
| height| 高度| number |— | 30| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setState | 设置文本框值 |— |
||||
| getState | 获取文本框值 | — |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,68 @@
|
||||
# pane_list |
||||
# bi.list_pane |
||||
|
||||
## list面板，基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/p68bwkmv/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| items | 列表 | array | — | [ ] |
||||
| itemsCreator | 列表创建器| function | — | — |
||||
| hasNext | 是否有下一页 | function | —| — |
||||
| onLoad | 正在加载 | function | —| — |
||||
| el | 开启panel的元素 | object | —|{type: "bi.button_group" }| |
||||
| logic | | object |— | { dynamic:true} |
||||
| 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 | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| prependItems | 内部前插入 | items | |
||||
| addItems | 内部后插入 | items | |
||||
| removeItemAt | 移除指定索引处的item | indexs | |
||||
| populate | 刷新列表 | items | |
||||
| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组| |
||||
| setValue | 设置value值 | value,可以是单个值也可以是个数组 | |
||||
| getNotSelectedValue | 获取没有被选中的值 | —| |
||||
| getValue | 获取被选中的值 |—| |
||||
| getAllButtons | 获取所有button |—| |
||||
| getAllLeaves | 获取所有的叶子节点 | —| |
||||
| getSelectedButtons | 获取所有被选中的元素 | —| |
||||
| getNotSelectedButtons | 获取所有未被选中的元素 | —| |
||||
| getIndexByValue | 根据value值获取value在数组中的索引 | value| |
||||
| getNodeById | 根据id获取节点 | id | |
||||
| getNodeByValue | 根据value值获取节点 | value | |
||||
| empty| 清空组件|—| |
||||
| hasPrev| 是否有上一页|—| |
||||
| hasNext | 是否有下一页 | — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,40 @@
|
||||
# panel |
||||
# bi.panel |
||||
|
||||
## 带有标题栏的panel，基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/p68bwkmv/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| title | 标题 | string | — | " " |
||||
| titleButton | | array | —| [ ] |
||||
| el | 开启panel的元素 | object | —|{ }| |
||||
| logic | | object |— | { dynamic:false} |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setTitle |设置标题| title |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,57 @@
|
||||
# select_list |
||||
# bi.select_list |
||||
|
||||
### 选择列表 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/c3azpxss/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.select_list", |
||||
items: [{ |
||||
text: '1', |
||||
}, { |
||||
text: '2', |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------------ | --------------- | -------- | ---------------- | |
||||
| direction | toolbar位置 | string | BI.Direction.Top | |
||||
| onLoaded | 加载完成的回调（测试了无效果） | function | BI.emptyFn | |
||||
| items | 子项 | array | [] | |
||||
| itemsCreator | 元素创造器 | function | BI.emptyFn | |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ------------- | ------- | |
||||
| setAllSelected | 设置全选 | v: boolean | |
||||
| setToolBarVisible | 设置toolbar是否可见 | b: boolean | |
||||
| isAllSelected | 是否全选中 | — | |
||||
| hasPrev | 是否有上一页 | — | |
||||
| hasNext | 是否有下一页 | — | |
||||
| prependItems | 列表最前添加元素 | items | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| resetHeight | 重新设置高度 | h | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
@ -1,2 +1,41 @@
|
||||
# lazy_loader |
||||
# bi.lazy_loader |
||||
|
||||
### 懒加载 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/n710yphc/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.lazy_loader", |
||||
width: 100, |
||||
element: 'body', |
||||
items: items, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ---------- | ----- | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
@ -1,2 +1,53 @@
|
||||
# list_loader |
||||
# bi.list_loader |
||||
|
||||
### 恶心的加载控件， 为解决排序问题引入的控件 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/8wa7rvcd/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.list_loader", |
||||
width: 100, |
||||
element: 'body', |
||||
items: items, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------------ | ------ | -------- | ---------- | |
||||
| count | 分页计数 | number | false | |
||||
| next | | object | {} | |
||||
| hasNext | 是否有下一页 | function | BI.emptyFn | |
||||
| items | 子项 | array | [] | |
||||
| itemsCreator | 元素创造器 | function | BI.emptyFn | |
||||
| onLoaded | 加载完成回调 | function | BI.emptyFn | |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ---------- | ----- | |
||||
| hasNext | 是否有下一页 | — | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| resetHeight | 重新设置高度 | h | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
|
||||
@ -1,2 +1,53 @@
|
||||
# sort_list |
||||
# bi.sort_list |
||||
|
||||
### 排序列表 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/wj68tdvx/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.sort_list", |
||||
width: 100, |
||||
element: 'body', |
||||
items: items, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------------ | ------ | -------- | ---------- | |
||||
| count | 分页计数 | number | false | |
||||
| next | | object | {} | |
||||
| hasNext | 是否有下一页 | function | BI.emptyFn | |
||||
| items | 子项 | array | [] | |
||||
| itemsCreator | 元素创造器 | function | BI.emptyFn | |
||||
| onLoaded | 加载完成回调 | function | BI.emptyFn | |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ---------- | ----- | |
||||
| hasNext | 是否有下一页 | — | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| resetHeight | 重新设置高度 | h | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
|
||||
@ -1,2 +1,47 @@
|
||||
# all_count_pager |
||||
# bi.all_count_pager |
||||
|
||||
### 有总页数和总行数的分页控件 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/cmtamo5L/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.all_count_pager', |
||||
height: 30, |
||||
pages: 10, //必选项 |
||||
curr: 1, |
||||
count: 1, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------ | ---- | ------ | ---- | |
||||
| height | 控件高度 | number | 30 | |
||||
| pages | 总页数 | number | 1 | |
||||
| curr | 当前页 | number | 1 | |
||||
| count | 总行数 | number | 1 | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------- | -------- | ---------- | |
||||
| setAllPages | 设置总页数 | v | |
||||
| setValue | 设置当前页码 | v | |
||||
| setVPage | 设置当前页码 | v | |
||||
| setCount | 设置计数 | count | |
||||
| getCurrentPage | 获取当前页码 | — | |
||||
| hasPrev | 是否有前一页 | — | |
||||
| hasNext | 是否有后一页 | — | |
||||
| setPagerVisible | 设置页码是否可见 | true/false | |
||||
| populate | 清空内容 | — | |
||||
|
||||
|
||||
@ -1,2 +1,64 @@
|
||||
# direction_pager |
||||
# bi.direction_pager |
||||
|
||||
### 显示页码的分页控件 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/vyc36s2a/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
var pager = BI.createWidget({ |
||||
type: 'bi.direction_pager', |
||||
height: 30, |
||||
horizontal: { |
||||
pages: 10, //必选项 |
||||
curr: 1, //初始化当前页， pages为数字时可用， |
||||
firstPage: 1, |
||||
lastPage: 10, |
||||
}, |
||||
vertical: { |
||||
pages: 10, //必选项 |
||||
curr: 1, //初始化当前页， pages为数字时可用， |
||||
firstPage: 1, |
||||
lastPage: 10, |
||||
}, |
||||
element: 'body', |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 二级参数 | 说明 | 类型 | 默认值 | |
||||
| ---------- | --------- | ---------------------- | --------------- | ---------- | |
||||
| height | | 控件高度 | number | 30 | |
||||
| horizontal | | 横向翻页设置 | object | — | |
||||
| | pages | 总页数 | number/bool | false | |
||||
| | curr | 当前页， pages为数字时可用 | number | 1 | |
||||
| | hasPrev | 判断是否有前一页的方法 | function | BI.emptyFn | |
||||
| | hasNext | 判断是否有后一页的方法 | function | BI.emptyFn | |
||||
| | firstPage | 第一页 | number | 1 | |
||||
| | lastPage | 最后一页 | number/function | BI.emptyFn | |
||||
| vertical | | 纵向翻页设置，参数与horizontal相同 | object | — | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| ---------------- | ---------- | ---- | |
||||
| getVPage | 获取纵向页码 | — | |
||||
| getHPage | 获取水平向页码 | — | |
||||
| setVPage | 获取纵向页码 | v | |
||||
| setHPage | 获取水平向页码 | v | |
||||
| hasVNext | 纵向坐标是否有下一页 | — | |
||||
| hasHNext | 横向坐标是否有下一页 | — | |
||||
| hasVPrev | 纵向坐标是否有上一页 | — | |
||||
| hasHPrev | 横向坐标是否有上一页 | — | |
||||
| setHPagerVisible | 设置横向分页键可见 | — | |
||||
| setVPagerVisible | 设置纵向分页键可见 | — | |
||||
| populate | 清空内容 | — | |
||||
|
||||
|
||||
@ -1,2 +1,58 @@
|
||||
# segment |
||||
# bi.sgement |
||||
|
||||
## 各种segment |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/7skvd64L/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: "#wrapper", |
||||
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 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% 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,68 @@
|
||||
# adaptive_table |
||||
# bi.adaptive_table |
||||
|
||||
### 自适应宽度的表格 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/pbgnjeg0/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
BI.createWidget({ |
||||
type: "bi.adaptive_table", |
||||
element: 'body', |
||||
width: 600, |
||||
height: 500, |
||||
isResizeAdapt: true, |
||||
isNeedResize: true, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
columnSize: [50,50,200,250,400], |
||||
header: [], |
||||
items: [], |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ---------------- | ------------- | -------------------- | ----------------- | |
||||
| isNeedResize | 是否可改变列大小 | bool | true | |
||||
| isNeedFreeze | 是否需要冻结表头 | bool | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||
| mergeCols | 合并的单元格列号 | array | [] | |
||||
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||
| columnSize | 单元格宽度集合 | array | [] | |
||||
| minColumnSize | 最小列宽 | array | [] | |
||||
| maxColumnSize | 最大列宽 | array | [] | |
||||
| headerRowSize | 表头高度 | number | 25 | |
||||
| rowSize | 普通单元格高度 | number | 25 | |
||||
| regionColumnSize | 列项间的 | array | [] | |
||||
| header | 表头 | array | [] | |
||||
| items | 子组件 | array | [] | |
||||
| crossHeader | 交叉表头 | array | [] | |
||||
| crossItems | 交叉项 | array | [] | |
||||
|
||||
|
||||
|
||||
## 方法 |
||||
| 方法名 | 说明 | 回调参数 | |
||||
| ------------------------ | ----------- | ------------------ | |
||||
| setWidth | 设置宽度 | width: 宽度 | |
||||
| setHeight | 设置高度 | height: 高度 | |
||||
| setColumnSize | 设置列宽 | columnSize: 列宽数组 | |
||||
| getColumnSize | 得到列宽 | — | |
||||
| setRegionColumnSize | 设置列项之间的间隙 | columnSize: 列宽数组 | |
||||
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||
| setVerticalScroll | 设置纵向滚动距离 | scrollTop: 纵向滚动距离 | |
||||
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||
| attr | 设置属性 | key: 键 value: 值 | |
||||
| restore | 存储 | — | |
||||
| populate | 增加项 | items: array | |
||||
| destroy | 摧毁表 | — | |
||||
|
||||
|
||||
@ -1,2 +1,62 @@
|
||||
# layer_tree_table |
||||
# bi.layer_tree_table |
||||
|
||||
### 层级树状结构的表格 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/pqyuLoay/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
// More coming... |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----------------------- | ------------------------ | -------------------- | ----------------- | |
||||
| isNeedResize | 是否需要调整列宽 | bool | false | |
||||
| isResizeAdapt | 是否需要在调整列宽或区域宽度的时候它们自适应变化 | bool | true | |
||||
| isNeedFreeze | 是否需要冻结表头 | bool | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||
| mergeCols | 合并的单元格列号 | array | [] | |
||||
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||
| columnSize | 单元格宽度集合 | array | [] | |
||||
| minColumnSize | 最小列宽 | array | [] | |
||||
| maxColumnSize | 最大列宽 | array | [] | |
||||
| headerRowSize | 表头高度 | number | 25 | |
||||
| headerCellStyleGetter | | function | BI.emptyFn | |
||||
| summaryCellStyleGetter | | function | BI.emptyFn | |
||||
| sequenceCellStyleGetter | | function | BI.emptyFn | |
||||
| rowSize | 普通单元格高度 | number | 25 | |
||||
| regionColumnSize | 列项间的 | array | [] | |
||||
| header | 表头 | array | [] | |
||||
| items | 子组件 | array | [] | |
||||
| crossHeader | 交叉表头 | array | [] | |
||||
| crossItems | 交叉项 | array | [] | |
||||
|
||||
|
||||
|
||||
## 方法 |
||||
| 方法名 | 说明 | 回调参数 | |
||||
| ------------------------ | ----------- | ------------------ | |
||||
| setWidth | 设置宽度 | width: 宽度 | |
||||
| setHeight | 设置高度 | height: 高度 | |
||||
| setColumnSize | 设置列宽 | columnSize: 列宽数组 | |
||||
| getColumnSize | 得到列宽 | — | |
||||
| setRegionColumnSize | 设置列项之间的间隙 | columnSize: 列宽数组 | |
||||
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||
| setVerticalScroll | 设置纵向滚动距离 | scrollTop: 纵向滚动距离 | |
||||
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||
| attr | 设置属性 | key: 键 value: 值 | |
||||
| restore | 存储 | — | |
||||
| populate | 增加项 | items: array | |
||||
| destroy | 摧毁表 | — | |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,2 +1,64 @@
|
||||
# bi.tree_table |
||||
|
||||
### 树状结构的表格 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/pqyuLoay/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
// More coming... |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----------------------- | ------------------------ | -------------------- | ----------------- | |
||||
| isNeedResize | 是否需要调整列宽 | bool | false | |
||||
| isResizeAdapt | 是否需要在调整列宽或区域宽度的时候它们自适应变化 | bool | true | |
||||
| isNeedFreeze | 是否需要冻结表头 | bool | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedMerge | 是否需要合并单元格 | bool | false | |
||||
| mergeCols | 合并的单元格列号 | array | [] | |
||||
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||
| columnSize | 单元格宽度集合 | array | [] | |
||||
| minColumnSize | 最小列宽 | array | [] | |
||||
| maxColumnSize | 最大列宽 | array | [] | |
||||
| headerRowSize | 表头高度 | number | 25 | |
||||
| headerCellStyleGetter | | function | BI.emptyFn | |
||||
| summaryCellStyleGetter | | function | BI.emptyFn | |
||||
| sequenceCellStyleGetter | | function | BI.emptyFn | |
||||
| rowSize | 普通单元格高度 | number | 25 | |
||||
| regionColumnSize | 列项间的 | array | [] | |
||||
| header | 表头 | array | [] | |
||||
| items | 子组件 | array | [] | |
||||
| crossHeader | 交叉表头 | array | [] | |
||||
| crossItems | 交叉项 | array | [] | |
||||
|
||||
|
||||
|
||||
## 方法 |
||||
| 方法名 | 说明 | 回调参数 | |
||||
| ------------------------ | ----------- | ------------------ | |
||||
| setWidth | 设置宽度 | width: 宽度 | |
||||
| setHeight | 设置高度 | height: 高度 | |
||||
| setColumnSize | 设置列宽 | columnSize: 列宽数组 | |
||||
| getColumnSize | 得到列宽 | — | |
||||
| setRegionColumnSize | 设置列项之间的间隙 | columnSize: 列宽数组 | |
||||
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||
| setVerticalScroll | 设置纵向滚动距离 | scrollTop: 纵向滚动距离 | |
||||
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft: 横向滚动距离 | |
||||
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||
| attr | 设置属性 | key: 键 value: 值 | |
||||
| restore | 存储 | — | |
||||
| populate | 增加项 | items: array | |
||||
| destroy | 摧毁表 | — | |
||||
|
||||
|
||||
|
||||
# tree_table |
||||
|
||||
|
||||
@ -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,43 @@
|
||||
# branch_tree |
||||
# bi.branch_tree |
||||
### 横向分支的树 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/mLq3e170/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
BI.createWidget({ |
||||
type: "bi.branch_tree", |
||||
element: 'body', |
||||
items: [{ |
||||
el: {}, |
||||
children: [{ |
||||
el: {}, |
||||
children: {}, |
||||
// ... |
||||
}] |
||||
}] |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 参数设置 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| -------- | -------------------- | ------ | ---- | |
||||
| expander | branch_expander组件配置项 | object | {} | |
||||
| el | | object | {} | |
||||
| items | 子项 | array | [] | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 回调参数 | |
||||
| -------- | ------ | ---- | |
||||
| populate | 去掉所有内容 | — | |
||||
| getValue | 获取所选项值 | — | |
||||
|
||||
|
||||
@ -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,42 @@
|
||||
# editor_trigger |
||||
# bi.editor_trigger |
||||
|
||||
### 文本输入框trigger |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/8ttm4g1u/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.editor_trigger", |
||||
element: "body", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----------------- | ------- | -------- | ---------- | |
||||
| validationChecker | 验证函数 | function | BI.emptyFn | |
||||
| quitChecker | 退出时验证函数 | function | BI.emptyFn | |
||||
| allowBlank | 是否允许为空 | bool | false | |
||||
| watermark | 水印 | string | "" | |
||||
| errorText | 错误信息 | string | "" | |
||||
| triggerWidth | 触发器宽度 | number | 30 | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| -------- | ---- | ----- | |
||||
| setValue | 设置值 | value | |
||||
| getVlaue | 获得值 | — | |
||||
| setText | | text | |
||||
|
||||
|
||||
@ -1,2 +1,18 @@
|
||||
# icon_trigger |
||||
# bi.icon_trigger |
||||
|
||||
### 图标按钮trigger |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qs44h1xy/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.icon_trigger", |
||||
element: "body", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
@ -1,2 +1,28 @@
|
||||
# text_trigger |
||||
# bi.text_trigger |
||||
|
||||
### 文本输入框trigger |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/6pz5pjp6/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.editor_trigger", |
||||
element: "body", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| -------- | ---- | ----- | |
||||
| setValue | 设置值 | value | |
||||
| getVlaue | 获得值 | — | |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,2 +1,67 @@
|
||||
# button_group |
||||
# bi.button_group |
||||
|
||||
## 一组具有相同属性的元素集合,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/te0nLap1/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.button_group", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}], |
||||
items: [{ |
||||
el: { |
||||
type: "bi.label", |
||||
text: "button_group" |
||||
}, |
||||
height: 50, |
||||
}] |
||||
}) |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| behaviors | |object | |{ }| |
||||
| items | 子组件数组 | array | | [ ] | |
||||
| chooseType | 选择类型 | const |CHOOSE_TYPE_SINGLE,CHOOSE_TYPE_MULTI,CHOOSE_TYPE_ALL,CHOOSE_TYPE_NONE,CHOOSE_TYPE_DEFAULT | CHOOSE_TYPE_SINGLE | |
||||
| layouts | 布局 | array | | [{type: "bi.center",hgap: 0,vgap: 0}] | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doBehavior | | —| |
||||
| prependItems | 内部前插入 | items | |
||||
| addItems | 内部后插入 | items | |
||||
| removeItemAt | 移除指定索引处的item | indexs | |
||||
| removeItems | 移除制定元素 | values | |
||||
| populate | 刷新列表 | items | |
||||
| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组| |
||||
| setEnabledValue | 设置value值可用| value,可以是单个值也可以是个数组 | |
||||
| setValue | 设置value值 | value,可以是单个值也可以是个数组 | |
||||
| getNotSelectedValue | 获取没有被选中的值 | —| |
||||
| getValue | 获取被选中的值 |—| |
||||
| getAllButtons | 获取所有button |—| |
||||
| getAllLeaves | 获取所有的叶子节点 | —| |
||||
| getSelectedButtons | 获取所有被选中的元素 | —| |
||||
| getNotSelectedButtons | 获取所有未被选中的元素 | —| |
||||
| getIndexByValue | 根据value值获取value在数组中的索引 | value| |
||||
| getNodeById | 根据id获取节点 | id | |
||||
| getNodeByValue | 根据value值获取节点 | value | |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,50 @@
|
||||
# button_tree |
||||
# bi.button_tree |
||||
|
||||
## 一组具有相同属性的元素集合,基类[BI.ButtonGroup](/core/abstract/button_group.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/pgwpw4n9/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.button_tree", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}], |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "0", |
||||
value: "label1", |
||||
height:50, |
||||
vgap:10 |
||||
}] |
||||
}) |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组| |
||||
| setEnabledValue | 设置value值可用| value,可以是单个值也可以是个数组 | |
||||
| setValue | 设置value值 | value,可以是单个值也可以是个数组 | |
||||
| getNotSelectedValue | 获取没有被选中的值 | —| |
||||
| getValue | 获取被选中的值 |—| |
||||
| getAllButtons | 获取所有button |—| |
||||
| getAllLeaves | 获取所有的叶子节点 | —| |
||||
| getSelectedButtons | 获取所有被选中的元素 | —| |
||||
| getNotSelectedButtons | 获取所有未被选中的元素 | —| |
||||
| getIndexByValue | 根据value值获取value在数组中的索引 | value| |
||||
| getNodeById | 根据id获取节点 | id | |
||||
| getNodeByValue | 根据value值获取节点 | value | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,71 @@
|
||||
# collection_view |
||||
# bi.collection_view |
||||
|
||||
## CollectionView,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/cmq0b3v0/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.collection_view", |
||||
element:"#wrapper", |
||||
width: 400, |
||||
height: 300, |
||||
items: [], |
||||
cellSizeAndPositionGetter: function (index) { |
||||
return { |
||||
x: index % 10 * 50, |
||||
y: Math.floor(index / 10) * 50, |
||||
width: 50, |
||||
height: 50 |
||||
} |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| items | 子组件数组 | array | | [ ] | |
||||
| overflowX | 是否显示横向滚动条| boolean | true,false | true | |
||||
| overflowY | 是否显示纵向滚动条 | boolean | true,false | true | |
||||
| cellSizeAndPositionGetter |设置每个单元格的位置坐标和宽高 | function| | — | |
||||
| horizontalOverscanSize | | number | | 0 | |
||||
| verticalOverscanSize | | number | | 0 | |
||||
| width | 行宽，必设 |number| | — | |
||||
| height | 列宽，必设 | number | | — | |
||||
| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 | |
||||
| scrollTop | 滚动条相对于顶部的偏移 | number | — | 0 | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft| |
||||
| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop | |
||||
| setOverflowX | 设置是否显示横向滚动条 | b | |
||||
| setOverflowY | 设置是否显示横向滚动条 | b| |
||||
| getScrollLeft | 获取滚动条相对于左边的偏移 | —| |
||||
| getScrollTop | 获取滚动条相对于顶部的偏移 | — | |
||||
| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — | |
||||
| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—| |
||||
| restore | 还原列表设置 | — | |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | 回调参数 | |
||||
| :------ |:------------- |:------------------------| |
||||
|BI.GridView.EVENT_SCROLL| 滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,84 @@
|
||||
# custom_tree |
||||
# bi.custom_tree |
||||
|
||||
## 自定义树,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/gesh31xg/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.custom_tree", |
||||
el: { |
||||
type: "bi.button_tree", |
||||
chooseType: 0, |
||||
layouts: [{ |
||||
type: "bi.vertical", |
||||
hgap: 30 |
||||
}] |
||||
}, |
||||
items: [{ |
||||
id: -1, |
||||
pId: -2, |
||||
value: "根目录", |
||||
open: true, |
||||
type: "bi.plus_group_node", |
||||
height: 25 |
||||
}, |
||||
{ |
||||
id: 1, |
||||
pId: -1, |
||||
value: "第一级目录1", |
||||
type: "bi.plus_group_node", |
||||
height: 25 |
||||
}, |
||||
{ |
||||
id: 11, |
||||
pId: 1, |
||||
value: "第二级文件1", |
||||
type: "bi.single_select_item", |
||||
height: 25 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| items | 子组件数组 | array | | [ ] | |
||||
| itemsCreator| | | | | |
||||
| expander | | object | | {el: {},popup: {type: "bi.custom_tree"}}| |
||||
| el | | object | | {type: "bi.button_tree",chooseType: 0,layouts: [{type: "bi.vertical"}]}| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| initTree | 构造树结构 | nodes | |
||||
| stroke | 生成树方法 | nodes | |
||||
| prependItems | 内部前插入 | items | |
||||
| addItems | 内部后插入 | items | |
||||
| populate | 刷新列表 | nodes| |
||||
| render | 渲染列表 | | |
||||
| setValue | 设置value值 | value,可以是单个值也可以是个数组 | |
||||
| getValue | 获取被选中的值 |—| |
||||
| getAllButtons | 获取所有button |—| |
||||
| getAllLeaves | 获取所有的叶子节点 | —| |
||||
| getNodeById | 根据id获取节点 | id | |
||||
| getNodeByValue | 根据value值获取节点 | value | |
||||
| empty| 清空组件|—| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,77 @@
|
||||
# grid_view |
||||
# bi.grid_view |
||||
|
||||
## GridView,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/fkntzLq5/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.grid_view", |
||||
width: 400, |
||||
height: 300, |
||||
estimatedRowSize: 30, |
||||
estimatedColumnSize: 100, |
||||
items: [], |
||||
scrollTop: 100, |
||||
rowHeightGetter: function () { |
||||
return 30; |
||||
}, |
||||
columnWidthGetter: function () { |
||||
return 100; |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| items | 子组件数组 | array | | [ ] | |
||||
| overflowX | 是否显示横向滚动条| boolean | true,false | true | |
||||
| overflowY | 是否显示纵向滚动条 | boolean | true,false | true | |
||||
| overscanColumnCount| | number| | 0 | |
||||
| overscanRowCount| | number | | 0 | |
||||
| width | 行宽，必设 |number| | — | |
||||
| height | 列宽，必设 | number | | — | |
||||
| rowHeightGetter| 每格行宽 |number,function | | function | |
||||
| columnWidthGetter| 每格列宽 | number,function | | function | |
||||
| estimatedColumnSize| 每格行宽，columnWidthGetter为function时必设 |number,function | | function | |
||||
| estimatedRowSize | 每格列宽，rowHeightGetter为function时必设 | number,function | | function | |
||||
| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 | |
||||
| scrollTop | 滚动条相对于顶部的偏移 | number | —|0 | |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft| |
||||
| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop | |
||||
| setOverflowX | 设置是否显示横向滚动条 | b | |
||||
| setOverflowY | 设置是否显示横向滚动条 | b| |
||||
| getScrollLeft | 获取滚动条相对于左边的偏移 | —| |
||||
| getScrollTop | 获取滚动条相对于顶部的偏移 | — | |
||||
| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — | |
||||
| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—| |
||||
| setEstimatedColumnSize | 设置列宽 |width| |
||||
| setEstimatedRowSize | 设置行宽 | height | |
||||
| restore | 还原列表设置 | — | |
||||
| populate | 刷新列表 | items | |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | 回调参数 |
||||
| :------ |:------------- |:----------| |
||||
|BI.CollectionView.EVENT_SCROLL| 滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,51 @@
|
||||
# virtual_group |
||||
# bi.virtual_group |
||||
|
||||
## 一组具有相同属性的元素集合,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/gesh31xg/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.virtual_group", |
||||
width: 500, |
||||
height: 300, |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}, { |
||||
type: "bi.center_adapt", |
||||
}], |
||||
items:[] |
||||
}) |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| items | 子组件数组 | array | | [ ] | |
||||
| layouts | 布局 | array | | [{type: "bi.center",hgap: 0,vgap: 0}] | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue | 设置value值 | value,可以是单个值也可以是个数组 | |
||||
| getValue | 获取被选中的值 |—| |
||||
| prependItems | 内部前插入 | items | |
||||
| addItems | 内部后插入 | items | |
||||
| populate | 刷新列表 | items | |
||||
| render | 渲染列表 | | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,52 @@
|
||||
# virtual_list |
||||
# bi.virtual_list |
||||
|
||||
## VirtualList,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/L995LrL9/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.virtual_list", |
||||
element:"body", |
||||
items: BI.map([{value: "xxxx"}], function (i, item) { |
||||
return BI.extend({}, item, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: (i + 1) + "." + item.text, |
||||
}); |
||||
}) |
||||
}) |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| items | 子组件数组 | array | | [ ] | |
||||
| blockSize | | number | | 10 | |
||||
| overscanHeight | | number | | 100 | |
||||
| scrollTop | 滚动条相对于顶部的偏移 | number | — | 0 | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| render | 渲染列表 | —| |
||||
| mounted | 组件挂载 | —| |
||||
| restore | 还原列表设置 | — | |
||||
| populate | 刷新列表 | items | |
||||
| destroyed | 销毁组件 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,46 @@
|
||||
# basic_button |
||||
# bi.basic_button |
||||
|
||||
## 一般的button父级,基类[BI.Single](/core/single.md) |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| value | 组件value值 | string | | null| |
||||
| stopEvent | 阻止事件 |boolean | true,false | false | |
||||
| stopPropagation | 阻止冒泡 | boolean | true,false| false | |
||||
| selected | button的选中状态 | boolean | true,false |false | |
||||
| once | 点击一次选中有效,再点无效 | boolean | true,false | false| |
||||
| forceSelected | 点击即选中, 选中了就不会被取消,与once的区别是forceSelected不影响事件的触发| boolean | true,false| false| |
||||
| forceNotSelected | 无论怎么点击都不会被选中 | boolean| true,false | false| |
||||
| disableSelected | 使能选中| boolean | true,false| false| |
||||
| shadow | 是否显示阴影 | boolean| true,false| false| |
||||
| isShadowShowingOnSelected| 选中状态下是否显示阴影|boolean| true,false | false| |
||||
| trigger | 被选元素要触发的事件 | string | mousedown, mouseup, click, dblclick, lclick | null| |
||||
| handler | 点击事件回调 | function | | BI.emptyFn | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| bindEvent | 绑定事件| —| |
||||
| beforeClick | 点击事件之前 | —| |
||||
| doClick | 点击事件 | — | |
||||
| handle | 返回该对象 | —| |
||||
| hover | hover事件| —| |
||||
| dishover | 取消hover事件| —| |
||||
|setSelected | 设置选中的文本| b| |
||||
| isSelected | 是否被选中| —| |
||||
| isOnce | 是否只允许点击一次| —| |
||||
| isForceSelected| 判断是否点击即选中| —| |
||||
| isForceNotSelected| 判断是否怎么点击都不会被选中|—| |
||||
| isDisableSelected| 判断是否让选中|—| |
||||
| setText| 设置文本值|—| |
||||
| getText| 获取文本值|—| |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,88 @@
|
||||
# combo |
||||
# bi.combo |
||||
|
||||
## combo,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/wxykkjou/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.combo", |
||||
element: "body", |
||||
adjustLength: 2, |
||||
el: { |
||||
type: "bi.button", |
||||
text: "测试", |
||||
height: 25 |
||||
}, |
||||
popup: {} |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| trigger | 事件类型 | string | | "click" | |
||||
| toggle | 切换状态 | boolean | true,false | true | |
||||
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "bottom"| |
||||
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false | |
||||
| destroyWhenHide | 隐藏弹窗层是否销毁 | boolean | true,false | false | |
||||
| isNeedAdjustHeight | 是否需要高度调整 | boolean | true,false | true | |
||||
| isNeedAdjustWidth | 是否需要宽度调整 | boolean | true,false | true | |
||||
| stopEvent | 是否阻止事件 | boolean | true,false | false | |
||||
| stopPropagation | 阻止事件冒泡 | boolean | true,false | false | |
||||
| adjustLength | 调整的距离 | number | — | 0 | |
||||
| adjustXOffset | 调整横向偏移 | number | — | 0 | |
||||
| adjustYOffset |调整纵向偏移 | number | — | 0 | |
||||
| hideChecker | | function | | —| |
||||
| offsetStyle | 弹出层显示位置 | string | left,right,center | "left,right,center"| |
||||
| el | 开启弹出层的元素 | object | — |{ }| |
||||
| popup | 弹出层 | object | — | { }| |
||||
| comboClass | | string | | "bi-combo-popup" | |
||||
| hoverClass | | string | | "bi-combo-hover" | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| adjustWidth | 调整宽度 | —| |
||||
| adjustHeight | 调整高度 | —| |
||||
| resetListHeight | 重置列表高度 | height | |
||||
| resetListWidth | 重置列表宽度 | width | |
||||
| populate | 刷新列表 | items | |
||||
| setValue |设置combo value值| v | |
||||
| getValue | 获取combo value值 | —| |
||||
| isViewVisible | 弹窗层是否可见 | —| |
||||
| showView | 显示弹出层 | —| |
||||
| hideView | 隐藏弹出层 |—| |
||||
| getView | 获取弹出层 | —| |
||||
| getPopupPosition | 获取弹出层的位置 | —| |
||||
| toggle | 开启或者隐藏弹出层 | —| |
||||
| destroy | 销毁组件 | —| |
||||
|
||||
## 事件 |
||||
| 名称 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Combo.EVENT_TRIGGER_CHANGE | trigger发生改变触发 | |
||||
|BI.Combo.EVENT_CHANGE | 弹出层点击触发 | |
||||
|BI.Combo.EVENT_EXPAND | 下拉框展开触发 | |
||||
|BI.Combo.EVENT_COLLAPSE | 下拉框收起触发 |
||||
|BI.Combo.EVENT_AFTER_INIT | 下拉框初始化后触发 | |
||||
|BI.Combo.EVENT_BEFORE_POPUPVIEW | 下拉列表弹出前触发 | |
||||
|BI.Combo.EVENT_AFTER_POPUPVIEW | 下拉列表弹出后触发 | |
||||
|BI.Combo.EVENT_BEFORE_HIDEVIEW | 下拉列表收起前触发 | |
||||
|BI.Combo.EVENT_AFTER_HIDEVIEW | 下拉列表收起后触发 | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,52 @@
|
||||
# expander |
||||
# bi.expander |
||||
|
||||
## 某个可以展开的节点,基类[BI.Widget](/core/widget.md) |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| trigger | 事件类型 | string | | "click" | |
||||
| toggle | 切换状态 | boolean | true,false | true | |
||||
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "bottom"| |
||||
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false | |
||||
| el | 开启弹出层的元素 | object | — |{ }| |
||||
| popup | 弹出层 | object | — | { }| |
||||
| expanderClass | | string | | "bi-expander-popup" | |
||||
| hoverClass | | string | | "bi-expander-hover" | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| populate | 刷新列表 | items | |
||||
| setValue | 设置combo value值| v | |
||||
| getValue | 获取combo value值 | —| |
||||
| isViewVisible | 弹窗层是否可见 | —| |
||||
| showView | || |
||||
| hideView ||| |
||||
| getView ||| |
||||
| getAllLeaves | 获取所有的叶子节点 | —| |
||||
| getNodeById | 根据id获取节点 | id | |
||||
| getNodeByValue | 根据value值获取节点 | value | |
||||
| isExpanded | 节点是否展开 | | |
||||
| destroy | 销毁组件| — | |
||||
|
||||
## 事件 |
||||
| 名称 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Expander.EVENT_TRIGGER_CHANGE | trigger发生改变触发 | |
||||
|BI.Expander.EVENT_CHANGE | 弹出层点击触发 | |
||||
|BI.Expander.EVENT_EXPAND | Expander展开触发 | |
||||
|BI.Expander.EVENT_COLLAPSE | Expander收起触发 |
||||
|BI.Expander.EVENT_AFTER_INIT | Expander初始化后触发 | |
||||
|BI.Expander.EVENT_BEFORE_POPUPVIEW | 下拉列表弹出前触发 | |
||||
|BI.Expander.EVENT_AFTER_POPUPVIEW | 下拉列表弹出后触发 | |
||||
|BI.Expander.EVENT_BEFORE_HIDEVIEW | 下拉列表收起前触发 | |
||||
|BI.Expander.EVENT_AFTER_HIDEVIEW | 下拉列表收起后触发 | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,33 @@
|
||||
# group_combo |
||||
# bi.combo_group |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| trigger | 事件类型 | string | | "click,hover" | |
||||
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "right"| |
||||
| childern | 子组件 | array | — | [ ] | |
||||
| el | 开启弹出层的元素 | object | — | {type: "bi.text_button", text: "", value: ""}| |
||||
| popup | 弹出层 | object | — |{el: {type: "bi.button_tree",chooseType: 0,layouts: [{type: "bi.vertical"}]}}| |
||||
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false | |
||||
| isNeedAdjustHeight | 是否需要高度调整 | boolean | true,false | false | |
||||
| isNeedAdjustWidth | 是否需要宽度调整 | boolean | true,false | false | |
||||
| adjustLength | 调整的距离 | number | — | 0 | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| populate | 刷新列表 | items | |
||||
| setValue | 设置combo value值| v | |
||||
| getValue | 获取combo value值 | — | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,49 @@
|
||||
# loader |
||||
# bi.loader |
||||
|
||||
## 加载控件,[BI.Widget](/core/widget.md) |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| direction | combo弹出层位置 | string | top,bottom,left,right,(top,left),(top,right),(bottom,left),(bottom,right) | "top"| |
||||
| isDefaultInit | 是否默认初始化子数据 |boolean | true,false | true | |
||||
| logic | | object | | {dynamic:true,scrolly:true} | |
||||
| items| | array | | []| |
||||
| itemsCreator | | function | | — | |
||||
| onLoaded | | function | | — | |
||||
| count | 是否显示总页数 | boolean| true,false|boolean| |
||||
| prev | 上一页 | boolean | true,false | boolean | |
||||
| next | 下一页 | boolean | true,false | boolean | |
||||
| hasPrev | 判断是否有上一页 | function | | — | |
||||
| hasNext | 判断是否有下一页 | function | | — | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| hasNext | 判断是否有下一页 | — | |
||||
| prependItems | 内部前插入 | items | |
||||
| addItems | 内部后插入 | items | |
||||
| populate | 刷新列表 | items | |
||||
| setNotSelectedValue| 设置未被选中的值 | value,可以是单个值也可以是个数组| |
||||
| setValue | 设置value值 | value,可以是单个值也可以是个数组 | |
||||
| getNotSelectedValue | 获取没有被选中的值 | —| |
||||
| getValue | 获取被选中的值 |—| |
||||
| getAllButtons | 获取所有button |—| |
||||
| getAllLeaves | 获取所有的叶子节点 | —| |
||||
| getSelectedButtons | 获取所有被选中的元素 | —| |
||||
| getNotSelectedButtons | 获取所有未被选中的元素 | —| |
||||
| getIndexByValue | 根据value值获取value在数组中的索引 | value| |
||||
| getNodeById | 根据id获取节点 | id | |
||||
| getNodeByValue | 根据value值获取节点 | value | |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,79 @@
|
||||
# navigation |
||||
# bi.navigation |
||||
|
||||
## 导航栏控件,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/ubsren48/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.navigation", |
||||
tab: { |
||||
height: 30, |
||||
items: [{ |
||||
once: false, |
||||
text: "后退", |
||||
value: -1 |
||||
}, { |
||||
once: false, |
||||
text: "前进", |
||||
value: 1 |
||||
}] |
||||
}, |
||||
cardCreator: function(v) { |
||||
return BI.createWidget({ |
||||
type: "bi.label", |
||||
cls: "layout-bg" + BI.random(1, 8), |
||||
text: "第" + v + "页" |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| direction | 控件位置 | string | top,bottom,left,right,custom | "bottom"| |
||||
| single | 是否为单页 | boolean | true,false | true | |
||||
| defaultShowIndex | 是否默认显示 |boolean | true,false | true | |
||||
| tab | tab页元素 | boolean | true,false | true | |
||||
| defaultShowIndex | 是否默认显示 | boolean | true,false | false | |
||||
| logic | | object | | {dynamic:true} | |
||||
| cardCreator | 面板构造器 | function | — | v | |
||||
| afterCardCreated | 面板构造之后 | function | — | — | |
||||
| afterCardShow | 面板显示之后 | function | - | — | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| render | 渲染组件 | — | |
||||
| mounted | 挂载组件 | —| |
||||
| afterCardCreated | | v | |
||||
| afterCardShow | | v | |
||||
| setSelect | 设置选中的index | v | |
||||
| getSelect | 获取选中的index| —| |
||||
| getSelectedCard | | —| |
||||
| populate | 刷新列表 | items | |
||||
| setValue | 设置value值 | value | |
||||
| getValue | 获取被选中的值 |—| |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,102 @@
|
||||
# searcher |
||||
# bi.searcher |
||||
|
||||
## 搜索逻辑控件,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/k6s24et1/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.searcher", |
||||
element:"#wrapper", |
||||
adapter: { |
||||
getItems: function () { |
||||
return [{ |
||||
type: "bi.label", |
||||
value: "张三" |
||||
}] |
||||
} |
||||
}, |
||||
popup: { |
||||
type: "bi.button_group", |
||||
cls: "bi-border", |
||||
items: items, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}], |
||||
}, |
||||
masker: false |
||||
}) |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% 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 | |
||||
| chooseType | 选择类型 | const | | CHOOSE_TYPE_SINGLE | |
||||
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false | |
||||
| isAutoSearch | 是否自动搜索 |boolean | true,false | true | |
||||
| isAutoSync | 是否自动同步数据, 即是否保持搜索面板和adapter面板状态值的统一 |boolean | true,false | true | |
||||
| onSearch | isAutoSearch为false时启用 | function(op.callback) | | | |
||||
| el | 开启弹出层的元素 | object | — | {type: "bi.search_editor"}| |
||||
| popup | 弹出层 | object | — |{type: "bi.searcher_view"}| |
||||
| adapter | 弹出层显示的位置元素 | object | - | null| |
||||
| masker | masker层 | object | — | {offset: {}}| |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| populate | 刷新列表 | result, searchResult, keyword | |
||||
| setValue | 设置value值 | value | |
||||
| getValue | 获取被选中的值 |—| |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
| adapter | | | |
||||
| doSearch | 开始搜索 | — | |
||||
| stopSearch | 停止搜索 | —| |
||||
| isSearching | 是否正在搜索 | —| |
||||
| isViewVisible | 组件是否可见 | —| |
||||
| getView | 获取搜索列表栏 | —| |
||||
| hasMatched | 是否匹配 | —| |
||||
| adjustHeight | 调整高度 | —| |
||||
| adjustView| 调整搜索列表栏| —| |
||||
| getKeyword | 获取搜索关键词| —| |
||||
| getKeywords | 获取搜索关键词数组| —| |
||||
|
||||
|
||||
## 事件方法 |
||||
|
||||
| 事件名称| 说明| 回调参数 | |
||||
| :------ |:------------- | :----- |
||||
| EVENT_START | 开始搜索 | —| |
||||
| EVENT_STOP | 停止搜索 | —| |
||||
| EVENT_PAUSE | 暂停搜索 | —| |
||||
| EVENT_SEARCHING | 搜索中| —| |
||||
| EVENT_AFTER_INIT | 初始化之后 | —| |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Searcher.EVENT_CHANGE | 搜索结果面板发生改变触发 | |
||||
|BI.Searcher.EVENT_START | 开始搜索触发 | |
||||
|BI.Searcher.EVENT_STOP | 停止搜索触发(搜索框为空) | |
||||
|BI.Searcher.EVENT_PAUSE | 搜索暂停触发(搜索文本以空白字符结尾) | |
||||
|BI.Searcher.EVENT_SEARCHING | 正在搜索时触发 | |
||||
|BI.Searcher.EVENT_AFTER_INIT | 搜索结果面板初始化完成后触发 | |
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,83 @@
|
||||
# switcher |
||||
# bi.switcher |
||||
|
||||
## 切换显示或隐藏面板,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/4sj60ap0/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.switcher", |
||||
el: { |
||||
type: "bi.button", |
||||
height: 25, |
||||
text: "Switcher" |
||||
}, |
||||
popup: { |
||||
|
||||
}, |
||||
adapter: { |
||||
|
||||
} |
||||
}) |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| trigger | 事件类型 | string | | "click" | |
||||
| toggle | 切换状态 | boolean | true,false | true | |
||||
| direction | 面板显示的位置 | string | — | BI.Direction.Top | |
||||
| el | 开启弹出层的元素 | object | — | { }| |
||||
| popup | 弹出层 | object | — |{ }| |
||||
| adapter | 弹出层的位置 | object | — | null| |
||||
| masker | masker层 | | — | { }| |
||||
| switcherClass | — | string| —| "bi-switcher-popup" | |
||||
| hoverClass | - | string | - | "bi-switcher-hover" | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue | 设置value值 | value | |
||||
| getValue | 获取被选中的值 |—| |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
| populate | 刷新列表 | items | |
||||
| isViewVisible | 弹窗层是否可见 | —| |
||||
| showView | 显示弹出层 | —| |
||||
| hideView | 隐藏弹出层|—| |
||||
| getView | 获取弹出层|—| |
||||
| getAllLeaves | 获取所有的叶子节点 | —| |
||||
| getNodeById | 根据id获取节点 | id | |
||||
| getNodeByValue | 根据value值获取节点 | value | |
||||
| isExpanded | 节点是否展开 |— | |
||||
| setAdapter | 设置弹出层显示的位置元素|adapter| |
||||
| adjustView| 调整弹出层显示的位置元素 |—| |
||||
|
||||
## 事件方法 |
||||
|
||||
| 事件名称| 说明| 回调参数 | |
||||
| :------ |:------------- | :----- |
||||
| EVENT_EXPAND | 面板展开 | —| |
||||
| EVENT_COLLAPSE | 面板收起 | —| |
||||
| EVENT_TRIGGER_CHANGE | 面板切换 | —| |
||||
| EVENT_AFTER_INIT | 初始化之后 | —| |
||||
| EVENT_BEFORE_POPUPVIEW | 面板显示之前| —| |
||||
| EVENT_AFTER_POPUPVIEW | 面板显示之后| —| |
||||
| EVENT_BEFORE_HIDEVIEW | 面板隐藏之前| —| |
||||
| EVENT_AFTER_HIDEVIEW | 面板隐藏之后 | —| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,85 @@
|
||||
# tab |
||||
# bi.switcher |
||||
|
||||
## 切换显示或隐藏面板,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/72gp1n0p/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.tab", |
||||
tab: { |
||||
type: "bi.button_group", |
||||
height: 30, |
||||
items: [{ |
||||
text: "Tab1", |
||||
value: 1, |
||||
width: 50 |
||||
}, { |
||||
text: "Tab2", |
||||
value: 2, |
||||
width: 50 |
||||
}] |
||||
}, |
||||
cardCreator: function(v) { |
||||
switch (v) { |
||||
case 1: |
||||
return BI.createWidget({ |
||||
type: "bi.label", |
||||
cls: "bi-card", |
||||
text: "面板1" |
||||
}) |
||||
case 2: |
||||
return BI.createWidget({ |
||||
type: "bi.label", |
||||
cls: "bi-card", |
||||
text: "面板2" |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| direction | 控件位置 | string | top,bottom,left,right,custom | "bottom"| |
||||
| single | 是否为单页 | boolean | true,false | false | |
||||
| defaultShowIndex | 是否默认显示tab页 | boolean | true,false | false | |
||||
| tab | tab标签页 | object | — | { } | |
||||
| defaultShowIndex ||boolean | true,false | false | |
||||
| logic | | object | | {dynamic:false} | |
||||
| cardCreator | 面板构造器| function | | function (v) {return BI.createWidget();} | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| render | 渲染组件 | — | |
||||
| mounted | 挂载组件 | —| |
||||
| removeTab | 移除tab面板页 | cardname | |
||||
| getTab | 获取tab面板页 | v | |
||||
| setSelect | 设置选中的index | v | |
||||
| getSelect | 获取选中的index| —| |
||||
| getSelectedTab | 获取选中的tab面板页 | —| |
||||
| populate | 刷新列表 | items | |
||||
| setValue | 设置value值 | value | |
||||
| getValue | 获取被选中的值 |—| |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,63 @@
|
||||
# float_box |
||||
# bi.float_box |
||||
|
||||
## floatBox弹出层,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/72gp1n0p/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
var id = BI.UUID(); |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.text_button", |
||||
text: "点击弹出FloatBox", |
||||
width: 200, |
||||
height: 80, |
||||
handler: function() { |
||||
BI.Popovers.remove(id); |
||||
BI.Popovers.create(id, new BI.BarPopoverSection()).open(id); |
||||
} |
||||
}) |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| width | 弹出层宽度 | number | — | 600 | |
||||
| height | 弹出层高度 | number | — | 500 | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| populate | 刷新列表 | sectionProvider | |
||||
| destroyed| 销毁组件|—| |
||||
| show | 显示 | —| |
||||
| hide | 隐藏 | —| |
||||
| open | 打开弹出层 | —| |
||||
| close| 关闭弹出层 | —| |
||||
| setZindex | 设置z-index| z-index | |
||||
|
||||
|
||||
## 事件方法 |
||||
|
||||
| 事件名称| 说明| 回调参数 | |
||||
| :------ |:------------- | :----- |
||||
| EVENT_FLOAT_BOX_CLOSED | 关闭弹出层 | —| |
||||
| EVENT_FLOAT_BOX_CLOSED | 打开弹出层 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,76 @@
|
||||
# popup |
||||
# bi.popup_view |
||||
|
||||
## 下拉框弹出层, zIndex在1000w,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/x95pg143/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.popup_view", |
||||
el: { |
||||
type: "bi.button_group", |
||||
items: [{ |
||||
text: "aaa", |
||||
value: "aaa" |
||||
}, { |
||||
text: "bbb", |
||||
value: "bbb" |
||||
}], |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
} |
||||
}) |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| maxWidth | 弹出层最大宽度 | number/string | — | "auto" | |
||||
| minWidth | 弹出层最小宽度 | number | — | 100 | |
||||
| maxHeight | 弹出层最大高度 | number/string | — | — | |
||||
| minHeight | 弹出层最小高度 | number | — | 25 | |
||||
| 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 | |
||||
| direction| 工具栏的方向| const | | BI.Direction.Top | |
||||
| stopEvent | 是否停止mousedown、mouseup事件 | boolean | true,false | false | |
||||
| stopPropagation | 是否停止mousedown、mouseup向上冒泡 | boolean | true,false | false | |
||||
| tabs | 导航栏 | array | — | [] | |
||||
| logic | | object | | {dynamic:true} | |
||||
| tools | 自定义工具栏 |boolean | true,false | false | |
||||
| buttons | toolbar栏 | array | — | [] | |
||||
| el | 子组件 | object | — |{ type: "bi.button_group",items: [], chooseType: 0,behaviors: {},layouts: [{type: "bi.vertical"}]} | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| populate | 刷新列表 | items | |
||||
| resetWidth | 重置宽度 | width | |
||||
| resetHeight | 重置高度 | height| |
||||
| setValue | 设置value 值 | value | |
||||
| getValue| 获取value值 | —| |
||||
| setZindex | 设置z-index| z-index | |
||||
| getView | 获取弹出层 | —| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,54 @@
|
||||
# searcher |
||||
# bi.searcher_view |
||||
|
||||
## 搜索面板, 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qkfns6wm/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
var searcher = BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.searcher_view", |
||||
}); |
||||
searcher.populate([{ |
||||
text: "aba", |
||||
value: "aba" |
||||
},{ |
||||
text: "acc", |
||||
value: "acc" |
||||
}], [{ |
||||
text: "a", |
||||
value: "a" |
||||
}], "a"); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| tipText | title文本 | string | — | BI.i18nText("BI-No_Select") | |
||||
| chooseType | 选择类型 | const | | BI.Selection.Single | |
||||
| matcher | 完全匹配的构造器 | object | — | {type: "bi.button_group",behaviors: { redmark: function () { return true;} },items: [], layouts: [{ type: "bi.vertical"}]} | |
||||
| searcher | | object| — | {type: "bi.button_group",behaviors: {redmark: function () {return true;}}, items: [], layouts: [{ type: "bi.vertical" }]}| |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| populate | 刷新列表 | searchResult, matchResult, keyword | |
||||
| setValue | 设置value 值 | value | |
||||
| getValue| 获取value值 | —| |
||||
| empty | 清空组件 | —| |
||||
| hasMatched | 是否有匹配的元素 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue