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

11 Examples of Advanced Usage of Input Elements in Web Forms

1. Cancel the dotted box when the button is press...

Detailed installation and uninstallation tutorial for MySQL 8.0.12

1. Installation steps for MySQL 8.0.12 version. 1...

Modification of the default source sources.list file of ubuntu20.04 LTS system

If you accidentally modify the source.list conten...

MySQL triggers: creating and using triggers

This article uses examples to describe the creati...

Teach you how to subcontract uniapp and mini-programs (pictures and text)

Table of contents 1. Mini Program Subcontracting ...

Summary of several error logs about MySQL MHA setup and switching

1: masterha_check_repl replica set error replicat...

How to implement the Vue mouse wheel scrolling switching routing effect

A root routing component (the root routing compon...

Detailed explanation of Vue mixin

Table of contents Local Mixin Global Mixins Summa...

Sample code for implementing neon button animation effects with CSS3.0

Today I will share with you a neon button animati...

Convert psd cut image to div+css format

PSD to div css web page cutting example Step 1: F...

Detailed explanation of crontab scheduled execution command under Linux

In LINUX, periodic tasks are usually handled by t...

Detailed explanation of MYSQL large-scale write problem optimization

Abstract: When people talk about MySQL performanc...

vmware virtual machine ubuntu18.04 installation tutorial

Installation Steps 1. Create a virtual machine 2....