如何在jQuery中创建气球？

Question

i'm using Java with Jquery,

Actually i want to show indicator(ballon type) see below image..

Above image file show some indication.

Actually in my java code giving some integer to Jquery then it will displayed.

Please help me is their is any Plugin to show integer values like that..

Answer 1

Update DEMO with number replaced by JQUERY

Here is the css solution, if you like. DEMO http://jsfiddle.net/yeyene/DfSda/1/

Add <span class="ballons"></span> inside your button, and replace the dynamic count value.

.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

Only 5 minutes with google...

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

Answer 3

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

This is a nice plugin that helps you create balloons.

Answer 4

Modified @yeyene's answer Demo This will give balloon look

.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;
}