jquery mobile page indicator (dots)

问题:

I'm trying to add page indicator in the bottom of my mobile web app for example: if i'm in page 3 it should show me:

anyone know how to do it?

I found this: http://www.sunarlim.com/2013/05/jquery-cycle-pager-style/, but how can I make 10 dos it the same line?

Thank u, Mor

回答1:

Although your question shows no signs of effort, it is interesting.

The below solution works for static pages, if you intend to add pages dynamically, then you have to add navigation links dynamically as well.

Solution 1

Static navigation bar:

Add navigation bar to footer div of each page. Add class activePage to link matching the current page.

<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

---

Solution 2

Dynamic navigation bar:

Here, you it uses the .index() of active page and it adds activePage class to link mathcing the page's index using .eq().

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