自动生成气泡对话框的函数CreateBubble.js

时间：2017-06-11 17:21:19 阅读：326 评论：0 收藏：0 [点我收藏+]

标签：详细方法 rip efault over idt box creat ref

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

　　　　使用方法：

　　　　　　　　1.HTML代码：

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

1 <div class="tag">
2     css3气泡框
3     <div class="tail"></div>
4 </div>

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

　　　　　　　　　　　　函数源码：

function createBubble(obj){
    var $tail = obj.dom.find(‘div‘);
    obj.dom.css({
        ‘width‘:obj.width,
        ‘height‘:obj.height,
        ‘background-color‘:obj.color,
        ‘border-radius‘:obj.radius,
        ‘position‘:‘relative‘,
        ‘overflow‘:‘visible‘
    });
    $tail.css({
        ‘position‘:‘absolute‘,
        ‘width‘:‘0px‘,
        ‘height‘:‘0px‘,
        ‘border‘:obj.tailSize + ‘ solid transparent‘
    });
    switch(obj.tailPosition){
        case ‘top‘: $tail.css({‘bottom‘:obj.height,‘border-bottom-color‘:obj.color});break;
        case ‘right‘:$tail.css({‘left‘:obj.width,‘border-left-color‘:obj.color});break;
        case ‘bottom‘:$tail.css({‘top‘:obj.height,‘border-top-color‘:obj.color});break;
        case ‘left‘:$tail.css({‘right‘:obj.width,‘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){
        obj.dom.hover(function(){
                obj.dom.css(‘box-shadow‘,‘2px 2px 5px #888888‘);
            },function(){
                obj.dom.css("box-shadow","none");
            });
    }
}

//parameters that obj should contain
// var obj = {
//    dom:$(‘.tag‘),             *get the dom
//     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，parameter can be ‘left‘/‘right‘/‘top‘/‘bottom‘
//     bottom:‘80px‘,             when tailPosition = ‘left‘ or ‘right‘
//     left:‘100px‘,              when tailPosition = ‘top‘ or ‘bottom‘
//     tailSize:‘10px‘           *size of the tail
// };