html在消息按钮上增加数量角标的实现代码
来源:本站原创|时间:2022-11-25|栏目:CSS/HTML|
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在消息按钮上增加数量角标的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章
- 01-10利用iframe在网页中显示天气附效果截图
- 01-10通过html为FLASH加链接的实现代码(div层)
- 01-10IE浏览器HTML Hack标签总结
- 01-10html用style添加属性示例
- 01-10HTML中rel属性分析
- 01-10HTML元素设置焦点的方法
- 01-10在html文件里include文件内容的方法小结
- 01-10常用HTML meta 标签属性(网站兼容与优化需要)
- 01-10用HTML和CSS打造属于自己的暖男“大白”
- 01-10XHTML中的常用标签整理