原創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();
});
}
});
本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！