自动生成气泡对话框的jQuery插件CreateBubble.js

　　　　之前在写一个界面，想要用到气泡，然而一直找不到现成的有效地办法，是在没有办法了我只好自己写一个，于是就有了现在的CreateBubble.js。很简单的一个函数，但是非常实用。

　　　　使用方法：

　　　　　　　　1.HTML代码：

　　　　　　　　　　　　一个气泡对话框就是一个div,div内嵌另一个div，很简单的结构。

　　　　　　　　　　　　

 <div class="tag">
     css3气泡框
     <div class="tail"></div>
 </div>

　　　　　　　　　　　　其中div的class或者id不限制，可以随意给，也可以不定义。

　　　　　　　　　　　　函数源码：

　　　　　　　　　　　　

 $.fn.createBubble = function(obj){
     $(this).each(function(k,v){
         var $tail = $(v).find('div');
         var doubleRadius = '-'+(parseInt((obj.radius).replace(/px/g,''))*2).toString()+'px';
         $(v).css({
             'width':obj.width,
             'height':obj.height,
             'background-color':obj.color,
             'border-radius':obj.radius,
             'position':'absolute',
             'overflow':'visible'
         });
         $tail.css({
             'position':'absolute',
             'width':'0px',
             'height':'0px',
             'border':obj.tailSize + ' solid transparent'
         });
         switch(obj.tailPosition){
             case 'top': $tail.css({'top':doubleRadius,'border-bottom-color':obj.color});break;
             case 'right':$tail.css({'right':doubleRadius,'border-left-color':obj.color});break;
             case 'bottom':$tail.css({'bottom':doubleRadius,'border-top-color':obj.color});break;
             case 'left':$tail.css({'left':doubleRadius,'border-right-color':obj.color});break;
             default:console.error('parameters given to function createBubble is not correct!');
         }
         if(obj.left && (obj.tailPosition == 'bottom' || obj.tailPosition == 'top')){
             $tail.css('left',obj.left);
         }
         else if(obj.bottom && (obj.tailPosition == 'left' || obj.tailPosition == 'right')){
             $tail.css('bottom',obj.bottom);
         }
         else{
             console.error('Parameters are not correct!');
         }
         if(obj.isShadow){
             $(v).hover(function(){
                     $(v).css('box-shadow','2px 2px 5px #888888');
                 },function(){
                     $(v).css("box-shadow","none");
                 });
         }
     });
 };

 //parameters that obj should contain
 // var obj = {
 //     width:'100px',
 //     height:'80px',              size of the bubble
 //  isShadow:true,            whether shadow or not
 //     color:'#09F',              color of the bubble
 //     radius:'10px',              bubble's border-radius property
 //     tailPosition:'right',     position of the tail
 //     bottom:'80px',            when tailPosition = 'left' or 'right'
 //     left:'100px',              when tailPosition = 'top' or 'bottom'
 //     tailSize:'10px'              size of the tail
 // };

　　　　　　　　　　　　其中的注释已经详细的说明了配置的内容。星号（*）代表必填项。

　　　　　　　　　　　　实际使用如下:

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　HTML代码

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　JavaScript代码

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　效果图

　　　　　　　　　　　　　　　　其他效果：

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　在大量使用到气泡的场景，引入这个函数还是非常省心的。不过在使用该函数之前记得引用jQuery。

　　　　　　　　　　　　　　　　该函数代码已被放在我的GitHub上了，欢迎大家更新改进或者克隆。