| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
dengjianbin
12年前发布

原创BubbleTips气泡提示Jquery插件

此插件是一款互联网上非常实用的插件,漫画在项目中也经常用到,为了方便网友们使用,漫画就将此功能封装成一个通用的插件,代码很简洁,代码总共加起来了40多行,最适合网友学习用,主要实现了上、下、左、右四个方位的显示,带有可关闭操作,插件带有3个参数设置:如下
1、position:箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)
2、value :小箭头偏离左边和上边的位置
3、content :显示的提示内容
 
用法很简单、步骤如下:
1、引入Jquery核心包
2、引入插件样式文件
3、引入插件包
4、初始化插件
 
效果如下:


插件源码如下:
$(function() {   $.fn.manhua_bubbletips = function(options) {    var defaults = {        position : "t",   //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)     value : 15,    //小箭头偏离左边和上边的位置     content : ""   //内容         };    var options = $.extend(defaults,options);      var offset = $(this).offset();    var bid = parseInt(Math.random()*100000);      $("body").prepend('<div class="docBubble" id="btip'+bid+'"><i class="triangle-'+options.position+'"></i> <i class="close" title="关闭" id="btipc'+bid+'">关闭</i><div class="tl"><div class="inner"><div class="cont">'+options.content+'</div></div></div><div class="tr"></div><div class="bl"></div></div>');    var $btip = $("#btip"+bid);    var $btipClose = $("#btipc"+bid);    var h = $(this).height();    var w = $(this).width();     switch(options.position){     case "t" ://当它是上面的时候      $(".triangle-t").css('left',options.value);      $btip.css({ "left":offset.left+w/2-options.value  ,  "top":offset.top+h+14  });      break;     case "b" ://当它是下面的时候      $(".triangle-b").css('left',options.value);      $btip.css({ "left":offset.left+w/2-options.value  ,  "top":offset.top-h-7-$btip.height()  });      break;     case "l" ://当它是左边的时候        $(".triangle-l").css('top',options.value);      $btip.css({ "left":offset.left+w+10  ,  "top":offset.top+h/2-7-options.value });      break;     case "r" ://当它是右边的时候         $(".triangle-r").css('top',options.value);      $btip.css({ "left":offset.left-w+25-$btip.width()  ,  "top":offset.top+h/2-7-options.value });      break;    }    $btipClose.live("click",function(e){      $btip.hide();     });     }  });

项目主页:http://www.open-open.com/lib/view/home/1345818742008

 本文由用户 dengjianbin 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1345818742008.html
jQuery Tooltips jQuery插件