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

Das mobile Vue-Terminal realisiert den Finger-Gleiteffekt

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung des Beispiels für MySQL-Integritätsbeschränkungen

Dieser Artikel beschreibt die MySQL-Integritätsbe...

Detaillierte Erklärung des Skript-Debugging-Mechanismus in Bash

Ausführen des Skripts im Debugmodus Sie können da...

Implementierung der Docker-Container-Statuskonvertierung

Ein Zustandsübergangsdiagramm eines Docker-Contai...

So verwenden Sie JS WebSocket zur Implementierung eines einfachen Chats

Inhaltsverzeichnis Kurze Umfrage Langfristige Abf...

So führen Sie eine Spring Boot-Anwendung in Docker aus

In den letzten Tagen habe ich gelernt, wie man Sp...

Wie stelle ich Tomcat als automatisch gestarteten Dienst ein? Der schnellste Weg

Stellen Sie Tomcat so ein, dass der Dienst automa...

Lernen Sie den Funktionsmechanismus von jsBridge in einem Artikel kennen

Inhaltsverzeichnis js aufrufende Methode Android ...

Beispielcode zur Installation von ElasticSearch und Kibana unter Docker

1. Einleitung Elasticsearch erfreut sich derzeit ...

Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs

Die Zeit vergeht wie im Flug und in nur sechs Tag...