HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche

HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche

HTML Quelltext:

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

CSS Code:

/*Eckmarkierung*/
    .ii{
        Anzeige: keine;
        Hintergrund: #f00;
        Randradius: 50 %;
        Breite: 20px;
        Höhe: 20px;
        oben: 5px;
        rechts: 0px;
        Position: absolut;
        Textausrichtung: zentriert;
        Farbe: #FFF;
        Z-Index: 99999;
    }

js-Code:

Funktion ajaxa(){
         $.ajax({
                Typ: „POST“,
                Datentyp: "json",
                asynchron: falsch,
                URL: "${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do",
                Daten: {},
                Erfolg: Funktion (Daten) {
                    wenn(Daten != null){
                        wenn(parseInt(Daten)>10){
                            $("#msgNum").anzeigen();
                            $("#msgNum").text(parseInt(Daten));
                        }sonst wenn(parseInt(data)> 0){
                            $("#msgNum").anzeigen();
                            $("#msgNum").text(parseInt(Daten));
                        }anders{
                            $("#msgNum").hide();
                        }
                    }
                },
                Fehler:Funktion(){
                }
            });
    }

Ergebnis:

這里寫圖片描述

Oben sehen Sie den Implementierungscode zum Hinzufügen eines Mengenindexes zur Nachrichtenschaltfläche in HTML, der vom Editor eingeführt wurde. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung

>>:  Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen

Artikel empfehlen

Implementierung der Codeaufteilung von Webpack3+React16

Projekthintergrund Seit kurzem gibt es ein Projek...

CentOS 7 SSHD ändern | Root-Login und SSHD-Port-Skriptdefinition verbieten

1. Erstellen Sie einen neuen Benutzer wwweee000 [...

Detaillierte Erklärung zum Anzeigen und Einstellen des SQL-Modus in MySQL

Anzeigen und Einstellen des SQL-Modus in MySQL My...

Web-Theorie: Bringen Sie mich nicht zum Nachdenken über Lesehinweise

Kapitel 1 <br />Das wichtigste Prinzip, um ...

JS realisiert Bild Digitaluhr

In diesem Artikelbeispiel wird der spezifische JS...

Die Grundprinzipien und die detaillierte Verwendung des Ansichtsfensters

1. Übersicht über das Ansichtsfenster Mobile Brow...

Teilen Sie 101 MySQL-Debugging- und Optimierungstipps

MySQL ist eine leistungsstarke Open-Source-Datenb...

Detaillierte Erläuterung des Mysql Self-Join-Abfragebeispiels

Dieser Artikel beschreibt die Mysql-Self-Join-Abf...

So fahren Sie nginx herunter/starten es neu

Schließung Dienst Nginx stoppen systemctl stoppt ...

base target="" gibt das Ziel des Basislinks zum Öffnen des Frames an

<base target=_blank> ändert den Zielrahmen d...

Implementieren eines binären Suchbaums in JavaScript

Die Implementierung des Suchbinärbaums in JavaScr...

Einführung in Linux-Umgebungsvariablen und Prozessadressraum

Inhaltsverzeichnis Linux-Umgebungsvariablen und P...