Grumble.js气泡形状的提示(Tooltip)控件
来源:互联网 发布:中文编程安卓版 编辑:程序博客网 时间:2024/05/16 15:52
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 buttonbuttonHideText : '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:指定毫秒数后隐藏动画
演示地址
7 0
- grumble.js 气泡形状的提示(Tooltip)控件
- Grumble.js气泡形状的提示(Tooltip)控件
- grumble.js--气泡形状的提示(Tooltip)控件
- grumble.js-非常酷的气泡提示插件
- C# WinForm 给某动态控件设置 IsBalloon = true的ToolTip 即 气泡状提示
- ToolTip终极写法,气泡提示
- Ext.tip.ToolTip 气泡提示
- grumble.js
- 气球形状的ToolTip
- Tooltip工具提示控件的使用
- 信息提示控件ToolTip
- 不规则窗体形状的ToolTip
- 不规则窗体形状的ToolTip .
- Delphi 7下Edit控件的气泡提示
- DEV控件gridview中怎么添加行的ToolTip提示
- JS实现气泡提示框
- js通用提示信息(tooltip)
- 非常简单的气泡提示js(jquery)
- Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案
- SVN分支管理策略
- net.sf.cglib.beans.BulkBeanException 解决办法
- 尼姆博弈 HDU2176
- MUX 数据选择器
- Grumble.js气泡形状的提示(Tooltip)控件
- AOP面向方面编程
- 【Shader】笔记1
- [LeetCode]Remove Duplicates from Sorted List
- .h和.cpp
- xml
- URAL 1551. Sumo Tournament(数学啊 )
- libimobiledevice
- Opencv2.4.3+ffmpeg的PC安装和移植教程【参赛手记】