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

    之前在写一个界面,想要用到气泡,然而一直找不到现成的有效地办法,是在没有办法了我只好自己写一个,于是就有了现在的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
// };

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

            实际使用如下:

                

                    HTML代码

                

                    JavaScript代码

                

                    效果图

                其他效果:

                

                

                

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

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

时间: 2024-11-04 16:50:11

自动生成气泡对话框的函数CreateBubble.js的相关文章

自动生成FTP页面登录地址的js特效

<html> <head> <title>自动生成FTP页面登录地址的js特效丨石家庄玻璃隔断|石家庄电缆附件</title> <script janguage="javascript"> <!-- //这个简单的脚本生成了登录FTP的URL字符串 function goFtpSite() { document.location.href = "ftp://" + document.ftp.login

自动生成博客目录

操作说明 关于博客目录自动生成,已经封装成catalog.js文件,只要引用该文件即可 //默认地,为页面上所有的h3标签生成目录 <script src="http://files.cnblogs.com/files/xiaohuochai/catalog.js"></script> //或者,为页面上所有class="test"的标签生成目录 <script src="http://files.cnblogs.com/fi

Eclipse用法和技巧七:自动生成get和set方法2

上一篇文章中我们介绍了自动批量生成get和set函数的方法.这个方法一般在声明完类的数据域之后使用,比较方便快捷.这里再补充几个自动生成get和set函数的方法. 步骤一:在声明的数据域中按Ctrl+1: 步骤二:点击最后一个选项Create getter and setter,在弹出的对话框中点击确定: 在介绍另外一个方法: 步骤一:声明完类的数据域之后,输入set,按住Alt+/: 步骤二:同步骤一,输入get,再按住Alt+/: 上一篇文章,Eclipse用法和技巧六:自动生成get和se

php生成随机密码(php自定义函数)转自先锋教程网

php生成随机密码(php自定义函数) 时间:2015-12-16 20:43:49来源:网络 导读:php随机密码的生成代码,使用php自定义函数生成指定长度的随机密码,密码规则为小写字母与数字的随机字符串,长度可自定义. 生成一个随机密码的函数,生成密码为小写字母与数字的随机字符串,长度可自定义. 复制代码代码如下: <?php/* * php自动生成新密码自定义函数(带实例演示)      适用环境: PHP5.2.x  / mysql 5.0.x       代码作者: xujiajay

PDF 补丁丁 0.6.1.3498 版重大更新:在编辑器中自动生成书签!

新的 PDF 补丁丁开放了内部测试了很久的好用功能——自动书签. 这个功能可以在一分钟内快速生成文本型 PDF 文档的书签(说明:本功能分析文档中的文本,生成标题,故对扫描版的 PDF 文档无效). 使用方法 1.打开 PDF 文档. 2.将鼠标移到标题文字上面,点击鼠标右键,选择“设置自动书签标题格式”命令下的标题级别,如下图所示. 点击后,编辑器将弹出一个“自动生成书签”对话框,上面列出标题格式和标题级别的对应关系(调整列表项的设置可修改书签文本样式). 通常,我们文档中不同级别的标题,字体

C++进阶--编译器自动生成的类函数

//############################################################################ /* 在C++ 03标准下 在没有显式定义的情况加,编译器会自动生成以下4个函数 1. 拷贝构造函数 2. 拷贝赋值运算符 3. 析构函数 4. 默认构造函数(只有当没有声明任何构造函数的时候) */ class dog {}; /* 这个看似空的类,其实等效于下面这个类 */ class dog { public: dog(const d

写个js小工具自动生成博文目录

我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了,最终效果如下: 下面来介绍一下这个小工具的实现. 一.

【Java】Eclipse新建的Java文件自动生成主函数、控制台输出行数不再受限制

一.新建的Java文件自动生成主函数 虽然只是一个很简单的事情,但应该还是有人不知道了,每次新建Java文件都要手动输入public static void main(String args[]){},非常麻烦,其实Eclipse可以自动生成这行,只是大多数的Java文件都是没有主函数的,所以这行默认关闭, 右击Java项目下的src可以选择New->Class也就可以新建类 然后在弹出的对话框上勾上自动产生主函数,点击确认,在生产的Java文件中就有主函数了 二.Eclipse控制台输出行数不

c++不自动生成相关函数比如赋值、拷贝函数

默认情况下,如果没有明确声明某些函数比如赋值.拷贝函数,c++会自动生成这些函数,通常他们是对成员进行by-value拷贝,有些时候,赋值.拷贝对象并无什么意义或者不合理,比如对于socket或者thread而言,这种情况下,可以明确通过指定=delete告知编译器不要自动生成它们.如下所示: class thread_guard { std::thread& t; public: explicit thread_guard(std::thread& t_): t(t_) {} ~thre