メッセージ ボタンに数量バッジを追加する HTML コード

メッセージ ボタンに数量バッジを追加する HTML コード

HTMLコード:

<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'">メッセージ<span id="msgNum" class="ii">4</span></a>

CSSコード:

/*コーナーマーク*​​/
    .ii{
        表示: なし;
        背景: #f00;
        境界線の半径: 50%;
        幅: 20px;
        高さ: 20px;
        上: 5px;
        右: 0px;
        位置: 絶対;
        テキスト配置: 中央;
        色: #FFF;
        zインデックス: 99999;
    }

jsコード:

関数ajaxa(){
         $.ajax({
                タイプ:"POST",
                データ型: "json",
                非同期: false、
                url: "${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do",
                データ : {}、
                成功: function(data){
                    if(データ!= null){
                        if(parseInt(データ)>10){
                            $("#msgNum").表示();
                            $("#msgNum").text(parseInt(データ));
                        }そうでない場合(parseInt(データ)> 0){
                            $("#msgNum").表示();
                            $("#msgNum").text(parseInt(データ));
                        }それ以外{
                            $("#msgNum").hide();
                        }
                    }
                },
                エラー:関数(){
                }
            });
    }

結果:

這里寫圖片描述

上記は、エディターが紹介したHTMLのメッセージボタンに数量添え字を追加するための実装コードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  特定の MySQL テーブルの完全データと増分データをメッセージ キューに同期する - ソリューション

>>:  スクロール時に選択領域のフォント色を暗くするために CSS を使用するサンプルコード

推薦する

Tomcatの自動シャットダウンに関するバグ修正

序文最近、4 年間実行されている Java EE Web プロジェクトでは、システムが開けないという...

docker runとstartの違い

docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...

nginxリバースプロキシを使用するときに長時間接続を維持する方法

・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...

Tomcat でのコネクタ構成

JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...

JavaScriptアニメーション関数のカプセル化の詳細な説明

目次1. アニメーション機能の原理2. アニメーション関数のシンプルなカプセル化3. アニメーション...

sqlmap インジェクションの詳細なグラフィック説明

目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...

TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...

ByteDance インタビュー: JS を使用して Ajax 同時リクエスト制御を実装する方法

序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...

MySQL 5.5.27 winx64 のインストールと設定方法のグラフィックチュートリアル

1. インストールパッケージMYSQLサービスダウンロードアドレス:MySQL公式サイトからダウンロ...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

formData 形式タイプを使用してファイルをアップロードする Vue の例

Vue では、一般的にフロントエンドとバックエンドを分離したプロジェクトがあり、データ操作を実装する...

ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善

<br />このシリーズの最初のセクションでは、Web サイトのパフォーマンスを向上させ...

メニューノードのすべての子ノードを再帰的に検索する MySQL メソッド

背景プロジェクトにはメニューノードのすべてのノードをチェックする要件があります。オンラインでチェック...

Win7 64 ビット版に MySQL 5.7 をダウンロードしてインストールする際によくある問題の概要

1. 公式ウェブサイトからMySQLをダウンロードします。 これが私たちが探しているものです、win...