jQuery很特别的气泡提示插件Grumble.js

jQuery很特别的气泡提示插件Grumble.js

更新: 2015-11-9

阅读:1794

开源:GitHub

任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无残留。还能指定任意距离,应用任意CSS样式。 对于任意文本还可以自动调整大小。 多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles. 最后,它能在IE6+这些古董浏览器上工作,更不用FF、Chrome这些现代的浏览器了!

grumble.js 使用了CSS3这种流行技术,并通过'计算'将自己定位到你所希望的位置上。 对于现代的浏览器我们使用 CSS3 transforms ,对于 IE6+ 使用非标准的Matrix filters. 对于实际用到的气泡图片采用了Image spriting技术,你自己可以随意换,仅仅是改改CSS代码而已。

下面介绍下如何使用Grumble.js插件。

插件安装

将grumble.min.css、jquery.grumble.min.js(已经包含了Bubble.js)和 jQuery库 添加到您的网页中(注意css中气泡图片默认在images文件夹)

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/grumble.min.css" />
<script type="text/javascript" src="js/jquery.grumble.min.js"></script>

使用方法

基本:

$('h1').grumble({
	text: '气泡里的文字!', 
	angle: 85, 
	distance: 100, 
	showAfter: 500 
});

无文本:

$('#grumble1').grumble(
	{
		text: '', 
		angle: 200, 
		distance: 3, 
		showAfter: 1000,
		hideAfter: 2000
	}
);


可选样式:

$('#grumble2').grumble(
	{
		text: 'Ohh, blue...', 
		angle: 180, 
		distance: 0, 
		showAfter: 2000,
		type: 'alt-', 
		hideAfter: 2000
	}
);

带有关闭按钮:

$('#grumble3').grumble(
	{
		text: 'Click me!',
		angle: 150,
		distance: 3,
		showAfter: 3000,
		hideAfter: false,
		hasHideButton: true,
		buttonHideText: 'Pop!'
	}
);

超大文本:

$('#grumble4').grumble(
	{
		text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
		angle: 85,
		distance: 50,
		showAfter: 4000,
		hideAfter: 2000,
	}
);

带回调方法: 

$('#myElement').grumble({
	showAfter: 1000,
	hideAfter: 2000,
	onShow: function(){
		console.log('triggered when show animation completes');
	},
	onBeginHide: function(){
		console.log('triggered when hide animation begins');
	},
	onHide: function () { 
		console.log('triggered when hide animation completes');
	}
}); 

参数说明

  • text:气泡里的文本内容,内容建议别太多
  • angle:角度,可选:0-360
  • size:气泡尺寸,默认值:50,
  • sizeRange:尺寸范围 [50,100,150,200],一般情况下气泡会自动调整大小
  • distance:距离; 默认值:0
  • type:设置气泡的CSS名称;例如设置为 'alt-'  就变成蓝色气泡了
  • useRelativePositioning:默认false,默认情况下,将位置与文档相对
  • showAfter:延迟显示时间,单位毫秒
  • hideAfter:false
  • hideOnClick:false,  点击气泡关闭
  • hasHideButton:false,
  • buttonTemplate:'<div class="grumble-button" style="display:none" title="{hideText}">x</div>',
  • buttonHideText:'Hide',
  • onHide:function(){},
  • onShow:function(){},
  • onBeginHide:function(){}