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