Pelaksanaan html5 css3 gelembung component_css3_CSS_pengeluaran halaman web

this.datamodel = {
data: [],
wrapperClass: 'cui-bubble-layer',
upClass: 'cui-pop--triangle-up',
downClass: 'cui- pop--triangle-down',
curClass: 'active',
itemStyleClass: '',
needBorder: true,
indeks: -1,
dir: 'up' //箭头方向默认值
};

this.events = {
'klik .cui-pop-list>li': 'clickAction'
};

this.onClick = fungsi (data, indeks, el, e) {
console.log(arguments);
// this.setIndex(index);
};

this.width = null;

//三角图标偏移量
this.triangleLeft = null;
this.triangleRight = null;

this.triggerEl = null;

},

mulakan: fungsi ($super, opts) {
$super(opts);
},

createRoot: function (html) {
this.$el = $(html).hide().attr('id', this.id);
},

clickAction: fungsi (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);
},

initElement: fungsi () {
this.el = this.$el;
this.triangleEl = this.$('.cui-pop-triangle');
this.windowWidth = $(window) .width();
},

setIndex: fungsi (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;

//这里不以modeldata改变引起整个dom变化了，不划算
this.$('.cui-pop-list li').removeClass(curClass);
this.-$(' index="' i '"]').addClass(curClass);
},

//位置定位
letak semula: fungsi () {
jika (!this.triggerEl) kembali;
var offset = this.triggerEl.offset();
var step = 6, w = offset .width - step;
var top = 0, kiri = 0, kanan;
if (this.datamodel.dir == 'up') {
top = (offset.top offset.height 8) 'px';
} lain {
atas = (offset.top - this.el.offset().height - 8) 'px';
}

kiri = (offset.kiri 2) 'px';

if (offset.left (parseInt(this.width) || w) > this.windowWidth) {
this.el.css({
width: this.width || w,
atas: atas,
kanan: '2px'
});
} lain {
this.el.css({
lebar: this.width || w,
atas: atas ,
kiri: kiri
});
}

if (this.triangleLeft) {
this.triangleEl.css({ 'left': this.triangleLeft, 'right': 'auto' });
}
if (this.triangleRight) {
this.triangleEl.css({ 'kanan': this.triangleKanan, 'kiri': 'auto' });
}
},

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);
});
}

});

});

handleSizeOverflow: fungsi () {
jika (!this.isSizeOverflow()) kembali;

this.listWrapper.css({
ketinggian: (parseInt(this.windowHeight * 0.8) 'px'),
limpahan: 'tersembunyi',
kedudukan: 'relatif'
});

this.listEl.css({ kedudukan: 'mutlak', lebar: '100%' });

//Kedudukan perlu ditetapkan semula sebelum memanggil
this.reposition();

this.scroll = UIScroll baharu({
wrapper: this.listWrapper,
scroller: this.listEl
});
},

checkSizeOverflow: fungsi () {
this.handleSizeOverflow();
},

addEvent: function ($super) {
$super();
this.on('onCreate', function () {
this.$el.removeClass('cui-layer' );
this.$el.css({ position: 'absolute' });
});
this.on('onShow', function () {

//Semak sama ada kawasan yang kelihatan melebihi;
this.checkSizeOverflow();
this.setzIndexTop(this.el);
});
this.on('onHide ' , fungsi () {
if (this.scroll) this.scroll.destroy();
});
}