grumble.js 基于 jQuery 网页提示控件 - 文章教程

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

发布于 2020-08-24 字数 4029 浏览 1226 评论 0

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

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3