Grumble.js 實際執行畫面

Grumble.js 是一個用來創建球型氣泡提示訊息的 jQuery 套件，可淡出淡入展示也可以設置自動消失或手動關閉。提示訊息的位置可以靈活自動的變化，還可以圍繞一個指定元素的任何角度做360度的旋轉，亦可指定任何的距離可作用於IE6+的瀏覽器，IE都可以用了其他近代的瀏覽器幾乎都相容。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//Grumble.js 球形的提示氣泡訊息的CSS 設計樣式
<link rel="stylesheet" href="css/grumble.min.css?v=3">
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//Grumble.js 球形的提示氣泡訊息的主程式碼
<script src="js/jquery.grumble.min.js?v=5"></script>


圖二 左右搖晃的範例

圖二範例的 HTML
<a href="#" id="darkside">(:p)</a>

最後加入 JavaScript
$('#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(
  {
text: 'Click me!', //顯示提示文字
angle: 150,        //角度
distance: 3,       //距離
showAfter: 3000,     //毫秒後顯示
hideAfter: false,    //毫秒後隱藏 false 表示不隱藏
hasHideButton: true, //是否顯示打X的按鈕
buttonHideText: 'Pop!',
onShow:function(){
//顯示時回調函式
},
onBeginHide:function(){
//啟動關閉時回調函式
},
onHide:function(){
//關閉時回調函式
}
  }
);

作者網站：http://jamescryer.github.com/grumble.js/
檔案大小：36.7 KB(包含範例)
檔案下載：https://github.com/jamescryer/grumble.js
檔案備份：下載