メッセージ ボタンに数量バッジを追加する 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-connector-java8.0.27 へのアップグレードに関する注意事項

最近、オンライン セキュリティ スキャンにより、MySQL コネクタに脆弱性が見つかりました。確認し...

HTML のセルパディングとセルスペース属性を図で説明します

セル - 表の内容 セルの余白 (表の余白) (cellpadding) - セルの外側の距離を表し...

nodejs + koa + typescript の統合と自動再起動に関する問題

目次バージョンノートプロジェクトを作成する依存関係をインストールするコンテンツの記入src/serv...

メタ宣言注釈の手順

メタ宣言注釈の手順: 1. モバイル ページと 1 対 1 で対応するすべての PC ページを分類し...

ローカルアイデアアクティベーションサーバーの構築に関する詳細なチュートリアル

序文ブロガーはアイデアIDEを使用しています。アイデア公式が最近サードパーティのアクティベーションサ...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

MySQL ステートメントにおける IN と Exists の比較分析

背景最近、SQL 文を書くときに、IN と Exists のどちらを選択するか迷ったので、両方の方法...

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...

mysql 3つのテーブルを接続してビューを作成する

3 つのテーブルが接続されています。テーブル A のフィールド a はテーブル B のフィールド b...

CSSは半透明の境界と複数の境界のシーン分析を実現します

シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...

MySQL インデックスの最適化: ページング探索の詳細な紹介

目次MySQL インデックス最適化ページングの調査ケース1ケース2 MySQL インデックス最適化ペ...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

Vue で SVG アイコンを導入する 2 つの方法

Vue で SVG アイコンを導入する方法Vue で svg アイコンを導入する方法 1インストール...

Linux環境でのshadowsocks+polipoグローバルプロキシの設定

1. シャドウソックスをインストールするsudo apt-get install python-pi...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...