纯CSS的jQuery的气泡提示组件

1. [代码][JavaScript]代码

//调用说明
//$(selector).bub($(selector) | string[, options]);
//示例: $('#demo1').bub('hello, world!');
//options 说明
//defaults: {
// color: '#e6e6e6', //背景颜色
// padding: '10px', //内边距
// radius: '5px', //圆角半径(css3)
// shadow: 'none', //阴影(css3)
// left: 0, //位置x轴偏移
// top: 0, //位置y轴偏移
// arrow_size: '15px', //气泡的箭头大小
// arrow_direct: ['top', 'left'], //气泡的箭头指向方位([0]:'top'|'bottom',[1]:'left'|'right')
// click_blank_hide: true //点击页面空白处时是否销毁气泡
//}

(function () {
$.fn.extend({
bub: function (content, opts) {
var merge = function (all, segment) {
var ret = {};
for (var o in all) {
ret[o] = segment[o] === undefined ? all[o] : segment[o];
}
return ret;
};
var defaults = {
color: '#e6e6e6',
padding: '10px',
radius: '5px',
shadow: 'none',
left: 0,
top: 0,
arrow_size: '15px',
arrow_direct: ['top', 'left'],
click_blank_hide: true
};
opts = merge(defaults, opts || {});
this.each(function () {
if ($(this).data().buber) {
$(this).un_bub();
}
var bub_box = $('<div class="ns_bub_box" sans serif", tahoma, verdana, helvetica; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; -webkit-text-stroke-width: 0px;'> border-' + opts.arrow_direct[0] + ':transparent ' + opts.arrow_size + ' dashed;\
border-' + opts.arrow_direct[1] + ':' + opts.color + ' ' + opts.arrow_size + ' solid;\
position:absolute;\
border-' + (opts.arrow_direct[0] == 'top' ? 'bottom' : 'top') + '-' + opts.arrow_direct[1] + '-radius:' + opts.radius + ';\
left:' + ($(this).offset().left + opts.left) + 'px;\
top:' + ($(this).offset().top + $(this).outerHeight() + opts.top) + 'px;\
">\
\
\
\
\
\
\<div class="ns_bub_wrapper" sans serif", tahoma, verdana, helvetica; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; -webkit-text-stroke-width: 0px;'> box-shadow:' + opts.shadow + ';\
padding:' + opts.padding + ';\
background:' + opts.color + ';\
border-top-' + (opts.arrow_direct[1] == 'left' ? 'right' : 'left') + '-radius:' + opts.radius + ';\
border-bottom-' + (opts.arrow_direct[1] == 'left' ? 'right' : 'left') + '-radius:' + opts.radius + ';\
"></div></div>');http://www.huiyi8.com/lingsheng/​
$('body').append(bub_box);手机铃声
$(this).data().buber = bub_box;
$(this).attr('ns_bub_binder', opts.click_blank_hide);
if (content instanceof $) {
content = content.clone();
content.show();
}
bub_box.find('.ns_bub_wrapper').append(content);
});
},
un_bub: function () {
this.each(function () {
var bub_box = $(this).data().buber;
if (bub_box === undefined) return;
delete $(this).data().buber;
bub_box.remove();
});
}
});
$(function () {
$(document).click(function (e) {
e = e || window.event;
var src = e.target || e.srcElement;
if ($(src).attr('class') == 'ns_bub_box' || $(src).attr('class') == 'ns_bub_wrapper' || $(src).attr('ns_bub_binder') !== undefined) return;
$('*[ns_bub_binder=true]').un_bub();
});
});
})(window);