jquery移动页面指示器（点）

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

有谁知道怎么做？

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

谢谢你，莫尔

Answer 1

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

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

解决方案1

静态导航栏：

将导航栏添加到每页的页脚 div。 将类activePage添加到与当前页面匹配的链接。

 
   
 1 2 3 
   

演示

---

解决方案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"); }); 

演示

---

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