CODEWITHSUNDEEP
iosjquery-mobilecarousel
Sophisticake
Sophisticake

Reputation: 323

Creating iOS page indicator (dots) with jQuery Mobile

// my Question to the lovely lady in the corner
I would like to create a pagination for indicating what page is visible, like in iOS, (those little dots below a window, known as "page indicators" in the HIG.)

chunky bacon

-- My project is hereby referred to as, Her Highness.

I found an example, but I can't find documentation on re-creating the layout, and it's in the experiment section :( http://jquerymobile.com/test/experiments/scrollview/#../../docs/toolbars/footer-persist-a.html

Upvotes: 5

Views: 10053

Answers (2)

naugtur
naugtur

Reputation: 16895

After reading the discussion under Russel's answer I think I understand what You want.

  1. Create a presistent footer. That's not a trivial thing to do, but can be done. You can take a look at my plugin for two column layouts http://jquerymobiledictionary.dyndns.org/dualColumn.html or wait for me to take your issue into account while I work on it during the weekend (,which I advise you to :P).

  2. After you got the presistent footer you can generate the dots from the list of pages and then handle a pageshow event to highlight the correct dot.

Wrapping the whole thing in a widget code would allow it to be a progressive enhancement, not a messy pile of code that would iritate users with nonAgrade browsers.

Upvotes: 2

Russell Leggett
Russell Leggett

Reputation: 8883

I'm not sure why this is the part that seems hard to you, but if you're talking about how to make circles with html/css3, then I've got a simple answer. Just make your dots with a border radius equal to half the height/width.

<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>

...

.dot {
    display: inline-block;
    width:12px;height:12px;
    border-radius:6px;
    background-color:#8999A6;
}
.page4 .dot4 {
    background-color: white;
}

If you can't figure out what to do beyond that, you're going to basically need someone to do the whole thing for you, but I'll give you a hint. Somewhere higher up, you're going to set a class indicating the active page. That will allow you to trigger CSS rules that could say which matching dot is active, and change the bg to white.

Upvotes: 15

Related Questions