},</p>
<p> //位置定位
reposition: function () {
if (!this.triggerEl) return;
var offset = this.triggerEl.offset();
var step = 6, w = offset.width – step;
var top = 0, left = 0, right;
if (this.datamodel.dir == ‘up’) {
top = (offset.top + offset.height + 8) + ‘px’;
} else {
top = (offset.top – this.el.offset().height – 8) + ‘px’;
}</p>
<p> left = (offset.left + 2) + ‘px’;</p>
<p> if (offset.left + (parseInt(this.width) || w) > this.windowWidth) {
this.el.css({
width: this.width || w,
top: top,
right: ‘2px’
});
} else {
this.el.css({
width: this.width || w,
top: top,
left: left
});
}</p>
<p> if (this.triangleLeft) {
this.triangleEl.css({ ‘left’: this.triangleLeft, ‘right’: ‘auto’ });
}
if (this.triangleRight) {
this.triangleEl.css({ ‘right’: this.triangleRight, ‘left’: ‘auto’ });
}
},</p>
<p> addEvent: function ($super) {
$super();
this.on(‘onCreate’, function () {
this.$el.removeClass(‘cui-layer’);
this.$el.css({ position: ‘absolute’ });
});
this.on(‘onShow’, function () {
this.setzIndexTop(this.el);
});
}</p>
<p> });</p>
<p>});
这里开始调用的，便可做简单实现：
复制代码
‘click .demo1’: function (e) {
if (!this.demo1) {
var data = [{ name: ‘<span class=”center”>普通会员</span>’ },
{ name: ‘<span class=”center”>vip</span>’ },
{ name: ‘<span class=”center”>高级vip</span>’ },
{ name: ‘<span class=”center”>钻石vip</span>’}];
this.list = new UIBubbleLayer({
datamodel: {
data: data
},
triggerEl: $(e.currentTarget),
width: ‘150px’,
triangleLeft: ’20px’
});
}
this.list.show();
}
稍作修改便可形成另一种样子：
只不过我们还得考虑这个场景的发生，在项目过多过长时我们仍需要做处理：
这里有很多办法可以处理，第一个是直接传入maxHeight，如果高度超出的话便出现滚动条，第二个是动态在组件内部计算，查看组件与可视区域的关系
我们这里还是采用可视区域计算吧，于是对原组件做一些改造，加一个接口：
