メッセージ ボタンに数量バッジを追加する 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 を使用するサンプルコード

推薦する

MySQLの起動失敗の解決策

MySQLの起動失敗の解決策MySQLを起動できませんmysqlを停止した後、いくつかの操作(ホスト...

VMware Workstation と vSphere 間で仮想マシンを移行する (画像とテキスト)

1. Workstationで仮想マシンのハードウェアバージョンを変更するWorkstation ...

画像のフェードインとフェードアウト効果を実現する js

この記事では、画像のフェードインとフェードアウトを実現するためのjsの具体的なコードを参考までに紹介...

JS でタブ効果を書く

この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...

MySQL InnoDB インデックス拡張の詳細な説明

インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...

MySQL サーバー IO 100% 分析および最適化ソリューション

序文ストレス テスト中に、リソース使用のボトルネックによって発生する最も直接的なパフォーマンスの問題...

Logrotate は 2 時間ごとに Catalina.out ログローテーションを実装します

1. Logrotateツールの紹介Logrotate はログファイル管理ツールです。Linux に...

CSS設定div背景画像実装コード

コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...

MySQL チュートリアル データ定義言語 DDL の例 詳細な説明

目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...

Vue3 (V) HTTPライブラリaxiosの統合の詳細

目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...

MySQL マスタースレーブ構築(複数のマスターと 1 つのスレーブ)の実装アイデアと手順

背景:最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...

HTML で水平ナビゲーション構造を設定する方法

この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...

React setStateデータ更新メカニズムの詳細な説明

目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...