Browse Source

KERNEL-10735 feat: 折叠面板

es6
Zhenfei.Li 3 years ago
parent
commit
3a97b0f93d
  1. 8
      demo/js/config/widget.js
  2. 12
      demo/js/widget/collapase/API.md
  3. 59
      demo/js/widget/collapase/demo.collapse.js
  4. 108
      src/widget/collapse/collapse.js

8
demo/js/config/widget.js

@ -194,4 +194,12 @@ Demo.WIDGET_CONFIG = [{
id: 420,
text: "滚动sliders",
value: "demo.slider"
}, {
pId: 4,
id: 414,
text: "折叠面板"
}, {
pId: 414,
text: "bi.collapse",
value: "demo.collapse"
}];

12
demo/js/widget/collapase/API.md

@ -0,0 +1,12 @@
## API
### bi.collapse
| 参数 | 说明 | 类型 | 默认值 |
| ---------- | ---------- | ------- | -------------------- |
| accordion | 手风琴模式 | boolean | false |
| bordered | 带边框风格的折叠面板 | boolean | true |
| ghost | 使折叠面板透明且无边框 | boolean | false |
| openMotion | 展开动画 | object | { animation: "bi-slide-up", animationDuring: 100}
| value | 初始化选中面板的 key | string\[] <br/> number\[] | - |
| listeners | 监听切换面板事件 | [{eventName: "EVENT_EXPAND", action:(activeKey) => void}] | - |

59
demo/js/widget/collapase/demo.collapse.js

@ -0,0 +1,59 @@
Demo.Collapse = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-collapse"
},
render: function () {
var self = this;
var items = [{
value: "test",
popup: {
cls: "mvc-border",
items: BI.createItems([{
text: "项目1",
value: 1
}, {
text: "项目2",
value: 2
}, {
text: "项目3",
value: 3
}, {
text: "项目4",
value: 4
}], {
type: "bi.single_select_item",
height: 25
})
}
}, {
value: 2,
popup: {
type: "bi.label",
value: "给岁月以文明,而不是给文明以岁月"
}
}, {
value: 3,
popup: {
type: "bi.label",
value: "漂流瓶隐没于黑暗里,在一千米见方的宇宙中,只有生态球里的小太阳发出一点光芒。在这个小小的生命世界中,几只清澈的水球在零重力环境中静静地飘浮着,有一条小鱼从一只水球中蹦出,跃入另一只水球,轻盈地穿游于绿藻之间。"
}
}];
return {
type: "bi.vertical",
items: [{
type: "bi.collapse",
accordion: true,
items: items,
value: [2],
}],
width: '60%',
tgap: 100,
hgap: 100
};
}
});
BI.shortcut("demo.collapse", Demo.Collapse);

108
src/widget/collapse/collapse.js

@ -0,0 +1,108 @@
BI.Collapse = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-collapse",
items: [],
value: [],
trigger: "click",
accordion: false,
bordered: true,
ghost: false,
isDefaultInit: false,
openMotion: {
animation: "bi-slide-up",
animationDuring: 200
}
},
render: function () {
var o = this.options;
var collapseCls = o.ghost ? "" : "bi-background " + (o.bordered ? "bi-border bi-border-radius" : "");
this.expanders = {};
return {
type: "bi.vertical",
cls: collapseCls,
items: this._getItems(this.options.items)
};
},
_getItems: function (items) {
var self = this, o = this.options;
return BI.map(items, function (index, item) {
var isActive = BI.contains(self._getCurrentValue(o.value), item.value);
var cls = o.ghost || index === 0 ? "" : "bi-border-top";
var el = BI.extend({
type: "bi.arrow_group_node",
height: 30,
text: item.text,
value: item.value,
open: isActive
}, item.el);
var popup = BI.extend({
animation: o.openMotion.animation,
animationDuring: o.openMotion.animationDuring
}, item.popup);
return BI.extend({
type: "bi.expander",
cls: cls,
isDefaultInit: o.isDefaultInit,
trigger: o.trigger,
listeners: [{
eventName: BI.Expander.EVENT_EXPAND,
action: function () {
self._hideOtherExpander(item.value);
self.fireEvent(BI.Collapse.EVENT_EXPAND, item.value);
}
}]
}, item, {
el: el,
popup: popup,
ref: function (_ref) {
BI.isFunction(item.ref) && item.ref(_ref);
self.expanders[item.value] = _ref;
}
});
});
},
_hideOtherExpander: function (expandKey) {
if (this.options.accordion) {
BI.each(this.expanders, function (key, expander) {
key !== (expandKey + "") && expander.hideView();
});
}
},
_getCurrentValue: function (v) {
var values = BI.isNotEmptyArray(v) ? v : BI.isKey(v) ? [v] : [];
return this.options.accordion ? values.slice(0, 1) : values;
},
getValue: function () {
var value = [];
BI.each(this.expanders, function (key, expander) {
expander.isExpanded() && value.push(key);
});
return value;
},
setValue: function (v) {
var values = BI.map(this._getCurrentValue(v), function (idx, value) {return value + "";});
BI.each(this.expanders, function (key, expander) {
BI.contains(values, key) ? expander.showView() : expander.hideView();
});
}
});
BI.Collapse.EVENT_EXPAND = "EVENT_EXPAND";
BI.shortcut("bi.collapse", BI.Collapse);
Loading…
Cancel
Save