jQuery mobile-Symbol count Abzeichen / Blasen

Wie Sie eine Zählung Blase oder Abzeichen auf der Oberseite ein Symbol (data-icon) in jQuery mobile. Gibt es einen besseren Weg, um fügen Sie es als widget, anstatt zu manipulieren, mit CSS ? Ich erwarte, dass die Zählung aktualisiert werden dynamisch vom server.

InformationsquelleAutor ManKum | 2012-08-01

  1. 6

    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;}

    Fügen Sie den HTML-neben Ihrem image-tag.
    "Sie können einstellen, dass das margin-top & margin-left basiert auf der icon-Größe.Ich denke, es kann funktionieren".
    Danke.

    InformationsquelleAutor

  2. 23

    Hier ist meine version von ein badge-icon, einfach tweakable von CSS (es wird davon ausgegangen border-radius support):

    .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;
}

    Es ist standardmäßig ausgeblendet (display: none), und sollte ein-oder ausgeblendet werden und die Zählung programmgesteuert aktualisiert, wie erforderlich. Hier ist ein einfaches Beispiel, wie mache ich es in jQuery, ymmv:

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

    Habe ich diese für die Verwendung mit jQuery Mobile Navigation basiert auf einer ungeordneten Liste. Hier ist ein Beispiel für das markup für eine Registerkarte, einschließlich der Abzeichen span ich Hinzugefügt, verwendet die oben genannten Stile:

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

    Beachten Sie, dass das Abzeichen ist absolute positioniert, so muss es in einen container, der ist position: relative. Habe ich eine einfache Klasse hinzufügen-element enthalten, in diesem Fall die Eltern li wie oben gesehen:

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

    Hier ist, wie es aussieht:

    jQuery mobile-Symbol count Abzeichen /Blasen

    Und hier ist ein fiddle, leicht modifiziert, um als ein statisches Beispiel.

    Weg-Reiniger und einfache Lösung, dies sollte die Antwort sein. Werden Sie sich bewusst über den Namen der Klasse badge mit bootstrap hat einige Auswirkungen. Behalte das im Hinterkopf.
    Guter Punkt -- ich aktualisierte mein Beispiel um Konflikte zu vermeiden. Danke!

    InformationsquelleAutor

Schreibe einen Kommentar