tag - w3schools jquery attributes



jquery mobile Seitenanzeige(Punkte) (1)

Ich versuche zum Beispiel den Seitenindikator unten in meiner mobilen Web-App hinzuzufügen: Wenn ich auf Seite 3 bin, sollte es mir zeigen:

Wer weiß, wie es geht?

Ich fand das: http://www.sunarlim.com/2013/05/jquery-cycle-pager-style/ , aber wie kann ich 10 Dos es die gleiche Linie machen?

Danke dir, Mor


Obwohl Ihre Frage keine Anzeichen von Anstrengung zeigt, ist es interessant.

Die folgende Lösung funktioniert für statische Seiten: Wenn Sie Seiten dynamisch hinzufügen möchten, müssen Sie auch dynamisch Navigationslinks hinzufügen.

Lösung 1

Statische Navigationsleiste:

Fügen Sie die Navigationsleiste zur Fußzeile div jeder Seite hinzu. Fügen Sie die Klasse activePage zum Verknüpfen der aktuellen Seite hinzu.

<div data-role="footer" data-position="fixed">
  <span class="ui-title"> <!-- to have the div centered in footer -->
    <div id="navigator">
      <a href="#p1" class="activeSlide">1</a>
      <a href="#p2">2</a>
      <a href="#p3">3</a>
    </div>
  </span>
</div>

Demo

Lösung 2

Dynamische Navigationsleiste:

Hier verwendet man die .index() der aktiven Seite und fügt die activePage Klasse hinzu, um den Index der Seite mithilfe von .eq() zu verknüpfen.

$(document).on("pagebeforeshow", "[data-role=page]", function () {
    var active = "#" + $.mobile.activePage[0].id;
    var active_index = $(active).index();
    $(".activePage").removeClass("activePage");
    $("#navigator a", this).eq(active_index).addClass("activePage");
});

Demo

CSS

#navigator {
    width: 100%;
    padding: 0;
    height: 14px;
    z-index: 999;
}
#navigator a {
    display: inline-block;
    width: 10px;
    height: 10px;
    text-indent: -999em;
    background: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 1px 1px #707173;
    margin-right: 10px;
}
#navigator a {
    background: #00ffff;
}
#navigator a.activePage {
    background: #ff8000;
}




jquery-mobile