这篇文章主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下
html代码:
1 | <a onclick= "goMessage();" style= "width: 60px;height: 100%;color: white;background: transparent;" href= "#" class = "easyui-linkbutton" data-options= "iconCls:'fa fa-bell-o fa-2x',size:'large',iconAlign:'top'" >消息<span id= "msgNum" class = "ii" >4</span></a>
|
登录后复制
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .ii{
display: none;
background: #f00;
border-radius: 50%;
width: 20px;
height: 20px;
top: 5px;
right: 0px;
position: absolute;
text-align: center;
color: #FFF;
z-index: 99999;
}
|
登录后复制
js代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function ajaxa(){
$.ajax({
type: "POST" ,
dataType : "json" ,
async: false,
url : "${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do" ,
data : {},
success : function (data){
if (data !=null){
if (parseInt(data)>10){
$( "#msgNum" ).show();
$( "#msgNum" ).text(parseInt(data));
} else if (parseInt(data)> 0){
$( "#msgNum" ).show();
$( "#msgNum" ).text(parseInt(data));
} else {
$( "#msgNum" ).hide();
}
}
},
error: function (){
}
});
}
|
登录后复制
实现效果:

以上是分享一段html在消息按钮上增加数量角标的实现代码的详细内容。更多信息请关注PHP中文网其他相关文章!