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

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

2024-03-17

3.97K

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(){}

 

1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。