jquery - Jquery Mobile のバブル カウント (iOS など) を含むバッジ アイコン

Question

アイコンがほとんどないヘッダーがあります。通知カウントのあるバッジアイコンのようなアイコンでバブルカウントを動的に表示したいです。jquery mobile ではどうすればよいでしょうか? jquery モバイルでバブル カウントを検索しましたが、現在はリストビューで利用できますが、iOS 通知カウントのようにアイコンの右上隅にカウントを表示したいと考えています。jquery モバイルに実装する必要があるバッジ アイコンについては、以下の参照 URL を見つけてください: http://en.wikipedia.org/wiki/Apple_Push_Notification_Service

Answer 1

これはCSSで行うことができます。

HTML

<div class="icon">
    <span class="count">12</span>
</div>

CSS

.icon {
   width: 50px;
   Height: 50px;
   background: url(/images/icon.png)
}

.icon .count {
    background:#ff0000;
    position: absolute; 
    top: -8px;
    Right: -8px;
    min-width:14px;
    height: 14px;
    color:#ffffff;
    border-radius: 50%;
    padding: 2px;
    text-align: center;
    font-size: 12px;
}

あとは、数字を「バブル」にいつ挿入するかを考え出すだけです。

編集:「アイコン」クラスのドットがありませんでした。