w3schools - jquery mobile Seitenanzeige(Punkte)

w3schools jquery attributes (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

https://code.i-harness.com

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