jQuery移动页面指示符(点) [英] jquery mobile page indicator (dots)

问题描述

我正在尝试在移动网络应用的底部添加页面指示符 例如:如果我在第3页中，应该显示给我:

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:

有人知道怎么做吗?

我发现了这一点: http://www.sunarlim. com/2013/05/jquery-cycle-pager-style/，但是如何在同一行中制作10个dos?

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

谢谢你， 莫

推荐答案

尽管您的问题没有任何努力的迹象，但这很有趣.

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

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

在每个页面的页脚 div中添加导航栏.添加类activePage来链接与当前页面匹配的链接.

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

---

解决方案2

动态导航栏:

在这里，您使用活动页面的.index()，并添加activePage类以使用.eq()链接数学计算页面的索引.

---

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

这篇关于jQuery移动页面指示符(点)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！