guy
7 years ago
488 changed files with 8380 additions and 360386 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@
|
||||
# 通用规范 |
||||
1. 控件都会提供setValue, getValue, populate这几个方法来设置值，获取值(展示类控件除外)和刷新控件 |
||||
2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能，是否可见，是否有效状态，并且在fineui2.0之后，会自动给子组件设置同样的状态，不要重写这些方法，一些需要在设置状态时的额外操作可以通过重写_setXXX来实现 |
||||
3. 使用populate来清空或者重置布局，不要使用empty, 慎用resize |
||||
4. 谨慎监听和触发BI.Controller.EVENT_CHANGE事件，一般来说，控件都会有一个BI.ClassName.EVENT_CHANGE事件,一些特殊的事件会在对应控件文档中列出 |
||||
@ -0,0 +1,20 @@
|
||||
# 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) |
||||
|
||||
@ -0,0 +1,3 @@
|
||||
## 开发教程 |
||||
|
||||
KMS: [http://www.finedevelop.com/pages/viewpage.action?pageId=15330077](http://www.finedevelop.com/pages/viewpage.action?pageId=15330077) |
||||
@ -0,0 +1,176 @@
|
||||
# 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) |
||||
|
||||
@ -0,0 +1,40 @@
|
||||
# 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| |
||||
|
||||
|
||||
--- |
||||
@ -0,0 +1,70 @@
|
||||
# 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 | |
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
# 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 | 点击事件 | —| |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
# 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 |获取图片路径| — | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
# 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"} | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
# 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 | |
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,53 @@
|
||||
# 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 | 刷新文本框 | —| |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
# 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 | 输入框为空时触发 | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
# 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 | 刷新文本框 | —| |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
# 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 | 上传结束后触发 | |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
# 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 | 文本域失焦|—| |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,67 @@
|
||||
# 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 | —| |
||||
|
||||
|
||||
--- |
||||
@ -0,0 +1,39 @@
|
||||
# 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| |
||||
|
||||
|
||||
--- |
||||
@ -0,0 +1,68 @@
|
||||
# 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刷新完成事件 | |
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
# 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 | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
# 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 | 存储数据 | — | |
||||
|
||||
------ |
||||
|
||||
@ -0,0 +1,59 @@
|
||||
# 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 | 储存 | — | |
||||
|
||||
------ |
||||
|
||||
@ -0,0 +1,77 @@
|
||||
# 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 | 保存表 | — | |
||||
|
||||
------ |
||||
|
||||
@ -0,0 +1,73 @@
|
||||
# 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 | 滚动事件 | |
||||
|
||||
--- |
||||
|
||||
@ -0,0 +1,42 @@
|
||||
# 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 | |
||||
|
||||
--- |
||||
@ -0,0 +1,53 @@
|
||||
# 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 | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
# 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 | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
# 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 | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
# bi.calendar |
||||
|
||||
### 日历控件 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/4sfsaoma/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.calendar', |
||||
min: '1900-01-01', //最小日期 |
||||
max: '2099-12-31', //最大日期 |
||||
year: 2015, |
||||
month: 7, //7表示八月 |
||||
day: 25, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----- | ----- | ------ | ------------ | |
||||
| min | 最小日期 | string | '1900-01-01' | |
||||
| max | 最大日期 | string | '2099-12-31' | |
||||
| year | 设定的年份 | number | 2015 | |
||||
| month | 设定的月份 | number | 7 | |
||||
| day | 设定的日期 | number | 25 | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| ----------- | ------- | -------------------------- | |
||||
| isFrontDate | 是否为最小日期 | — | |
||||
| isFinalDate | 是否为最大日期 | — | |
||||
| setValue | 设置日期 | object: {year, month, day} | |
||||
| getVlaue | 获得日期 | — | |
||||
|
||||
------ |
||||
@ -0,0 +1,33 @@
|
||||
# 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 | |
||||
|
||||
------ |
||||
@ -0,0 +1,32 @@
|
||||
# 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 | 获取颜色值 | — | |
||||
|
||||
------ |
||||
@ -0,0 +1,45 @@
|
||||
# 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 | 颜色值改变时触发 | |
||||
|
||||
------ |
||||
@ -0,0 +1,86 @@
|
||||
# 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| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
# 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 | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
# 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 | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
# 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 | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
# 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 | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
# complex_canvas |
||||
|
||||
## 复杂的canvas绘图 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/psozjkgn/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
var canvas = BI.createWidget({ |
||||
type: "bi.complex_canvas", |
||||
width: 500, |
||||
height: 600 |
||||
}); |
||||
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, { |
||||
offset: 20, |
||||
strokeStyle: "red", |
||||
lineWidth: 2 |
||||
}); |
||||
|
||||
canvas.stroke(); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| branch | 绘制树枝节点| (x0, y0, x1, y1, x2, y2) （以x0, y0为根节点，分支到x1,y1, x2,y2...）| |
||||
| stroke | 绘制 | | |
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,93 @@
|
||||
# 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 | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,91 @@
|
||||
# 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 | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
# 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 | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
# 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 | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
# 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 | 点击工具栏事件 |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
# 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") |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
# 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 | 是否有下一页 | — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
# 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 |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
# 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 | |
||||
|
||||
------ |
||||
@ -0,0 +1,43 @@
|
||||
# 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 | |
||||
|
||||
------ |
||||
@ -0,0 +1,54 @@
|
||||
# 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 | |
||||
|
||||
------ |
||||
@ -0,0 +1,54 @@
|
||||
# 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 | |
||||
|
||||
------ |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue