grumble.js 基于 jQuery 网页提示控件

Question

grumble.js 是一款可 360 度旋转的气泡样式 jQuery 提示框插件。该 tooltips 提示框插件可以将提示框放到它所围绕元素的任意角度的位置，多个 grumble 可以通过 FX 队列实现动画效果。

grumble.js 可以任意调整提示框的距离，对于任意文本还可以自动调整大小。可以应用自定义的 CSS 样式。它能够兼容 IE6+ 的IE浏览器，对于支持 CSS3 的现代浏览器，它使用 CSS3 transforms 来制作动画。对于 IE6+ 使用非标准的 Matrix filters 技术。插件中使用的气泡图像使用的是雪碧图片，你可以更换自己的图片，只需要对CSS样式稍作调整即可。

简介

最开始是为 Huddle.com 网站开发的，grumble.js 是一个很特别的提示控件，它没有通常的 north/east/south/west 的定位限制。

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

grumble.js 其实是一个jQuery插件，可以在 Github 找到源码。

快速使用

$('h1').grumble({
  text: 'Bubble-tastic!', 
  angle: 85, 
  distance: 100, 
  showAfter: 500 
});

使用方法

使用该气泡提示框需要在页面中引入 grumble.min.css 和 jquery，grumble.min.js 文件。

<link rel="stylesheet" type="text/css" href="path/to/grumble.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/grumble.min.js"></script>

下面的代码在 H1 标签上显示一个气泡提示框。

$('h1').grumble({
  text: 'Bubble-tastic!', 
  angle: 85, 
  distance: 100, 
  showAfter: 500 
});

可选参数

grumble.js有以下一些可用的配置参数：

text：气泡提示框中的文本。
angle：气泡提示框的旋转角度。
distance：气泡提示框距离目标的距离。
showAfter：显示气泡提示框之前的延迟时间。
hideAfter：多长时间之后隐藏气泡提示框。
hasHideButton：是否显示关闭按钮。
buttonHideText：关闭按钮的文本。
type：气泡提示框的类型。
onShow：显示提示框时的回调函数。
onBeginHide：开始隐藏提示框时的回调函数。
onHide：隐藏提示框之后的回调函数。

使用回调函数

$('#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');
  }
});

grumble.js 暴露了三个方法：'show'、'hide' 和 'adjust'。adjust方法可以用来更新grumble的位置或角度。

$('#darkside').click(function(e){
  var $me = $(this), interval;
  e.preventDefault();
  $me.grumble(
    {
      angle: 130,
      text: 'Look at me!',
      type: 'alt-', 
      distance: 10,
      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);
      }
    }
  );
});

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

源码：https://github.com/jamescryer/grumble.js