您的位置:首页 > Web前端 > HTML

【html】在消息按钮上增加数量角标

2017-05-19 13:24 288 查看
html代码:

<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代码:

/*角标 */
.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代码:

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 消息角标