jquery移动页面指示器（点）

Question

我正在尝试在移动网络应用的底部添加页面指示器 例如：如果我在第3页，它应该告诉我：

谁知道怎么做？

我发现了这个：http://www.sunarlim.com/2013/05/jquery-cycle-pager-style/，但我怎么能在同一条线上制作10个dos？

谢谢你， MOR

Answer 1

虽然你的问题没有显示出努力的迹象，但很有意思。

以下解决方案适用于静态页面，如果您打算动态添加页面，则还必须动态添加导航链接。

解决方案1 ​​

静态导航栏：

将导航栏添加到每个页面的页脚 div。添加课程activePage以匹配当前页面。

<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

---

解决方案2

动态导航栏：

在这里，您使用活跃页面的.index()，并添加activePage类来链接使用.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;
}