HTML code to add quantity badge to message button

HTML code to add quantity badge to message button

HTML code:

<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'">Message<span id="msgNum" class="ii">4</span></a>

CSS code:

/*Corner mark*/
    .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 code:

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

Result:

這里寫圖片描述

The above is the implementation code for adding quantity subscript to the message button in html introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  A detailed introduction to setting up Jenkins on Tencent Cloud Server

>>:  Example code for using CSS to darken the font color of the selected area when scrolling

Recommend

jQuery implements all selection and reverse selection operation case

This article shares the specific code of jQuery t...

Nginx server adds Systemd custom service process analysis

1. Take nginx as an example Nginx installed using...

The role of MySQL 8's new feature window functions

New features in MySQL 8.0 include: Full out-of-th...

Detailed discussion of the character order of mysql order by in (recommended)

//MySQL statement SELECT * FROM `MyTable` WHERE `...

Use viewport in meta tag to define screen css

<meta name="viewport" content="w...

How to query data from multiple unrelated tables and paging in Mysql

Mysql multiple unrelated tables query data and pa...

Detailed explanation of Grid layout and Flex layout of display in CSS3

Gird layout has some similarities with Flex layou...

Vue achieves seamless carousel effect

This article shares the specific code of Vue to a...

How to use JS code compiler Monaco

Preface My needs are syntax highlighting, functio...

JavaScript Advanced Programming: Variables and Scope

Table of contents 1. Original value and reference...

Detailed explanation of JavaScript error capture

Table of contents 1. Basic usage and logic 2. Fea...

How to output Chinese characters in Linux kernel

You can easily input Chinese and get Chinese outp...

Uninstalling MySQL database under Linux

How to uninstall MySQL database under Linux? The ...