jQueryモバイルアイコンカウントバッジ/バブル

Question

jQueryモバイルのアイコン（データアイコン）の上にカウントバブルまたはバッジを追加する方法。 CSSで操作するのではなく、ウィジェットとして追加する方がいいですか？私はカウントがサーバーから動的に更新されることを期待しています。

Answer 1

HTML：

<span class="ui-li-count ui-btn-corner-all countBubl">12</span> 

CSS：

.countBubl {float:left;margin-top:-42px;margin-left:35px;background:#ed1d24;color:#fff;padding:2px;} 

自分のイメージタグの隣にHTMLを貼り付けます。 "アイコンのサイズに基づいて余白を調整することができます。&は余白が残っています。おかげさまで

Answer 2

ここではCSSで簡単に微調整できるバッジアイコン、（それがborder-radiusサポートを想定）の私のバージョンです：

.my-badge { 
    display: none; 
    background: #BA070F; 
    color: #fff; 
    padding: 1px 7px; 
    position: absolute; 
    right: 4px; 
    top: -12px; 
    z-index: 999; 
    border-radius: .8em; 
    border: 2px solid #fff; 
} 

はそれがデフォルト（display: none）によって隠されていて、表示/非表示、カウントのようにプログラム的に更新する必要があります必要です。ここでYMMV、私はjQueryのでそれをやっているかの簡単な例です：

$('#badge-page1').html(++badgeCount).fadeIn(); 

私は順不同リストに基づいてjQueryのモバイルナビゲーションバーで使用するためにこれをしませんでした。バッジが配置され、絶対なので、それはposition: relativeあるコンテナ内でなければならないこと

<li class="ui-badge-container"> 
    <span id="badge-page1" class="my-badge"></span> 
    <a href="#page-tab1" data-role="tab">Tab 1</a> 
</li> 

注：ここで私はそれが上記のスタイルを使用して追加バッジspan含めて一つのタブのためのマークアップの例を示します。私は、上で見たように、この場合には、含んでいる要素に親liを追加する単純なクラスを作成しました：

.ui-badge-container { 
    position: relative; 
} 

は、ここでは次のようになります。

そして、ここでは少しfiddle、です静的な例として動作するように修正されました。