CODEWITHSUNDEEP
jqueryjquery-mobile
Mor
Mor

Reputation: 229

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:

enter image description here

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

Upvotes: 1

Views: 3321

Answers (1)

Omar
Omar

Reputation: 31732

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

Upvotes: 2

Related Questions