Grumble.js气泡形状的提示(Tooltip)控件详解编程语言

Grumble.js是一个jQuery插件可用于创建球形汽泡Tooltips。

Grumble.js采用淡入/淡出的效果展示，可以设置成自动消失或一直显示直到被关闭为止。

Tooltips显示的位置可灵活自动变幻,360度全方位无死角，无残留。还能指定任意距离，应用任意CSS样式。

这个插件还提供一些回调方法如：onShow、onBeginHide和onHide等。

使用方法：

一、引入必需文件

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/Bubble.js"></script> 
<script type="text/javascript" src="js/jquery.grumble.js"></script> 
 
<link rel="stylesheet" type="text/css" href="css/grumble.css"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

目录结构如下：

css
   -|bootstrap.css
   -|grumble.css
images
   -|bubble-sprite.png
js
   -|Bubble.js
   -|jquery.grumble.js
   -|jquery.min.js
index.html

二、页面代码

<button type="button" id="grumble1" class="btn btn-primary">无文本</button> 
<button type="button" id="grumble2" class="btn btn-success">可选样式</button> 
<button type="button" id="grumble3" class="btn btn-info">带有关闭按钮</button> 
<button type="button" id="grumble4" class="btn btn-warning">超大文本区</button> 
<button type="button" id="myElement" class="btn btn-default">show、hide方法</button> 
<button class="btn btn-default" type="submit" id="darkside">动画实现</button>

三、使用grumble

<script type="text/javascript"> 
	$(function() { 
		$("#grumble1").click(function(){ 
			$('#grumble1').grumble( { 
				text : '', 
				angle : 200, 
				distance : 3, 
				showAfter : 100, 
				hideAfter : 1000 
			}); 
		}) 
		$("#grumble2").click(function(){ 
			$('#grumble2').grumble( { 
				text : 'Ohh, blue...', 
				angle : 180, 
				distance : 0, 
				showAfter : 100, 
				type : 'alt-', 
				hideAfter : 1000 
			}); 
		}) 
		$("#grumble3").click(function(){ 
			$('#grumble3').grumble( { 
				text : 'Click me!', 
				angle : 150, 
				distance : 3, 
				showAfter : 100, 
				hideAfter : false, 
				hasHideButton : true, // just shows the button 
				buttonHideText : 'Pop!' 
			}); 
		}) 
		$("#grumble4").click(function(){ 
			$('#grumble4').grumble( { 
				text : 'Whoaaa, this is a lot of text that i couldn/'t predict', 
				angle : 85, 
				distance : 50, 
				showAfter : 100, 
				hideAfter : 1000, 
				onHide : function() { 
					isSequenceComplete = true; 
				} 
			}); 
		}) 
 
		$('#myElement').click(function(){ 
			$('#myElement').grumble({ 
				showAfter: 100, 
				hideAfter: 2000, 
				angle : 150, 
				distance : 12, 
				onShow: function(){ 
					console.info('当显示动画完成触发'); 
				}, 
				onBeginHide: function(){ 
					console.info('隐藏动画开始时触发'); 
				}, 
				onHide: function () {  
					console.info('当隐藏动画完成后触发'); 
				} 
			}); 
		}) 
 
		$('#darkside').click(function(e){ 
			var $me = $(this), interval; 
			e.preventDefault(); 
			$me.grumble( 
				{ 
					angle: 130, 
					text: 'Look at me!', 
					type: 'alt-',  
					distance: 13, 
					hideOnClick: true, 
					onShow: function(){ 
						var angle = 130, dir = 1; 
						interval = setInterval(function(){ 
							(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir)); 
							$me.grumble('adjust',{angle: angle}); 
						},25); 
					}, 
					onHide: function(){ 
						clearInterval(interval); 
					} 
				} 
			); 
		}); 
 
	}) 
</script>

主要参数含义

angle: 旋转度数顺时针方向

distance：距离

showAfter：指定毫秒数后显示动画

hideAfter：指定毫秒数后隐藏动画