html5+css3气泡组件的实现

这里给出了几个关键的定制化点：

① wrapperClass用以添加业务团队定制化的class以改变根元素的class，如此的好处是便于业务团队定制化气泡组件的样式

② 给出了项目列表Ul的可定制化className，通用单单只是方便业务团队做样式改变

③ 默认情况下返回的是传入项目的name字段，但是用户可传入一个itemFn的回调，定制化返回

以上模板基本可满足条件，如果不满足，便可把整个模板作为参数传入了

关于js实现

由于继承的实现，我们大部分工作已经被做了，我们只需要在几个关键地方编写代码即可

复制代码
define([‘UILayer’, getAppUITemplatePath(‘ui.bubble.layer’)], function (UILayer, template) {
return _.inherit(UILayer, {
propertys: function ($super) {
$super();
//html模板
this.template = template;
this.needMask = false;</p>
<p> this.datamodel = {
data: [],
wrapperClass: ‘cui-bubble-layer’,
upClass: ‘cui-pop–triangle-up’,
downClass: ‘cui-pop–triangle-down’,
curClass: ‘active’,
itemStyleClass: ”,
needBorder: true,
index: -1,
dir: ‘up’ //箭头方向默认值
};</p>
<p> this.events = {
‘click .cui-pop-list>li’: ‘clickAction’
};</p>
<p> this.onClick = function (data, index, el, e) {
console.log(arguments);
// this.setIndex(index);
};</p>
<p> this.width = null;</p>
<p> //三角图标偏移量
this.triangleLeft = null;
this.triangleRight = null;</p>
<p> this.triggerEl = null;</p>
<p> },</p>
<p> initialize: function ($super, opts) {
$super(opts);
},</p>
<p> createRoot: function (html) {
this.$el = $(html).hide().attr(‘id’, this.id);
},</p>
<p> clickAction: function (e) {
var el = $(e.currentTarget);
var i = el.attr(‘data-index’);
var data = this.datamodel.data[i];
this.onClick.call(this, data, i, el, e);
},</p>
<p> initElement: function () {
this.el = this.$el;
this.triangleEl = this.$(‘.cui-pop-triangle’);
this.windowWidth = $(window).width();
},</p>
<p> setIndex: function (i) {
var curClass = this.datamodel.curClass;
i = parseInt(i);
if (i < 0 || i > this.datamodel.data.length || i == this.datamodel.index) return;
this.datamodel.index = i;</p>
<p> //这里不以datamodel改变引起整个dom变化了，不划算
this.$(‘.cui-pop-list li’).removeClass(curClass);
this.$(‘li[data-index=”‘ + i + ‘”]’).addClass(curClass);