首页 > web前端 > html教程 > 分享一段html在消息按钮上增加数量角标的实现代码

分享一段html在消息按钮上增加数量角标的实现代码

怪我咯
发布: 2017-05-29 09:46:09
原创
2190 人浏览过

这篇文章主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下

html代码:

1

<a  onclick="goMessage();" style="width: 60px;height: 100%;color: white;background: transparent;" href="#" class="easyui-linkbutton" data-options="iconCls:&#39;fa fa-bell-o fa-2x&#39;,size:&#39;large&#39;,iconAlign:&#39;top&#39;">消息<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中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板