如何在jQuery中创建气球？

Question

我正在使用Java和Jquery，

其实我想显示指标（气球类型）见下图。

上面的图像文件显示了一些迹象。

实际上在我的java代码中给Jquery一些整数然后它会显示。

请帮助我，他们是任何插件来显示这样的整数值..

Answer 1

使用JQUERY

替换号码更新DEMO

如果您愿意，这是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

google只需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;
}