如何在jQuery中創建氣球？

Question

我使用的Java使用jQuery，

其實我想告訴指示器（氣球型）見下面的圖片..

以上的圖像文件顯示出一些跡象。

其實在我的Java代碼給JQuery一些整數然後它會顯示。

請幫幫我是他們的任何插件展示這樣的整數值..

Answer 1

更新DEMO與數量的jQuery

取代

這裏是css解決方案，如果你喜歡。 DEMO http://jsfiddle.net/yeyene/DfSda/1/

將您的按鈕添加到<span class="ballons"></span>，並替換動態計數值。

.ballons { 
    float:right; 
    margin:-20px 8px 0 0; 
    line-height:30px; 
    padding:0 10px; 
    border-radius: 30px; 
    border:3px solid #fff; 
    border-radius: 30px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    -ms-border-radius: 30px; 
    -o-border-radius: 30px; 
    background:red; 
    color:#fff; 
    text-align:center; 
    -moz-box-shadow: 1px 1px 3px 3px #ccc; 
    -webkit-box-shadow: 1px 1px 3px 3px #ccc; 
    box-shadow:   1px 1px 3px 3px #ccc; 
} 

Answer 2

只有5分鐘谷歌...

http://www.codebasehero.com/2011/07/jquery-notification-menu/

Answer 3

http://file.urin.take-uma.net/jquery.balloon.js-Demo.html

這是一個很好的插件，可以幫助您創建氣球。

Answer 4

修改@ yeyene的回答Demo 這會給氣球看起來

.ballons { 
    float:left; 
    margin:10px 8px 0 0; 
    height:150px; 
    width:100px; 
    border-radius: 30px; 
    border:3px solid #fff; 
    border-radius: 50%; 
    -ms-border-radius: 50%; 
    -o-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    background:red; 
    color:#fff; 
    text-align:center; 
    -moz-box-shadow: 1px 1px 3px 3px #ccc; 
    -webkit-box-shadow: 1px 1px 3px 3px #ccc; 
    box-shadow:   1px 1px 3px 3px #ccc; 
}