forked from fanruan/fineui
Browse Source
* commit 'a35fe9305a6793de99f522b300e7cfa9ebd93439': 控件抽象 文档修改 更新 实例组件文档 finish first wave update mds remove several node_modules advance few mds BI.Slider已被注册 BI-8895 slider控件 change bool to boolean update list 自定义规则数值微调 unfinish list 实例控件文档 shortcut update ignore update triggeres6
guy
7 years ago
138 changed files with 3430 additions and 857 deletions
@ -0,0 +1,42 @@
|
||||
/** |
||||
* Created by Urthur on 2017/9/4. |
||||
*/ |
||||
Demo.Slider = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(Demo.Slider.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "demo-slider", |
||||
min: 10, |
||||
max: 50 |
||||
}) |
||||
}, |
||||
_init: function () { |
||||
Demo.Slider.superclass._init.apply(this, arguments); |
||||
var self = this; |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
element: this, |
||||
width: 100, |
||||
items: [{ |
||||
type: "bi.htape", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.slider", |
||||
min: 16, |
||||
max: 50, |
||||
ref: function (_ref) { |
||||
self.slider = _ref; |
||||
} |
||||
} |
||||
}], |
||||
height: 30, |
||||
width: 100 |
||||
}] |
||||
}); |
||||
this.slider.setValue("30"); |
||||
|
||||
this.slider.on(BI.SliderNormal.EVENT_CHANGE, function () { |
||||
console.log(this.getValue()); |
||||
}) |
||||
} |
||||
}); |
||||
BI.shortcut("demo.slider", Demo.Slider); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@
|
||||
.bi-slider .bi-slider-track { |
||||
background-color: rgba(153, 153, 153, 0.3); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); |
||||
-webkit-border-radius: 3px; |
||||
-moz-border-radius: 3px; |
||||
border-radius: 3px; |
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
@import "../../bibase"; |
||||
|
||||
.bi-slider { |
||||
.bi-slider-track { |
||||
.background-color(@color-bi-background-gray, 30%); |
||||
.border-radius(3px); |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@
|
||||
/** |
||||
* Created by Urthur on 2017/9/4. |
||||
*/ |
||||
BI.SliderButton = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SliderButton.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-slider-button" |
||||
}); |
||||
}, |
||||
_init: function () { |
||||
BI.extend(BI.SliderButton.superclass._init.apply(this, arguments)); |
||||
var self = this; |
||||
var sliderButton = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
cls: "column-next-page-h-font", |
||||
iconWidth: 16, |
||||
iconHeight: 16, |
||||
height: 16, |
||||
width: 16 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: sliderButton, |
||||
left: -8 |
||||
}, { |
||||
el: { |
||||
type: "bi.label", |
||||
ref: function (_ref) { |
||||
self.label = _ref; |
||||
} |
||||
}, |
||||
left: -8, |
||||
top: -10 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.label.setText(v); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.slider_button", BI.SliderButton); |
||||
@ -0,0 +1,201 @@
|
||||
/** |
||||
* Created by Urthur on 2017/9/4. |
||||
*/ |
||||
BI.SliderNormal = BI.inherit(BI.Widget, { |
||||
_constant: { |
||||
HEIGHT: 28, |
||||
SLIDER_WIDTH_HALF: 10, |
||||
SLIDER_WIDTH: 25, |
||||
SLIDER_HEIGHT: 30, |
||||
TRACK_HEIGHT: 24 |
||||
}, |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SliderNormal.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-slider", |
||||
min: 10, |
||||
max: 50 |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.SliderNormal.superclass._init.apply(this, arguments); |
||||
var self = this; |
||||
var c = this._constant, o = this.options; |
||||
this.enable = false; |
||||
this.value = o.min; |
||||
this.min = o.min; |
||||
this.max = o.max; |
||||
|
||||
this.rightTrack = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "bi-slider-track", |
||||
height: 5 |
||||
}); |
||||
this.track = this._createTrack(); |
||||
|
||||
this.slider = BI.createWidget({ |
||||
type: "bi.slider_button" |
||||
}); |
||||
this.slider.setValue(this.getValue()); |
||||
this.slider.element.draggable({ |
||||
axis: "x", |
||||
containment: this.rightTrack.element, |
||||
scroll: false, |
||||
drag: function (e, ui) { |
||||
var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
||||
var v = self._getValueByPercent(significantPercent); |
||||
self.value = BI.parseInt(v) + 1; |
||||
self.slider.setValue(self.getValue()); |
||||
self.fireEvent(BI.SliderNormal.EVENT_CHANGE); |
||||
}, |
||||
stop: function (e, ui) { |
||||
var percent = (ui.position.left) * 100 / (self._getRightTrackLength()); |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||
self._setSliderPosition(significantPercent); |
||||
self.fireEvent(BI.SliderNormal.EVENT_CHANGE); |
||||
} |
||||
}); |
||||
var sliderVertical = BI.createWidget({ |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.slider, |
||||
top: 10 |
||||
}] |
||||
}], |
||||
hgap: c.SLIDER_WIDTH_HALF, |
||||
height: c.SLIDER_HEIGHT |
||||
}); |
||||
sliderVertical.element.click(function (e) { |
||||
if (self.enable) { |
||||
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; |
||||
var trackLength = self.track.element[0].scrollWidth; |
||||
var percent = 0; |
||||
if (offset < 0) { |
||||
percent = 0 |
||||
} |
||||
if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) { |
||||
percent = offset * 100 / self._getRightTrackLength(); |
||||
} |
||||
if (offset > (trackLength - c.SLIDER_WIDTH)) { |
||||
percent = 100 |
||||
} |
||||
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||
self._setSliderPosition(significantPercent); |
||||
var v = self._getValueByPercent(significantPercent); |
||||
self.value = BI.parseInt(v); |
||||
self.slider.setValue(self.getValue()); |
||||
self.fireEvent(BI.SliderNormal.EVENT_CHANGE); |
||||
} |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.track, |
||||
width: "100%", |
||||
height: c.TRACK_HEIGHT |
||||
}] |
||||
}], |
||||
height: c.TRACK_HEIGHT |
||||
}, |
||||
top: 33, |
||||
left: 0, |
||||
width: "100%" |
||||
}, { |
||||
el: sliderVertical, |
||||
top: 15, |
||||
left: 0, |
||||
width: "100%" |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
_createTrack: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: this.rightTrack, |
||||
top: 0, |
||||
left: 0, |
||||
width: "100%" |
||||
}] |
||||
}], |
||||
hgap: 8, |
||||
height: 5 |
||||
}, |
||||
top: 5, |
||||
left: 0, |
||||
width: "100%" |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
_checkValidation: function (v) { |
||||
return !(BI.isNull(v) || v < this.min || v > this.max) |
||||
}, |
||||
|
||||
_setSliderPosition: function (percent) { |
||||
this.slider.element.css({"left": percent + "%"}); |
||||
}, |
||||
|
||||
_getRightTrackLength: function () { |
||||
return this.rightTrack.element[0].scrollWidth |
||||
}, |
||||
|
||||
_getValueByPercent: function (percent) { |
||||
var thousandth = BI.parseInt(percent * 10); |
||||
return (((this.max - this.min) * thousandth) / 1000 + this.min); |
||||
}, |
||||
|
||||
_getPercentByValue: function (v) { |
||||
return (v - this.min) * 100 / (this.max - this.min); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.value; |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
var value = BI.parseFloat(v); |
||||
if ((!isNaN(value))) { |
||||
if (this._checkValidation(value)) { |
||||
this.value = value; |
||||
} |
||||
if (value > this.max) { |
||||
this.value = this.max; |
||||
} |
||||
if (value < this.min) { |
||||
this.value = this.min; |
||||
} |
||||
} |
||||
|
||||
if (!isNaN(this.min) && !isNaN(this.max)) { |
||||
this.enable = true; |
||||
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { |
||||
this.slider.setValue(BI.parseInt(this.value)); |
||||
this._setSliderPosition(this._getPercentByValue(this.value)); |
||||
} else { |
||||
this.slider.setValue(this.max); |
||||
this._setSliderPosition(100); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
BI.SliderNormal.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.slider", BI.SliderNormal); |
||||
@ -1,2 +1,53 @@
|
||||
# multi_select_item |
||||
# bi.multi_select_item |
||||
|
||||
## 复选框item,基类[BI.BasicButton](/core/basic_button.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/0z1fud88/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.vertical', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "复选item" |
||||
}, { |
||||
type: "bi.multi_select_item", |
||||
text: "复选项" |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 30 |
||||
| logic | | object | | {dynamic:false} | |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setSelected| 设置选中值| v | |
||||
| doRedMark | 标红 |—| |
||||
| unRedMark | 取消标红 | — | |
||||
| doClick | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,54 @@
|
||||
# single_select_item |
||||
# bi.single_select_item |
||||
|
||||
## 复选框item,基类[BI.BasicButton](/core/basic_button.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/19qqcej4/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.vertical', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "复选item" |
||||
}, { |
||||
type: "bi.single_select_item", |
||||
text: "复选项" |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 25 |
||||
| hgap | 效果相当于文本框左右padding值 |number | —| 10 | |
||||
|textAlign |文本对齐方式 |string |left,center,right |"left" |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setSelected| 设置选中值| v | |
||||
| doRedMark | 标红 |—| |
||||
| unRedMark | 取消标红 | — | |
||||
| doClick | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,55 @@
|
||||
# single_select_radio_item |
||||
# bi.single_select_radio_item |
||||
|
||||
## 单选框item,基类[BI.BasicButton](/core/basic_button.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/d3vw4438/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.vertical', |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "单选item" |
||||
}, { |
||||
type: "bi.single_select_radio_item", |
||||
text: "单选项" |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | — | 25 |
||||
| hgap | 效果相当于文本框左右padding值 |number | —| 10 | |
||||
|textAlign |文本对齐方式 |string |left,center,right |"left" |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setSelected| 设置选中值| v | |
||||
| doRedMark | 标红 |—| |
||||
| unRedMark | 取消标红 | — | |
||||
| doClick | 点击事件| — |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,86 @@
|
||||
# bubble_combo |
||||
# bi.bubble_combo |
||||
|
||||
## 表示一个可以展开的节点, 不仅有选中状态而且有展开状态, 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/urvt04so/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.bubble_combo", |
||||
element:"#wrapper", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "测试", |
||||
height: 25 |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_group", |
||||
items: BI.makeArray(100, { |
||||
type: "bi.text_item", |
||||
height: 25, |
||||
text: "item" |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
}, |
||||
maxHeight: 200 |
||||
} |
||||
}) |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| text | 组件text值 | string | —| "" | |
||||
| value | 组件value值 | string |— |""| |
||||
| stopEvent | 阻止事件 |boolean | true,false | false | |
||||
| stopPropagation | 阻止冒泡 | boolean | true,false| false | |
||||
| selected | button的选中状态 | boolean | true,false |false | |
||||
| once | 点击一次选中有效,再点无效 | boolean | true,false | false| |
||||
| forceSelected | 点击即选中, 选中了就不会被取消,与once的区别是forceSelected不影响事件的触发| boolean | true,false| false| |
||||
| forceNotSelected | 无论怎么点击都不会被选中 | boolean| true,false | false| |
||||
| disableSelected | 使能选中| boolean | true,false| false| |
||||
| shadow | 是否显示阴影 | boolean| true,false| false| |
||||
| isShadowShowingOnSelected| 选中状态下是否显示阴影|boolean| true,false | false| |
||||
| trigger | 被选元素要触发的事件 | string | mousedown, mouseup, click, dblclick, lclick | null| |
||||
| handler | 点击事件回调 | function | —| BI.emptyFn | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| bindEvent | 绑定事件| —| |
||||
| beforeClick | 点击事件之前 | —| |
||||
| doClick | 点击事件 | — | |
||||
| handle | 返回该对象 | —| |
||||
| hover | hover事件| —| |
||||
| dishover | 取消hover事件| —| |
||||
|setSelected | 设置选中的文本| b| |
||||
| isSelected | 是否被选中| —| |
||||
| isOnce | 是否只允许点击一次| —| |
||||
| isForceSelected| 判断是否点击即选中| —| |
||||
| isForceNotSelected| 判断是否怎么点击都不会被选中|—| |
||||
| isDisableSelected| 判断是否让选中|—| |
||||
| setText| 设置文本值|—| |
||||
| getText| 获取文本值|—| |
||||
| empty| 清空组件|—| |
||||
| destroy| 销毁组件|—| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,38 @@
|
||||
# formula_combo |
||||
# bi.formula_combo_trigger |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source]() |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| height | 高度 | number | —| 30 |
||||
| items | 子组件 | array | — |[ ]| |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setValue| 设置value值|—| |
||||
| getValue| 获取value值|—| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,68 @@
|
||||
# icon_combo |
||||
# bi.icon_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,2 +1,58 @@
|
||||
# static_combo |
||||
# bi.static_combo |
||||
|
||||
## 单选combo,基类[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,2 +1,65 @@
|
||||
# text_value_downlist_combo |
||||
# bi.text_value_down_list_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,2 +1,96 @@
|
||||
# shelter_editor |
||||
# bi.shelter_editor |
||||
|
||||
## 带标记的文本框,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/9Lbx6kga/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.shelter_editor", |
||||
cls: "bi-border", |
||||
ref:function(_ref){ |
||||
editor=_ref; |
||||
}, |
||||
width: 300, |
||||
watermark: "这个是带标记的" |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | — | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | — | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | — | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | — | 0 | |
||||
| validationChecker | 输入较验函数 |function| — | — | |
||||
| quitChecker | 是否允许退出编辑函数 | function | — | — | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | — | " " | |
||||
| errorText | 错误提示 | string/function | —| " "| |
||||
| height| 高度| number |— | 30| |
||||
| textAlign| 对齐方式 | 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,2 +1,91 @@
|
||||
# sign_editor |
||||
# bi.sign_editor |
||||
|
||||
## 带标记的文本框,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/tmdedu5t/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.sign_editor", |
||||
cls:"layout-bg5", |
||||
value: "123", |
||||
text: "456", |
||||
width: 300 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | — | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | —| 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | — | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | — | 0 | |
||||
| validationChecker | 输入较验函数 |function| — | — | |
||||
| quitChecker | 是否允许退出编辑函数 | function | — | — | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | — | " " | |
||||
| errorText | 错误提示 | string/function | —| " "| |
||||
| height| 高度| number |— | 30| |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setTitle| 设置title | title| |
||||
| setWarningTitle| 设置错误title | title | |
||||
| setState | 设置文本框值 |— |
||||
| getState | 获取文本框值 | — |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,92 @@
|
||||
# sign_initial_editor |
||||
# bi.sign_initial_editor |
||||
|
||||
## 基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/9vjghevp/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.sign_initial_editor", |
||||
cls: "layout-bg5", |
||||
text: "原始值", |
||||
width: 300 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | — | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | — | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | — | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | —| 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | | 0 | |
||||
| validationChecker | 输入较验函数 |function| — | — | |
||||
| quitChecker | 是否允许退出编辑函数 | function | — | — | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | — | " " | |
||||
| errorText | 错误提示 | string/function | —| " "| |
||||
| height| 高度| number |— | 30| |
||||
| text | 文本内容 | string | —| " " | |
||||
| value | 文本value值 | string | — | " " | |
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setTitle| 设置title | title| |
||||
| setWarningTitle| 设置错误title | title | |
||||
| setState | 设置文本框值 |— |
||||
| getState | 获取文本框值 | — |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,89 @@
|
||||
# state_editor |
||||
# bi.state_editor |
||||
|
||||
## 记录状态的输入框，基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/p68bwkmv/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
element: "#wrapper", |
||||
type: "bi.state_editor", |
||||
value: "123", |
||||
text: "456", |
||||
width: 300 |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值 | number | — | 4 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | — | 2 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | — | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | —| 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | — | 0 | |
||||
| validationChecker | 输入较验函数 |function| — | — | |
||||
| quitChecker | 是否允许退出编辑函数 | function |— | — | |
||||
| allowBlank | 是否允许空值 | boolean | true,false | true | |
||||
| watermark | 文本框placeholder | string | —| " " | |
||||
| errorText | 错误提示 | string/function |— | " "| |
||||
| height| 高度| number |— | 30| |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setErrorText | 设置错误文本 | text | |
||||
| getErrorText | 获取错误文本 | —| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setValue | 设置文本框值|value| |
||||
| getLastValidValue | 获取文本框最后一次输入的有效值| —| |
||||
| getValue | 获取文本框值|—| |
||||
| isEditing | 文本框是否处于编辑状态|—| |
||||
| isValid | 文本框值是否有效|—| |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setState | 设置文本框值 |— |
||||
| getState | 获取文本框值 | — |
||||
|
||||
## 事件 |
||||
| 事件 | 说明 | |
||||
| :------ |:------------- | |
||||
|BI.Editor.EVENT_CHANGE | editor的value发生改变触发 | |
||||
|BI.Editor.EVENT_FOCUS | focus事件 | |
||||
|BI.Editor.EVENT_BLUR | blur事件 | |
||||
|BI.Editor.EVENT_CLICK | 点击编辑框触发(不在编辑状态时) | |
||||
|BI.Editor.EVENT_KEY_DOWN | keyDown时触发 | |
||||
|BI.Editor.EVENT_SPACE | 按下空格触发 | |
||||
|BI.Editor.EVENT_BACKSPACE | 按下Backspace触发 | |
||||
|BI.Editor.EVENT_START | 开始输入触发 | |
||||
|BI.Editor.EVENT_PAUSE | 暂停输入触发(输入空白字符) | |
||||
|BI.Editor.EVENT_STOP | 停止输入触发 | |
||||
|BI.Editor.EVENT_CONFIRM | 确定输入触发（blur时且输入值有效） | |
||||
|BI.Editor.EVENT_VALID | 输入值有效的状态事件 | |
||||
|BI.Editor.EVENT_ERROR | 输入值无效的状态事件 | |
||||
|BI.Editor.EVENT_ENTER | 回车事件 | |
||||
|BI.Editor.EVENT_RESTRICT | 回车但是值不合法 | |
||||
|BI.Editor.EVENT_REMOVE | 输入为空时按下backspace | |
||||
|BI.Editor.EVENT_EMPTY | 输入框为空时触发 | |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
|
||||
@ -1,2 +1,69 @@
|
||||
# layer_panel |
||||
# 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,2 +1,34 @@
|
||||
# multi_popup_layer |
||||
# 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,2 +1,74 @@
|
||||
# pane_list |
||||
# 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,2 +1,54 @@
|
||||
# panel |
||||
# 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,2 +1,59 @@
|
||||
# select_list |
||||
# bi.select_list |
||||
|
||||
### 选择列表 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/c3azpxss/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.select_list", |
||||
items: [{ |
||||
text: '1', |
||||
}, { |
||||
text: '2', |
||||
}] |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------------ | --------------- | -------- | ---------------- | |
||||
| direction | toolbar位置 | string | BI.Direction.Top | |
||||
| onLoaded | 加载完成的回调（测试了无效果） | function | BI.emptyFn | |
||||
| items | 子项 | array | [] | |
||||
| itemsCreator | 元素创造器 | function | BI.emptyFn | |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ------------- | ------- | |
||||
| setAllSelected | 设置全选 | v: boolean | |
||||
| setToolBarVisible | 设置toolbar是否可见 | b: boolean | |
||||
| isAllSelected | 是否全选中 | — | |
||||
| hasPrev | 是否有上一页 | — | |
||||
| hasNext | 是否有下一页 | — | |
||||
| prependItems | 列表最前添加元素 | items | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| resetHeight | 重新设置高度 | h | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
------ |
||||
@ -1,2 +1,43 @@
|
||||
# lazy_loader |
||||
# bi.lazy_loader |
||||
|
||||
### 懒加载 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/n710yphc/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.lazy_loader", |
||||
width: 100, |
||||
element: 'body', |
||||
items: items, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ---------- | ----- | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
------ |
||||
@ -1,2 +1,54 @@
|
||||
# list_loader |
||||
# bi.list_loader |
||||
|
||||
### 恶心的加载控件， 为解决排序问题引入的控件 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/8wa7rvcd/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.list_loader", |
||||
width: 100, |
||||
element: 'body', |
||||
items: items, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------------ | ------ | -------- | ---------- | |
||||
| count | 分页计数 | number | false | |
||||
| next | | object | {} | |
||||
| hasNext | 是否有下一页 | function | BI.emptyFn | |
||||
| items | 子项 | array | [] | |
||||
| itemsCreator | 元素创造器 | function | BI.emptyFn | |
||||
| onLoaded | 加载完成回调 | function | BI.emptyFn | |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ---------- | ----- | |
||||
| hasNext | 是否有下一页 | — | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| resetHeight | 重新设置高度 | h | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
------ |
||||
@ -1,2 +1,54 @@
|
||||
# sort_list |
||||
# bi.sort_list |
||||
|
||||
### 排序列表 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/wj68tdvx/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.sort_list", |
||||
width: 100, |
||||
element: 'body', |
||||
items: items, |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ------------ | ------ | -------- | ---------- | |
||||
| count | 分页计数 | number | false | |
||||
| next | | object | {} | |
||||
| hasNext | 是否有下一页 | function | BI.emptyFn | |
||||
| items | 子项 | array | [] | |
||||
| itemsCreator | 元素创造器 | function | BI.emptyFn | |
||||
| onLoaded | 加载完成回调 | function | BI.emptyFn | |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------------------- | ---------- | ----- | |
||||
| hasNext | 是否有下一页 | — | |
||||
| addItems | 列表最后添加元素 | items | |
||||
| setValue | 设置值 | data | |
||||
| getVlaue | 获得值 | — | |
||||
| empty | 清空 | — | |
||||
| populate | 替换内容 | items | |
||||
| resetHeight | 重新设置高度 | h | |
||||
| setNotSelectedValue | 设置未选中值 | — | |
||||
| getNotSelectedValue | 获取未选中植 | — | |
||||
| getAllButtons | 获得所以根节点 | — | |
||||
| getAllLeaves | 获得所有叶节点 | — | |
||||
| getSelectedButtons | 获取选中的根节点 | — | |
||||
| getNotSelectedButtons | 获取未选中的根节点 | — | |
||||
| getIndexByValue | 根据值获取索引 | value | |
||||
| getNodeById | 根据id获取node | id | |
||||
| getNodeByValue | 根据值获取node | value | |
||||
|
||||
------ |
||||
@ -1,2 +1,44 @@
|
||||
# editor_trigger |
||||
# bi.editor_trigger |
||||
|
||||
### 文本输入框trigger |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/8ttm4g1u/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.editor_trigger", |
||||
element: "body", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
|
||||
### 参数 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| ----------------- | ------- | -------- | ---------- | |
||||
| validationChecker | 验证函数 | function | BI.emptyFn | |
||||
| quitChecker | 退出时验证函数 | function | BI.emptyFn | |
||||
| allowBlank | 是否允许为空 | boolean | false | |
||||
| watermark | 水印 | string | "" | |
||||
| errorText | 错误信息 | string | "" | |
||||
| triggerWidth | 触发器宽度 | number | 30 | |
||||
|
||||
|
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| -------- | ---- | ----- | |
||||
| setValue | 设置值 | value | |
||||
| getVlaue | 获得值 | — | |
||||
| setText | | text | |
||||
|
||||
------ |
||||
|
||||
|
||||
@ -1,2 +1,21 @@
|
||||
# icon_trigger |
||||
# bi.icon_trigger |
||||
|
||||
### 图标按钮trigger |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/qs44h1xy/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.icon_trigger", |
||||
element: "body", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
------ |
||||
|
||||
|
||||
@ -1,2 +1,28 @@
|
||||
# text_trigger |
||||
# bi.text_trigger |
||||
|
||||
### 文本输入框trigger |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/6pz5pjp6/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.editor_trigger", |
||||
element: "body", |
||||
}); |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
### 方法 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| -------- | ---- | ----- | |
||||
| setValue | 设置值 | value | |
||||
| getVlaue | 获得值 | — | |
||||
|
||||
------ |
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue