forked from fanruan/fineui
windy
7 years ago
492 changed files with 360362 additions and 7753 deletions
File diff suppressed because one or more lines are too long
@ -1,5 +0,0 @@
|
||||
# 通用规范 |
||||
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,20 +0,0 @@
|
||||
# FineUIdocs |
||||
FineUI文档 |
||||
|
||||
|
||||
## 文档地址 |
||||
|
||||
GithubPages: [https://fanruan.github.io/fineui](https://fanruan.github.io/fineui) |
||||
|
||||
CodingPages: [http://fanruan.coding.me/fineui](http://fanruan.coding.me/fineui) |
||||
|
||||
|
||||
## Demo |
||||
|
||||
CodingPages: [http://fanruan.coding.me/fineui/dist/index.html](http://fanruan.coding.me/fineui/dist/index.html) |
||||
|
||||
|
||||
## 代码设计文档 |
||||
|
||||
KMS: [http://www.finedevelop.com/display/DR/FineUI](http://www.finedevelop.com/display/DR/FineUI) |
||||
|
||||
@ -1,3 +0,0 @@
|
||||
## 开发教程 |
||||
|
||||
KMS: [http://www.finedevelop.com/pages/viewpage.action?pageId=15330077](http://www.finedevelop.com/pages/viewpage.action?pageId=15330077) |
||||
@ -1,176 +0,0 @@
|
||||
# Summary |
||||
|
||||
## 总览 |
||||
* [概览](README.md) |
||||
* [起步](START.md) |
||||
|
||||
## 通用规范 |
||||
* [通用规范](OVERVIEW.md) |
||||
|
||||
## 核心控件 |
||||
* 布局 |
||||
* [vertical](core/layout/vertical.md) |
||||
* [horizontal](core/layout/horizontal.md) |
||||
* [htape](core/layout/htape.md) |
||||
* [vtape](core/layout/vtape.md) |
||||
* [center_adapt](core/layout/center_adapt.md) |
||||
* [vertical_adapt](core/layout/vertical_adapt.md) |
||||
* [left_right_vertical_adapt](core/layout/left_right_vertical_adapt.md) |
||||
* [flow](core/layout/flow.md) |
||||
* [center](core/layout/center.md) |
||||
* [horizontal_adapt](core/layout/horizontal_adapt.md) |
||||
* [horizontal_auto](core/layout/horizontal_auto.md) |
||||
* [horizontal_float](core/layout/horizontal_float.md) |
||||
* [float_center](core/layout/float_center.md) |
||||
* [border](core/layout/border.md) |
||||
* [grid](core/layout/grid.md) |
||||
* [table](core/layout/table.md) |
||||
* [td](core/layout/td.md) |
||||
* 抽象控件 |
||||
* [button_group](core/abstract/button_group.md) |
||||
* [button_tree](core/abstract/button_tree.md) |
||||
* [virtual_group](core/abstract/virtual_group.md) |
||||
* [custom_tree](core/abstract/custom_tree.md) |
||||
* [grid_view](core/abstract/grid_view.md) |
||||
* [collection_view](core/abstract/collection_view.md) |
||||
* [virtual_list](core/abstract/virtual_list.md) |
||||
* 组合控件 |
||||
* [combo](core/combination/bi.combo.md) |
||||
* [expander](core/combination/bi.expander.md) |
||||
* [group_combo](core/combination/group_combo.md) |
||||
* [loader](core/combination/loader.md) |
||||
* [navigation](core/combination/navigation.md) |
||||
* [searcher](core/combination/searcher.md) |
||||
* [switcher](core/combination/switcher.md) |
||||
* [tab](core/combination/tab.md) |
||||
* 弹出层 |
||||
* [float_box](core/layer/layer_float_box.md) |
||||
* [popup](core/layer/layer_popup.md) |
||||
* [searcher](core/layer/layer_searcher.md) |
||||
* [widget](core/widget.md) |
||||
* [single](core/single.md) |
||||
* [basic_button](core/basic_button.md) |
||||
* [node_button](core/node_button.md) |
||||
* [pane](core/pane.md) |
||||
|
||||
## 基础控件 |
||||
* [label](base/label.md) |
||||
* [bubble](base/bubble.md) |
||||
* [toast](base/toast.md) |
||||
* [message](base/message.md) |
||||
* 按钮 |
||||
* [button](base/button/button.md) |
||||
* [text_button](base/button/text_button.md) |
||||
* [icon_button](base/button/icon_button.md) |
||||
* [image_button](base/button/image_button.md) |
||||
* 编辑框 |
||||
* [editor](base/editor/editor.md) |
||||
* [code_editor](base/editor/code_editor.md) |
||||
* [multifile_editor](base/editor/multifile_editor.md) |
||||
* [textarea_editor](base/editor/textarea_editor.md) |
||||
* [formula_editor](base/editor/formula_editor.md) |
||||
* 表格 |
||||
* [table_view](base/table/table_view.md) |
||||
* [grid_table](base/table/grid_table.md) |
||||
* [collection_table](base/table/collection_table.md) |
||||
* [resizable_table](base/table/resizable_table.md) |
||||
* [pager](base/pager.md) |
||||
* [svg](base/svg.md) |
||||
* [canvas](base/canvas.md) |
||||
|
||||
## 实例控件 |
||||
* 按钮 |
||||
* [multi_select_item](case/button/multi_select_item.md) |
||||
* [single_select_item](case/button/single_select_item.md) |
||||
* [single_select_radio_item](case/button/single_select_radio_item.md) |
||||
* 编辑框 |
||||
* [shelter_editor](case/editor/shelter_editor.md) |
||||
* [sign_editor](case/editor/sign_editor.md) |
||||
* [sign_initial_editor](case/editor/sign_initial_editor.md) |
||||
* [state_editor](case/editor/state_editor.md) |
||||
* 弹出层 |
||||
* [multi_popup_layer](case/layer/multi_popup_layer.md) |
||||
* [layer_panel](case/layer/layer_panel.md) |
||||
* [pane_list](case/layer/pane_list.md) |
||||
* [panel](case/layer/panel.md) |
||||
* 列表 |
||||
* [select_list](case/list/list.select.md) |
||||
* [lazy_loader](case/loader/lazy_loader.md) |
||||
* [list_loader](case/loader/list_loader.md) |
||||
* [sort_list](case/loader/sort_list.md) |
||||
* 触发器 |
||||
* [editor_trigger](case/trigger/editor_trigger.md) |
||||
* [icon_trigger](case/trigger/icon_trigger.md) |
||||
* [text_trigger](case/trigger/text_trigger.md) |
||||
* 下拉框 |
||||
* [bubble_combo](case/combo/bubble_combo.md) |
||||
* [icon_combo](case/combo/icon_combo.md) |
||||
* [static_combo](case/combo/static_combo.md) |
||||
* [text_value_combo](case/combo/text_value_combo.md) |
||||
* [text_value_downlist_combo](case/combo/text_value_downlist_combo.md) |
||||
* 树 |
||||
* [branch_tree](case/tree/branch_tree.md) |
||||
* [handstand_branch_tree](case/tree/handstand_branch_tree.md) |
||||
* [display_tree](case/tree/display_tree.md) |
||||
* [simple_tree](case/tree/simple_tree.md) |
||||
* [level_tree](case/tree/level_tree.md) |
||||
* [branch_relation](case/tree/branch_relation.md) |
||||
* 表格 |
||||
* [adaptive_table](case/table/adaptive_table.md) |
||||
* [tree_table](case/table/tree_table.md) |
||||
* [layer_tree_table](case/table/layer_tree_table.md) |
||||
* Pager |
||||
* [all_count_pager](case/pager/all_count_pager.md) |
||||
* [direction_pager](case/pager/direction_pager.md) |
||||
* [calendar](case/calendar.md) |
||||
* [clipboard](case/clipboard.md) |
||||
* [complex_canvas](case/complex_canvas.md) |
||||
* [color_chooser](case/color_chooser.md) |
||||
* [color_chooser_popup](case/color_chooser_popup.md) |
||||
* [segment](case/segment.md) |
||||
|
||||
## 详细控件 |
||||
* 各种小组件 |
||||
* [通用按钮](detailed/bi.button/general.md) |
||||
* [提示性信息](detailed/bi.button/tooltip.md) |
||||
* [各种items](detailed/bi.button/items.md) |
||||
* [各种节点nodes](detailed/bi.button/node.md) |
||||
* [各种segment](detailed/bi.button/segment.md) |
||||
* 树形结构 |
||||
* [multi_tree_combo](detailed/tree/bi.multi_tree_combo.md) |
||||
* [switch_tree](detailed/tree/bi.switch_tree.md) |
||||
* 表格 |
||||
* [preview_table](detailed/table/bi.preview_table.md) |
||||
* [responsive_table](detailed/table/bi.responsive_table.md) |
||||
* [excel_table](detailed/table/bi.excel_table.md) |
||||
* [page_table](detailed/table/bi.page_table.md) |
||||
* 文本框控件 |
||||
* [bi.text_editor](detailed/text_input/bi.text_editor.md) |
||||
* [bi.search_editor](detailed/text_input/bi.search_editor.md) |
||||
* [bi.clear_editor](detailed/text_input/bi.clear_editor.md) |
||||
* [finetuning_number_editor](detailed/text_input/finetuning_number_editor.md) |
||||
* [year_combo](detailed/year_combo.md) |
||||
* [month_combo](detailed/month_combo.md) |
||||
* [quarter_combo](detailed/quarter_combo.md) |
||||
* [down_list_combo](detailed/down_list_combo.md) |
||||
* [numeric_interval](detailed/numeric_interval.md) |
||||
* [multi_select_combo](detailed/multi_select_combo.md) |
||||
* 简单日期控件 |
||||
* [date_combo](detailed/date/date_combo.md) |
||||
* [date_pane_widget](detailed/date/date_pane_widget.md) |
||||
* [year_month_combo](detailed/date/year_month_combo.md) |
||||
* [year_quarter_combo](detailed/date/year_quarter_combo.md) |
||||
* [custom_date_time](detailed/date/custom_date_time.md) |
||||
* 简单下拉树 |
||||
* [single_tree_combo](detailed/combo/single_tree_combo.md) |
||||
* [multilayer_single_tree_combo](detailed/combo/multilayer_single_tree_combo.md) |
||||
* [select_tree_combo](detailed/combo/select_tree_combo.md) |
||||
* [multilayer_select_tree_combo](detailed/combo/multilayer_select_tree_combo.md) |
||||
* 路径选择 |
||||
* [path_chooser](detailed/path/path_chooser.md) |
||||
* [direction_path_chooser](detailed/path/direction_path_chooser.md) |
||||
* [relation_view](detailed/relation_view.md) |
||||
* [dialog](detailed/dialog.md) |
||||
* [file_manager](detailed/file_manager.md) |
||||
* [slider](detailed/slider.md) |
||||
|
||||
@ -1,40 +0,0 @@
|
||||
# bi.bubble |
||||
|
||||
#### 气泡提示 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/4u705v2v/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.bubble', |
||||
element: "#wrapper", |
||||
height: 30, |
||||
text: "测试" |
||||
}) |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :---- |:---- |
||||
| direction | 气泡显示位置 | string | — | "top" | |
||||
| height | 气泡高度 | number | — | 35 | |
||||
| text | 气泡显示内容 | string | — | " " | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setText | 设置文本值 | 需要设置的文本值text| |
||||
|
||||
|
||||
--- |
||||
@ -1,70 +0,0 @@
|
||||
# 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 | |
||||
| minWidth | 最小宽度，如果block/clear中某一项为true，此项值为0，否则为90 | number | — | 90 | |
||||
| shadow | 是否显示阴影 | boolean| true,false | props.clear !== true | |
||||
| 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,39 +0,0 @@
|
||||
# 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,49 +0,0 @@
|
||||
# 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,58 +0,0 @@
|
||||
# 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,40 +0,0 @@
|
||||
# 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,53 +0,0 @@
|
||||
# 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,89 +0,0 @@
|
||||
# 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 | — | — | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | false | |
||||
| watermark | 文本框placeholder | string | — | " " | |
||||
| errorText | 错误提示 | string/function | —| " "| |
||||
| tipType| 提示类型 | string |success,warning | "warning"| |
||||
| inputType| 输入框类型| string| 参考input输入框类型 | "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,59 +0,0 @@
|
||||
# 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 | 字段集合 | onject | —| {}| |
||||
| showHint | 是否显示提示信息 | boolean | true,false | true | |
||||
| 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,51 +0,0 @@
|
||||
# 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,45 +0,0 @@
|
||||
# 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,67 +0,0 @@
|
||||
# bi.label |
||||
|
||||
#### 文本标签 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/47f5ps1j/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.label", |
||||
textWidth: 100, |
||||
textHeight: 30, |
||||
text: "基本标签" |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | —| 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | —| 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | —| 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
| textWidth | 文本标签宽度 | number| — | null | |
||||
| textHeight | 文本标签宽度 | number| — | null | |
||||
| text | 文本内容 | string | — | " " | |
||||
|
||||
|
||||
##### 高级属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| textAlign | 文本对齐方式 | string | left,center,right | center | |
||||
| whiteSpace | 元素内空白处理方式 | string| normal,nowrap | nowrap| |
||||
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | true | |
||||
| py | 拼音 | string | — | 空 | |
||||
| keyword | 设置标红的关键词 | string | —| 空 | |
||||
| disabled | 灰化 | boolean| true,false | 无 | |
||||
| title | 提示title | string | — | 空 | |
||||
| warningTitle | 错误提示title | string | — | 空 | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setText| 设置文本值 | 需要设置的文本值text| |
||||
| getText| 获取文本值 | —| |
||||
| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | |
||||
| setValue | 设置文本值 | 需要设置的文本值text | |
||||
| populate| 清空label | —| |
||||
|
||||
|
||||
--- |
||||
@ -1,39 +0,0 @@
|
||||
# bi.Msg |
||||
|
||||
#### 消息提示 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/feu8kf4u/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.button", |
||||
element: "#wrapper", |
||||
text : '点击我弹出一个消息框', |
||||
height : 30, |
||||
handler : function() { |
||||
BI.Msg.confirm('测试消息框',"我是测试消息框的内容"); |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| alert | 警告消息框 | title, message, callback| |
||||
| confirm | 确认消息框 | title, message, callback | |
||||
| prompt | 提示消息框 | title, message, value, callback, min_width | |
||||
| toast | toast提示 | message, level, context| |
||||
|
||||
|
||||
--- |
||||
@ -1,68 +0,0 @@
|
||||
# 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 | 自定义列表中item项的行为，如高亮，标红等 | 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,55 +0,0 @@
|
||||
# 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,74 +0,0 @@
|
||||
# bi.collection_table |
||||
|
||||
### 基本的表格 继承BI.Widget |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/x2zxfzhp/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
BI.createWidget({ |
||||
type: "bi.collection_table", |
||||
element: "body", |
||||
columnSize: [200,200], |
||||
items: [ |
||||
[{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "第一行第一列" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "第一行第二列" |
||||
}], |
||||
[{ |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "第二行第一列" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg4", |
||||
text: "第二行第二列" |
||||
}] |
||||
] |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ---------------- | ------------- | -------------------- | ----------------- | |
||||
| isNeedFreeze | 是否冻结列 | boolean | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedMerge | 是否需要合并单元格 | boolean | false | |
||||
| mergeCols | 合并的单元格列号 | array | [] | |
||||
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||
| columnSize | 单元格宽度集合 | array | [] | |
||||
| headerRowSize | 表头高度 | number | 25 | |
||||
| rowSize | 普通单元格高度 | number | 25 | |
||||
| regionColumnSize | 列项间的 | array | [] | |
||||
| items | 子组件 | array | [] | |
||||
|
||||
## 方法 |
||||
| 方法名 | 说明 | 参数 | |
||||
| ------------------------- | ----------- | ---------- | |
||||
| setWidth | 设置宽度 | width | |
||||
| setHeight | 设置高度 | height | |
||||
| setColumnSize | 设置列宽 | columnSize | |
||||
| getColumnSize | 得到列宽 | — | |
||||
| setRegionColumnSize | 设置列项之间的间隙 | columnSize | |
||||
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||
| getScrollRegionColumnSize | 获取横向滚动条宽度 | — | |
||||
| setVerticalScroll | 设置纵向滚动距离 | scrollTop | |
||||
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft | |
||||
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft | |
||||
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||
| getColumns | 获取列项 | — | |
||||
| populate | 增加行 | rows | |
||||
| restore | 存储数据 | — | |
||||
|
||||
------ |
||||
|
||||
@ -1,59 +0,0 @@
|
||||
# bi.grid_table |
||||
|
||||
### 列表展示的table，继承BI.Widget |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/a936vcvj/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
BI.createWidget({ |
||||
type: "bi.grid_table", |
||||
element: 'body', |
||||
width: 600, |
||||
height: 500, |
||||
isResizeAdapt: true, |
||||
isNeedResize: true, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
columnSize: [50,50,200,250,400], |
||||
items: items, |
||||
header: header |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ---------------- | ------- | ------- | ----- | |
||||
| isNeedFreeze | 是否需要冻结 | boolean | false | |
||||
| freezeCols | 冻结列 | array | [] | |
||||
| columnSize | 单元格宽度集合 | array | [] | |
||||
| headerRowSize | 表头高度 | number | 25 | |
||||
| rowSize | 普通单元格高度 | number | 25 | |
||||
| regionColumnSize | 列项间的 | array | [] | |
||||
| header | 表头 | array | [] | |
||||
| items | 子组件 | array | [] | |
||||
|
||||
## 方法 |
||||
| 方法名 | 说明 | 参数 | |
||||
| ------------------------ | ----------- | ---------- | |
||||
| setWidth | 设置宽度 | width | |
||||
| setHeight | 设置高度 | height | |
||||
| getRegionSize | 获取间隙大小 | — | |
||||
| setColumnSize | 设置列宽 | columnSize | |
||||
| getColumnSize | 得到列宽 | — | |
||||
| setRegionColumnSize | 设置列项之间的间隙 | columnSize | |
||||
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||
| setVerticalScroll | 设置纵向滚动距离 | scrollTop | |
||||
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft | |
||||
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft | |
||||
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||
| populate | 刷新内容 | rows | |
||||
| restore | 储存 | — | |
||||
|
||||
------ |
||||
|
||||
@ -1,77 +0,0 @@
|
||||
# bi.resizable_table |
||||
|
||||
### 可调整列宽的grid表格，继承BI.Widget |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/0e7p2ezc/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
BI.createWidget({ |
||||
type: "bi.resizable_table", |
||||
element: "body", |
||||
columnSize: [200,200], |
||||
items: [ |
||||
[{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "第一行第一列" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "第一行第二列" |
||||
}], |
||||
[{ |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "第二行第一列" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg4", |
||||
text: "第二行第二列" |
||||
}] |
||||
] |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ---------------- | --------- | ------- | ----- | |
||||
| isNeedFreeze | 是否需要冻结列 | boolean | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedResize | 是否需要调整大小 | boolean | false | |
||||
| isResizeAdapt | 是否调整时自适应 | boolean | true | |
||||
| isNeedMerge | 是否需要合并单元格 | boolean | false | |
||||
| mergeCols | 合并的单元格列号 | array | [] | |
||||
| columnSize | 单元格宽度集合 | array | [] | |
||||
| minColumnSize | 最小列宽 | array | [] | |
||||
| maxColumnSize | 最大列宽 | array | [] | |
||||
| headerRowSize | 表头高度 | number | 25 | |
||||
| rowSize | 普通单元格高度 | number | 25 | |
||||
| header | 表头 | array | [] | |
||||
| regionColumnSize | 列项间的 | array | [] | |
||||
| items | 子组件 | array | [] | |
||||
|
||||
## 方法 |
||||
| 方法名 | 说明 | 参数 | |
||||
| ------------------------ | ----------- | ------------- | |
||||
| setWidth | 设置宽度 | — | |
||||
| setHeight | 设置高度 | — | |
||||
| setColumnSize | 设置列宽 | columnSize | |
||||
| getColumnSize | 得到列宽 | — | |
||||
| setRegionColumnSize | 设置列项之间的间隙 | columnSize | |
||||
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||
| setVerticalScroll | 设置纵向滚动距离 | scrollTop | |
||||
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft | |
||||
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft | |
||||
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||
| attr | 设置属性 | key：键，value：值 | |
||||
| populate | 刷新内容 | rows | |
||||
| restore | 保存表 | — | |
||||
|
||||
------ |
||||
|
||||
@ -1,73 +0,0 @@
|
||||
# bi.table_view |
||||
|
||||
### 能处理静态宽度以及动态宽度的表 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/mbazb80a/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
BI.createWidget({ |
||||
type: "bi.table_view", |
||||
element: 'body', |
||||
isNeedMerge: true, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
mergeCols: [0, 1], |
||||
columnSize: [100, 200, 300, 400, 500], |
||||
items: [], |
||||
header: [] |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ---------------- | ------------- | -------------------- | ----------------- | |
||||
| isNeedMerge | 是否需要合并单元格 | boolean | false | |
||||
| mergeCols | 合并的单元格列号 | array | [] | |
||||
| mergeRule | 合并规则, 默认相等时合并 | function(row1, row2) | 默认row1 = row2 时合并 | |
||||
| columnSize | 单元格宽度集合 | array | [] | |
||||
| headerRowSize | 表头高度 | number | 25 | |
||||
| footerRowSize | 表尾高度 | number | 25 | |
||||
| rowSize | 普通单元格高度 | number | 25 | |
||||
| regionColumnSize | 列项间的 | array | false | |
||||
| header | 表头 | array | [] | |
||||
| footer | 表尾 | array | false | |
||||
| items | 子组件 | array | [] | |
||||
|
||||
## 方法 |
||||
| 方法名 | 说明 | 参数 | |
||||
| ---------------------------- | ---------------- | ---------- | |
||||
| resize | 调整表格 | — | |
||||
| setColumnSize | 设置列宽 | columnSize | |
||||
| getColumnSize | 得到列宽 | — | |
||||
| getCalculateColumnSize | 获得计算后的列宽 | — | |
||||
| setHeaderColumnSize | 设置表头的列宽 | columnSize | |
||||
| setRegionColumnSize | 设置列项之间的间隙 | columnSize | |
||||
| getRegionColumnSize | 获得列项之间的间隙 | — | |
||||
| getCalculateRegionColumnSize | 获取计算后的列项之间的间隙 | — | |
||||
| getCalculateRegionRowSize | 获取计算后的列项上下之间的间隙 | — | |
||||
| getClientRegionColumnSize | 获取浏览器中显示的列项之间的间隙 | — | |
||||
| getScrollRegionColumnSize | 获取横向滚动条宽度 | — | |
||||
| getScrollRegionRowSize | 获取纵向滚动条宽度 | — | |
||||
| hasVerticalScroll | 是否含有数值滚动条 | — | |
||||
| setVerticalScroll | 设置纵向滚动距离 | scrollTop | |
||||
| setLeftHorizontalScroll | 设置左到右横向滚动距离 | scrollLeft | |
||||
| setRightHorizontalScroll | 设置右往左横向滚动距离 | scrollLeft | |
||||
| getVerticalScroll | 获取纵向滚动距离 | — | |
||||
| getLeftHorizontalScroll | 获取左到右横向滚动距离 | — | |
||||
| getRightHorizontalScroll | 获取右往左横向滚动距离 | — | |
||||
| getColumns | 获取列项 | — | |
||||
| populate | 刷新内容 | rows | |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------------------------------ | :------------------ | |
||||
| BI.Table.EVENT_TABLE_AFTER_INIT | table初始化完成后触发 | |
||||
| BI.Table.EVENT_TABLE_RESIZE | table大小调整时触发（窗口变化等） | |
||||
| BI.Table.EVENT_TABLE_SCROLL | 滚动事件 | |
||||
|
||||
--- |
||||
|
||||
@ -1,42 +0,0 @@
|
||||
# bi.toast |
||||
|
||||
#### toast提示 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/wop751sg/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.toast', |
||||
element: "#wrapper", |
||||
height: 30, |
||||
level: "warning", |
||||
text: "toast测试" |
||||
}) |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :---- |:---- |
||||
| level | 提示类型 | string | success,warning | "success" | |
||||
| height | 高度 | number | — | 30 | |
||||
| text | 显示内容 | string | — | " " | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setText | 设置文本值 | 需要设置的文本值text | |
||||
| setHeight | 设置高度 | 需要设置的高度值height | |
||||
|
||||
--- |
||||
@ -1,53 +0,0 @@
|
||||
# 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,54 +0,0 @@
|
||||
# bi.single_select_item |
||||
|
||||
## 可以点击的label,基类[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,55 +0,0 @@
|
||||
# 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,47 +0,0 @@
|
||||
# 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 | 获得日期 | — | |
||||
|
||||
------ |
||||
@ -1,33 +0,0 @@
|
||||
# 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,32 +0,0 @@
|
||||
# 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,45 +0,0 @@
|
||||
# bi.color_chooser_popup |
||||
|
||||
### 选色控件弹窗 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/xL7moydu/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.color_chooser_popup", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------ | ---- | ------ | ---- | |
||||
| height | 高度 | number | 145 | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| -------------- | -------- | ------ | |
||||
| setStoreColors | 设置储存的颜色值 | colors | |
||||
| setValue | 设置颜色值 | color | |
||||
| getValue | 获取颜色值 | — | |
||||
|
||||
|
||||
|
||||
### 事件 |
||||
|
||||
| 事件 | 说明 | |
||||
| ------------------ | -------- | |
||||
| EVENT_VALUE_CHANGE | 颜色值改变时触发 | |
||||
|
||||
------ |
||||
@ -1,86 +0,0 @@
|
||||
# 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 | 组件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,68 +0,0 @@
|
||||
# bi.icon_combo |
||||
|
||||
## 切换trigger图标的combo 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/z02vzvtb/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.icon_combo", |
||||
element: "#wrapper", |
||||
iconClass: "rename-font", |
||||
items: [{ |
||||
value: "第一项", |
||||
iconClass: "delete-font" |
||||
}, { |
||||
value: "第二项", |
||||
iconClass: "rename-font" |
||||
}, { |
||||
value: "第三项", |
||||
iconClass: "move-font" |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| width | 宽度 | number | — | 24 |
||||
| height | 高度 | number | — | 24 |
||||
| iconClass | icon的类名 | string | —|" "| |
||||
| el | 自定义下拉框trigger| object | —|{ } | |
||||
| popup | 弹出层| object | —| { } |
||||
| minWidth| 最小宽度| number | —|100| |
||||
| maxWidth | 最大宽度 | string/number | — | "auto"| |
||||
| maxHeight | 最大高度 | number | —| 300 |
||||
| adjustLength | 弹出列表和trigger的距离 | number | — | 0 | |
||||
| adjustXOffset | 调整横向偏移 | number | — | 0 | |
||||
| adjustYOffset |调整纵向偏移 | number | — | 0 | |
||||
| offsetStyle | 弹出层显示位置 | string | left,right,center | "left,right,center"| |
||||
| chooseType | 选择类型 | const | 参考button_group | BI.ButtonGroup.CHOOSE_TYPE_SINGLE | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
| showView | 显示弹出层 | —| |
||||
| hideView | 隐藏弹出层 |—| |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
# bi.static_combo |
||||
|
||||
## 单选combo,trigger显示项不会改变 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/kn64gfzn/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.static_combo", |
||||
element: "#wrapper", |
||||
text: "Value 不变", |
||||
items: [{ |
||||
text: "1", |
||||
value: 1 |
||||
}, { |
||||
text: "2", |
||||
value: 2 |
||||
}, { |
||||
text: "3", |
||||
value: 3 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 24 |
||||
| el | 自定义下拉框trigger| object | —|{ } | |
||||
| items | 子组件 | array | — | [ ] |
||||
| text | 文本内容 | string | — | " " | |
||||
| chooseType | 选择类型 | const |参考button_group | BI.ButtonGroup.CHOOSE_TYPE_SINGLE | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
# bi.text_value_combo |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/hcf0kd9m/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.text_value_combo", |
||||
element: "#wrapper", |
||||
text: "value_combo", |
||||
width: 300, |
||||
items: [{ |
||||
text: "1", |
||||
value: 1 |
||||
}, { |
||||
text: "2", |
||||
value: 2 |
||||
}, { |
||||
text: "3", |
||||
value: 3 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 30 |
||||
| el | 自定义下拉框trigger| object |—|{ } | |
||||
| text | 文本内容 | string | — | " " | |
||||
| chooseType | 选择类型 | const |参考button_group | BI.ButtonGroup.CHOOSE_TYPE_SINGLE | |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
# bi.text_value_down_list_combo |
||||
|
||||
## 有二级下拉菜单的combo 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/xtxmfgx1/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.text_value_down_list_combo", |
||||
element: "#wrapper", |
||||
text: "text", |
||||
items: [ |
||||
[{ |
||||
el: { |
||||
text: "1", |
||||
value: 1 |
||||
}, |
||||
children: [{ |
||||
text: "11", |
||||
value: 11 |
||||
}] |
||||
}], |
||||
[{ |
||||
text: "2", |
||||
value: 2 |
||||
}, { |
||||
text: "3", |
||||
value: 3 |
||||
}] |
||||
] |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 30 |
||||
| text | 文本内容 | string | — | " " | |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
| populate | 刷新列表 | items | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
# 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,93 +0,0 @@
|
||||
# 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", |
||||
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| 对齐方式 | string |left,center,right |"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,91 +0,0 @@
|
||||
# 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,92 +0,0 @@
|
||||
# bi.sign_initial_editor |
||||
|
||||
## 指定初始值 之后初始值会一直显示的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,89 +0,0 @@
|
||||
# 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,69 +0,0 @@
|
||||
# bi.popup_panel |
||||
|
||||
## 可以理解为MultiPopupView和Panel两个面板的结合体，基类[BI.MultiPopupView](case/layer/multi_popup_layer.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/zhnqvera/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.popup_panel", |
||||
title: "测试", |
||||
width: 300 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| title | 标题 | string | — | " " |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| 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 | 是否有下一页 | — |
||||
|
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.PopupPanel.EVENT_CHANGE | panel的value发生改变触发 | |
||||
| BI.PopupPanel.EVENT_CLOSE | panel的关闭事件 |
||||
| BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON | 点击工具栏事件 |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
# bi.multi_popup_view |
||||
|
||||
## 下拉框弹出层的多选版本，toolbar带有若干按钮, zIndex在1000w，基类[BI.MultiPopupView](case/layer/multi_popup_layer.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/8of9a7cy/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.multi_popup_view", |
||||
width: 300 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| buttons | 按钮组 |array | — | BI.i18nText("BI-Basic_Sure") |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
# bi.list_pane |
||||
|
||||
## list面板，基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/7Lv8q9p9/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.list_pane', |
||||
element: "#wrapper", |
||||
cls: "bi-border", |
||||
items: [] |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% 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,54 +0,0 @@
|
||||
# bi.panel |
||||
|
||||
## 带有标题栏的panel，基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/3m1q3857/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.panel", |
||||
title: "标题", |
||||
titleButtons: [{ |
||||
type: "bi.button", |
||||
text: "+" |
||||
}], |
||||
el: this.button_group, |
||||
logic: { |
||||
dynamic: true |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| title | 标题 | string | — | " " |
||||
| titleButton | 标题后的按钮组 | array | —| [ ] |
||||
| el | 开启panel的元素 | object | —|{ }| |
||||
| logic | 布局逻辑 | object |— | { dynamic:false} |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setTitle |设置标题| title |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
# 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,43 +0,0 @@
|
||||
# bi.lazy_loader |
||||
|
||||
### 懒加载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,54 +0,0 @@
|
||||
# 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,54 +0,0 @@
|
||||
# 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,48 +0,0 @@
|
||||
# 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,65 +0,0 @@
|
||||
# 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/boolean | 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,58 +0,0 @@
|
||||
# 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,69 +0,0 @@
|
||||
# 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 | 是否可改变列大小 | boolean | true | |
||||
| isNeedFreeze | 是否需要冻结表头 | boolean | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedMerge | 是否需要合并单元格 | boolean | 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,72 +0,0 @@
|
||||
# bi.layer_tree_table |
||||
|
||||
### 层级树状结构的表格 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/pqyuLoay/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
var table = BI.createWidget({ |
||||
type: "bi.layer_tree_table", |
||||
width: 600, |
||||
height: 400, |
||||
columnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
minColumnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
header: header, |
||||
items: items, |
||||
crossHeader: crossHeader, |
||||
crossItems: crossItems, |
||||
element: 'body', |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----------------------- | ------------------------ | -------------------- | ----------------- | |
||||
| isNeedResize | 是否需要调整列宽 | boolean | false | |
||||
| isResizeAdapt | 是否需要在调整列宽或区域宽度的时候它们自适应变化 | boolean | true | |
||||
| isNeedFreeze | 是否需要冻结表头 | boolean | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedMerge | 是否需要合并单元格 | boolean | 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,73 +0,0 @@
|
||||
# bi.tree_table |
||||
|
||||
### 树状结构的表格 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/a0m21ozk/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
var table = BI.createWidget({ |
||||
type: "bi.tree_table", |
||||
width: 600, |
||||
height: 400, |
||||
columnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
minColumnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
header: header, |
||||
items: items, |
||||
crossHeader: crossHeader, |
||||
crossItems: crossItems, |
||||
element: 'body', |
||||
}); |
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 参数设置 |
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----------------------- | ------------------------ | -------------------- | ----------------- | |
||||
| isNeedResize | 是否需要调整列宽 | boolean | false | |
||||
| isResizeAdapt | 是否需要在调整列宽或区域宽度的时候它们自适应变化 | boolean | true | |
||||
| isNeedFreeze | 是否需要冻结表头 | boolean | false | |
||||
| freezeCols | 冻结的列 | array | [] | |
||||
| isNeedMerge | 是否需要合并单元格 | boolean | 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,41 +0,0 @@
|
||||
# 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,44 +0,0 @@
|
||||
# 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,33 +0,0 @@
|
||||
# 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,46 +0,0 @@
|
||||
# bi.handstand_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,43 +0,0 @@
|
||||
# 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,40 +0,0 @@
|
||||
# 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,44 +0,0 @@
|
||||
# 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 | 是否允许为空 | boolean | false | |
||||
| watermark | 水印 | string | "" | |
||||
| errorText | 错误信息 | string | "" | |
||||
| triggerWidth | 触发器宽度 | number | 30 | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| -------- | ---- | ----- | |
||||
| setValue | 设置值 | value | |
||||
| getVlaue | 获得值 | — | |
||||
| setText | | text | |
||||
|
||||
------ |
||||
|
||||
@ -1,21 +0,0 @@
|
||||
# bi.icon_trigger |
||||
|
||||
### 图标按钮trigger |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qs44h1xy/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.icon_trigger", |
||||
element: "body", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
------ |
||||
|
||||
@ -1,28 +0,0 @@
|
||||
# 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,68 +0,0 @@
|
||||
# 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 |
||||
##### 基础属性 |
||||
###### chooseType可选值为 CHOOSE_TYPE_SINGLE,CHOOSE_TYPE_MULTI,CHOOSE_TYPE_ALL,CHOOSE_TYPE_NONE,CHOOSE_TYPE_DEFAULT |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| behaviors | 自定义列表中item项的行为，如高亮，标红等 |object | — |{ }| |
||||
| items | 子组件数组 | array | — | [ ] | |
||||
| chooseType | 选择类型 | const | 见上| BI.ButtonGroup.CHOOSE_TYPE_SINGLE | |
||||
| layouts | 布局 | array | — | [{type: "bi.center",hgap: 0,vgap: 0}] | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doBehavior | 自定义列表中item项的行为，如高亮，标红等 | — | |
||||
| 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,50 +0,0 @@
|
||||
# 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,71 +0,0 @@
|
||||
# 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.CollectionView.EVENT_SCROLL| 滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} | |
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
# 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| 子组件构造器 | object | — | { } | |
||||
| expander | popup组件 | object | — | {el: {},popup: {type: "bi.custom_tree"}}| |
||||
| el | 开启popup元素 | 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,78 +0,0 @@
|
||||
# bi.grid_view |
||||
|
||||
## 可以合并单元格，指定行列可以删除看不见的元素,基类[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.GridView.EVENT_SCROLL| 滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
# bi.virtual_group |
||||
|
||||
## 优化过的buttonGroup,删除看不见的元素 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/9pd0dct0/) |
||||
|
||||
{% 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,52 +0,0 @@
|
||||
# bi.virtual_list |
||||
|
||||
## 看不见的元素全部删除的list,基类[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,46 +0,0 @@
|
||||
# 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,88 +0,0 @@
|
||||
# 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 |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| el | 自定义下拉框trigger | object | — |{ }| |
||||
| trigger | 下拉列表的弹出方式 | string | click,hover | "click" | |
||||
| adjustLength | 弹出列表和trigger的距离 | number | — | 0 | |
||||
| toggle | 切换状态 | boolean | true,false | true | |
||||
| direction | 弹出列表和trigger的位置关系 | 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 | |
||||
| adjustXOffset | 调整横向偏移 | number | — | 0 | |
||||
| adjustYOffset |调整纵向偏移 | number | — | 0 | |
||||
| hideChecker | 是否隐藏弹出层检测 | function | — | —| |
||||
| offsetStyle | 弹出层显示位置 | string | left,right,center | "left,right,center"| |
||||
| popup | 弹出层 | object | — | { }| |
||||
| comboClass | combo类 | string | — | "bi-combo-popup" | |
||||
| hoverClass | hover类 | 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,88 +0,0 @@
|
||||
# bi.expander |
||||
|
||||
## 某个可以展开的节点,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/2xavqk4k/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.expander", |
||||
element: "#wrapper", |
||||
el: { |
||||
type: "bi.icon_text_node", |
||||
cls: "pull-right-ha-font", |
||||
height: 25, |
||||
text: "Expander" |
||||
}, |
||||
popup: { |
||||
items: [{ |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
text: "项目1", |
||||
value: 1 |
||||
}, { |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
text: "项目2", |
||||
value: 2 |
||||
}] |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| el | 自定义下拉框trigger | object | — |{ }| |
||||
| trigger | 下拉列表的弹出方式 | string | click,hover | "click" | |
||||
| adjustLength | 弹出列表和trigger的距离 | number | — | 0 | |
||||
| toggle | 切换状态 | boolean | true,false | true | |
||||
| direction | 弹出列表和trigger的位置关系 | string | top | bottom | left | right | top,left | top,right | bottom,left | bottom,right | "bottom"| |
||||
| isDefaultInit | 是否默认初始化子节点 |boolean | true,false | false | |
||||
| popup | 弹出层 | object | — | { }| |
||||
| expanderClass | 展开类 | string | —| "bi-expander-popup" | |
||||
| hoverClass | hover类| 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,64 +0,0 @@
|
||||
# bi.combo_group |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/x32ue8xv/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.combo_group", |
||||
el: { |
||||
type: "bi.icon_text_icon_item", |
||||
text: "2010年", |
||||
value: 2010, |
||||
height: 25, |
||||
iconCls: "close-ha-font" |
||||
}, |
||||
children: [{ |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
text: "一月", |
||||
value: 11 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| childern | 子组件 | array | — | [ ] | |
||||
| 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 | |
||||
| el | 自定义下拉框trigger | object | — |{type: "bi.text_button", text: "", value: ""}| |
||||
| trigger | 下拉列表的弹出方式 | string | click,hover | "click" | |
||||
| adjustLength | 弹出列表和trigger的距离 | number | — | 0 | |
||||
| direction | 弹出列表和trigger的位置关系 | string | top | bottom | left | right | top,left | top,right | bottom,left | bottom,right | "bottom"| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| populate | 刷新列表 | items | |
||||
| setValue | 设置combo value值| v | |
||||
| getValue | 获取combo value值 | — | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
# bi.loader |
||||
|
||||
## 加载控件,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qgLtctnx/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.loader", |
||||
itemsCreator: function(options, populate) { |
||||
populate(BI.map(BI.map(BI.makeArray(3, null), function(idx, value){ |
||||
return { |
||||
text: faker.name.findName(), |
||||
value: BI.UUID() |
||||
}; |
||||
}), function(i, v) { |
||||
return BI.extend(v, { |
||||
type: "bi.single_select_item", |
||||
height: 25 |
||||
}) |
||||
})) |
||||
}, |
||||
hasNext: function(option) { |
||||
return option.count < 10; |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## 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,78 +0,0 @@
|
||||
# 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 | |
||||
| 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,102 +0,0 @@
|
||||
# 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,83 +0,0 @@
|
||||
# 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,hover | "click" | |
||||
| toggle | 切换状态 | boolean | true,false | true | |
||||
| direction | 面板显示的位置 | string | — | BI.Direction.Top | |
||||
| el | 自定义下拉框trigger | object | — | { }| |
||||
| popup | 弹出层 | object | — |{ }| |
||||
| adapter | 弹出层的位置 | object | — | null| |
||||
| masker | masker层 | obejct | — | { }| |
||||
| switcherClass | 切换类 | string| —| "bi-switcher-popup" | |
||||
| hoverClass | hover类 | 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,84 +0,0 @@
|
||||
# bi.switcher |
||||
|
||||
## 切换显示或隐藏面板,[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/pdo5s8pq/) |
||||
|
||||
{% 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 | — | { } | |
||||
| 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,63 +0,0 @@
|
||||
# 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,76 +0,0 @@
|
||||
# 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 | 参考button_group | 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,54 +0,0 @@
|
||||
# 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 | 参考button_group | 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 | 是否有匹配的元素 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
# bi.border |
||||
|
||||
#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qtdsdegp/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
BI.createWidget({ |
||||
type: 'bi.border', |
||||
element: "#wrapper", |
||||
items: { |
||||
north: { |
||||
el: {type: "bi.label"}, |
||||
height: 30, |
||||
top: 20, |
||||
left: 20, |
||||
right: 20 |
||||
}, |
||||
south: { |
||||
el: {type: "bi.label"}, |
||||
height: 50, |
||||
bottom: 20, |
||||
left: 20, |
||||
right: 20 |
||||
}, |
||||
west: { |
||||
el: {type: "bi.label"}, |
||||
width: 200, |
||||
left: 20 |
||||
}, |
||||
east: { |
||||
el: {type: "bi.label"}, |
||||
width: 300, |
||||
right: 20 |
||||
}, |
||||
center: {el: {type: "bi.label"}} |
||||
} |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| items | 子控件对象 | object | north,east,west,south,center | [ ] | |
||||
|
||||
--- |
||||
@ -1,47 +0,0 @@
|
||||
# bi.center |
||||
|
||||
#### 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/8fd2nvkm/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.center", |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Center 1，这里虽然设置label的高度30，但是最终影响高度的是center布局", |
||||
cls: "layout-bg1", |
||||
whiteSpace: "normal" |
||||
},{ |
||||
type: "bi.label", |
||||
text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", |
||||
cls: "layout-bg2", |
||||
whiteSpace: "normal" |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | — | 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | — | 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
|
||||
|
||||
--- |
||||
@ -1,47 +0,0 @@
|
||||
# bi.center_adapt |
||||
|
||||
#### 自适应左右垂直居中布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/7bsxw7u5/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
element: "#wrapper", |
||||
hgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Center Adapt 1", |
||||
cls: "layout-bg1", |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "Center Adapt 2", |
||||
cls: "layout-bg2", |
||||
height: 30 |
||||
}] |
||||
}) |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | — | 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | — | 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
| columnSize | 每列宽度所组成的数组 | array | — | [ ] | |
||||
|
||||
--- |
||||
@ -1,48 +0,0 @@
|
||||
# bi.float_center |
||||
|
||||
#### 浮动布局实现的居中容器 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/1vgn555m/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.float_center', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
||||
cls: "layout-bg1", |
||||
whiteSpace: "normal" |
||||
}, { |
||||
type: "bi.label", |
||||
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
||||
cls: "layout-bg2", |
||||
whiteSpace: "normal" |
||||
}], |
||||
height: 300, |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | — | 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | — | 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
|
||||
|
||||
--- |
||||
@ -1,75 +0,0 @@
|
||||
# bi.flow |
||||
|
||||
#### 靠左/右对齐的自由浮动布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/c761a856/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.left", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-1", |
||||
cls: "layout-bg1", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-2", |
||||
cls: "layout-bg2", |
||||
hgap: 20 |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}, { |
||||
type: "bi.right", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-1", |
||||
cls: "layout-bg3", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-2", |
||||
cls: "layout-bg4", |
||||
hgap: 20 |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | — | 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | — | 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
| items | 子控件数组 | array | — | — | |
||||
|
||||
|
||||
|
||||
--- |
||||
@ -1,71 +0,0 @@
|
||||
# bi.grid |
||||
|
||||
#### 网格布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/1gwjbpL6/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.grid', |
||||
element: "#wrapper", |
||||
columns: 2, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-0", |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-0", |
||||
cls: "layout-bg2" |
||||
} |
||||
} { |
||||
column: 0, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-1", |
||||
cls: "layout-bg5" |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-1", |
||||
cls: "layout-bg6" |
||||
} |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| columns | 列数 | number | — | null | |
||||
| rows | 行数 | number | — | null | |
||||
| items | 子控件数组 | array | — | [] | |
||||
|
||||
|
||||
|
||||
--- |
||||
@ -1,51 +0,0 @@
|
||||
# bi.horizontal |
||||
|
||||
#### 水平流式布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/oj7y7q3o/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.horizontal', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.text_button", |
||||
cls: "layout-bg1", |
||||
text: "这里设置了lgap,rgap,tgap,bgap", |
||||
height: 30, |
||||
width: 200 |
||||
}, { |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
text: "这里设置了lgap,rgap,tgap,bgap", |
||||
height: 30, |
||||
width: 200 |
||||
}] |
||||
}); |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% 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 | |
||||
| columnSize | 每列宽度所组成的数组 | array | — | [ ] | |
||||
| verticalAlign | 元素的垂直对齐方式 | string | 参考相关css属性 | "middle" | |
||||
| scrollx | 设置水平方向是否有滚动条 | boolean | true,false | true | |
||||
|
||||
--- |
||||
@ -1,52 +0,0 @@
|
||||
# bi.horizontal_adapt |
||||
|
||||
|
||||
#### 自适应左右居中布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/Lgobog42/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.horizontal_adapt", |
||||
element: "#wrapper", |
||||
vgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Horizontal Adapt左右自适应", |
||||
cls: "layout-bg1", |
||||
width: 300, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "Horizontal Adapt左右自适应", |
||||
cls: "layout-bg2", |
||||
//width: 300, |
||||
height: 30 |
||||
}] |
||||
}) |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | — | 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | — | 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
| columnSize | 每列宽度所组成的数组 | array | — | [ ] | |
||||
| verticalAlign | 元素的垂直对齐方式 | const | 参考相关css属性 | BI.VerticalAlign.Middle | |
||||
|
||||
|
||||
--- |
||||
|
||||
@ -1,49 +0,0 @@
|
||||
# bi.horizontal_auto |
||||
|
||||
#### 水平方向居中自适应容器 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/ej2j8umg/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.horizontal_auto", |
||||
element: "#wrapper", |
||||
vgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Horizontal Auto左右自适应", |
||||
cls: "layout-bg1", |
||||
width: 300, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "Horizontal Auto左右自适应", |
||||
cls: "layout-bg2", |
||||
width: 300, |
||||
height: 30 |
||||
}] |
||||
}) |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | — | 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | — | 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
|
||||
|
||||
|
||||
--- |
||||
@ -1,44 +0,0 @@
|
||||
# bi.horizontal_float |
||||
|
||||
#### 浮动的水平居中布局 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/91rd0zpe/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.horizontal_float", |
||||
element: "#wrapper", |
||||
vgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Horizontal Float左右自适应", |
||||
cls: "layout-bg1", |
||||
width: 200, |
||||
height:30 |
||||
}] |
||||
}) |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :----|:---- |
||||
| hgap | 效果相当于容器左右padding值 | number | — | 0 | |
||||
| vgap | 效果相当于容器上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于容器left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于容器right-padding值 | number | — | 0 | |
||||
| tgap | 效果相当于容器top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于容器bottom-padding值 | number | — | 0 | |
||||
| items | 子控件数组 | array | — |[ ] | |
||||
|
||||
|
||||
--- |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue