Explication détaillée de l'exemple d'implémentation de l'indice de quantité sur le bouton de message en HTML-tutoriel HTML-php.cn

Explication détaillée de l'exemple d'implémentation de l'indice de quantité sur le bouton de message en HTML

Y2J

Libérer： 2017-05-22 10:12:56

original

3069 Les gens l'ont consulté

Cet article présente principalement le code d'implémentation de l'ajout d'indices de quantité sur le bouton de message en HTML. Les amis qui en ont besoin peuvent se référer au

code html :

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

Copier après la connexion

Code 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;
    }

Copier après la connexion

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

Copier après la connexion

Effet de réussite :

Explication détaillée de lexemple dimplémentation de lindice de quantité sur le bouton de message en HTML