复制代码this.checkHeightOverflow();
就这一简单接口其实可分为几个段落的实现
第一个接口为检测可视区域，这个可以被用户重写
复制代码isSizeOverflow
第二个接口是如果可视区域超出，也就是第一个接口返回true时的处理逻辑
复制代码handleSizeOverflow
考虑到超出的未必是高度，所以这里height改为了Size
当然，这里会存在资源销毁的工作，所以会新增一个hide接口
复制代码
isSizeOverflow: function () {
if (!this.el) return false;
if (this.el.height() > this.windowHeight * 0.8) return true;
return false;
},</p>
<p>handleSizeOverflow: function () {
if (!this.isSizeOverflow()) return;</p>
<p> this.listWrapper.css({
height: (parseInt(this.windowHeight * 0.8) + ‘px’),
overflow: ‘hidden’,
position: ‘relative’
});</p>
<p> this.listEl.css({ position: ‘absolute’, width: ‘100%’ });</p>
<p> //调用前需要重置位置
this.reposition();</p>
<p> this.scroll = new UIScroll({
wrapper: this.listWrapper,
scroller: this.listEl
});
},</p>
<p>checkSizeOverflow: function () {
this.handleSizeOverflow();
},</p>
<p>addEvent: function ($super) {
$super();
this.on(‘onCreate’, function () {
this.$el.removeClass(‘cui-layer’);
this.$el.css({ position: ‘absolute’ });
});
this.on(‘onShow’, function () {</p>
<p> //检查可视区域是否超出;
this.checkSizeOverflow();
this.setzIndexTop(this.el);
});
this.on(‘onHide’, function () {
if (this.scroll) this.scroll.destroy();
});
}
到此，我们的功能也基本结束了，最后实现一个定制化一点的功能，将我们的气泡组件变成黑色：
结语
今天的学习到此为止，因为小钗css3也算是初学，若是文中有误，请提出
该组件的动画以来我准备做到Layer基类上，而是会介绍css3的动画技术，这里便不介绍了
