Sample code sharing for adding quantity subscripts on message buttons in HTML-HTML Tutorial-php.cn

Sample code sharing for adding quantity subscripts on message buttons in HTML

黄舟

Release： 2017-05-25 09:33:58

Original

2527 people have browsed it

This article mainly introduces the implementation code of html adding quantity subscripts on the message button. Friends who need it can refer to the

html code:

<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>

Copy after login

css code:

/*角标 */
    .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;
    }

Copy after login

jsCode:

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(){
                }
            });
    }

Copy after login

Achievement effect:

Sample code sharing for adding quantity subscripts on message buttons in HTML

The above is the detailed content of Sample code sharing for adding quantity subscripts on message buttons in HTML. For more information, please follow other related articles on the PHP Chinese website!