メッセージ ボタンに数量バッジを追加する 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 mycat ミドルウェアのインストールと使用

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...

MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...

要素のフォームコンポーネントに関する注意事項

要素フォームとコード表示詳細はエレメントフォーム公式サイトをご覧ください構造と機能の分析紹介とソース...

MySQL ページングの制限パラメータの簡単な例

Mysqlページングの2つのパラメータ ユーザー制限 1,2 から * を選択 1 は検索する最初の...

HTML 選択ボックスのプレースホルダーの作成に関する問題

テキスト入力でプレースホルダーを使用していますが、問題なく動作します。しかし、選択ボックスにはプレー...

コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)

Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...

Dockerコンテナを使用してプロキシ転送とデータバックアップを実装する方法

序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...

初心者がHTMLタグを学ぶ(3)

関連記事:初心者が学ぶ HTML タグ (2)導入された HTML タグは、必ずしも XHTML 仕...

dockerコンテナにviコマンドをインストールする簡単な操作

docker コンテナを使用する場合、vim がインストールされていないことがあり、vim コマンド...

JavaScriptはフォームデータの非同期送信を実装します

この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...

JavaScript での実行コンテキストと実行スタックの例の説明

JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...

PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...